2013-03-18 00:57:50 +01:00
<!doctype html>
< html >
< head >
< title > Bar Chart< / title >
2013-03-25 20:25:57 +01:00
< script src = "../Chart.js" > < / script >
2015-01-08 18:13:14 +01:00
< script src = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < / script >
2013-03-18 00:57:50 +01:00
< / head >
< body >
2014-06-29 19:36:04 +02:00
< div style = "width: 50%" >
< canvas id = "canvas" height = "450" width = "600" > < / canvas >
< / div >
2015-01-08 18:13:14 +01:00
< button id = "randomizeData" > Randomize Data< / button >
2013-03-18 00:57:50 +01:00
< script >
2014-06-29 19:36:04 +02:00
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
2015-01-08 18:13:14 +01:00
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
2014-06-29 19:36:04 +02:00
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
2013-03-18 00:57:50 +01:00
2014-06-29 19:36:04 +02:00
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
2013-03-18 00:57:50 +01:00
2015-01-08 18:13:14 +01:00
$('#randomizeData').click(function(){
barChartData.datasets[0].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
barChartData.datasets[0].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
barChartData.datasets[1].fillColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
barChartData.datasets[1].data = [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()];
window.myBar.update();
});
2013-03-18 00:57:50 +01:00
< / script >
< / body >
< / html >