Here I am trying to plot a graph in css. Finally I ended up with this output with only one value. But I need to plot the values for both x and y axis. Like a scattered graph. How can I do that. I shouldnot use any library or any other plugins restricted only to HTML and CSS. Can anyone please help me to do that. Thanks in advance.
@import url(http://ift.tt/1PQcOTK);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1f253d;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
.font-color {
color: #9099b7;
}
.block {
margin: 25px 25px 0 0;
background: #394264;
border-radius: 5px;
float: left;
width: 300px;
overflow: hidden;
}
.line-chart-block, {
height: 400px;
}
.line-chart {
height: 200px;
background: #11a8ab;
}
.graph {
padding: 2rem 1rem 1rem;
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 80%;
}
.graph span {
display: block;
position: absolute;
bottom: 3rem;
left: 2rem;
height: 0;
border-top: 2px solid;
transform-origin: left center;
}
.graph span > span {
left: 100%; bottom: 0;
}
[data-value='25'] {width: 95px; transform: rotate(-45deg);}
[data-value='8'] {width: 24px; transform: rotate(65deg);}
[data-value='13'] {width: 39px; transform: rotate(-45deg);}
[data-value='5'] {width: 15px; transform: rotate(50deg);}
[data-value='23'] {width: 69px; transform: rotate(-70deg);}
[data-value='12'] {width: 36px; transform: rotate(75deg);}
[data-value='15'] {width: 45px; transform: rotate(-45deg);}
[data-value]:before {
content: '';
position: absolute;
display: block;
right: -4px;
bottom: -3px;
padding: 4px;
background: #fff;
border-radius: 50%;
}
[class^='plot-'] {
position: absolute;
left: 0;
bottom: 0rem;
width: 100%;
padding: 1rem 1rem 0 2rem;
height: 80%;
}
.plot-x {
height: 2.5rem;
}
.plot-y li {
height: 25%;
border-top: 1px solid #777;
}
[data-plotY]:before {
content: attr(data-plotY);
display: inline-block;
width: 2rem;
text-align: right;
line-height: 0;
position: relative;
left: -2.5rem;
top: -.5rem;
}
.plot-x li {
width: 33%;
float: left;
text-align: center;
}
<html>
<head> <title> graph </title>
<h1 style="color:#ffffff">Linear Graph</h1>
<link rel="stylesheet" href="graph.css" type="text/css" />
</head>
<body>
<!-- plotting graph-->
<div class="line-chart-block block">
<div class="line-chart">
<div class='graph'>
<ul class='plot-y'>
<li data-plotY='30'></li>
<li data-plotY='20'></li>
<li data-plotY='10'></li>
<li data-plotY='0'></li>
</ul>
<ul class='plot-x'>
<li>10</li>
<li>20</li>
<li> 30</li>
</ul>
<span data-value='25'>
<span data-value='8'>
<span data-value='13'>
<span data-value='5'>
<span data-value='23'>
<span data-value='12'>
<span data-value='15'>
</span></span>
</span>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire