<style>
#demo_graph {
width: 300px;
height: 200px;
position: relative;
}
#demo_graph li{
float: left;
display: block;
position: absolute;
bottom: 0;
margin: 0 5px;
width: 30px;
height: 20px;
}
#demo_graph li#r1{left:10px;height: 30px;background-color: #F76;}
#demo_graph li#r2{left:50px;height: 30px;background-color: #7F6;}
#demo_graph li#r3{left:90px;height: 30px;background-color: #76F;}
</style>
<script>
$(document).ready(function(){
$("#r2").animate({'height': "50px"},3000 ,"easeOutQuart");
$("#r3").animate({'height': "100px"},3000 ,"easeOutQuart");
});
</script>
<div class="c b1 full gra1">
<div class="t">HTML&CSS</div>
<div id="demo_graph">
<ul>
<li id="r1"></li>
<li id="r2"></li>
<li id="r3"></li>
</ul>
</div>
</div>
<div class="c b1 full gra1">
<div class="t">SVG</div>
<div style="height:200px;">
<svg width="300" height="200" style="margin:0;">
<g>
<rect x="10" y="170" width="30" height="30" fill="#FF7766" />
<rect x="50" y="150" width="30" height="50" fill="#77FF66" >
<animate attributeName="height" from="0" to="50" dur="2s" repeatCount="1"/>
<animate attributeName="y" from="200" to="150" dur="2s" repeatCount="1"/>
</rect>
<rect x="90" y="100" width="30" height="100" fill="#7766FF" >
<animate attributeName="height" from="0" to="100" dur="2s" repeatCount="1"/>
<animate attributeName="y" from="200" to="100" dur="2s" repeatCount="1"/>
</rect>
</g>
</svg>
</div>
</div>
<script src="/js/lib/html5/Chart/Chart.js"></script>
<script>
$(document).ready(function(){
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27]
}
]
}
new Chart(ctx).Bar(data);
});
</script>
<div class="c b1 full gra1">
<div class="t">Chart.js</div>
<canvas id="myChart" width="240" height="250"></canvas>
</div>