Created
May 29, 2018 08:20
-
-
Save amelieykw/577d0df026c26b6b5fc6faad9340e743 to your computer and use it in GitHub Desktop.
[ChartJS | multiple chartjs in the same page] #ChartJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div style="width: 50%"> | |
<canvas id="canvas" height="450" width="600"></canvas> | |
</div> | |
<div style="width: 50%"> | |
<canvas id="canvas2" height="450" width="600"></canvas> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; | |
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()] | |
} | |
] | |
} | |
var barChartData2 = { | |
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()] | |
} | |
] | |
} | |
window.onload = function(){ | |
var ctx = document.getElementById("canvas").getContext("2d"); | |
window.myBar = new Chart(ctx).Bar(barChartData, { | |
responsive : true | |
}); | |
var ctx2 = document.getElementById("canvas2").getContext("2d"); | |
window.myBar = new Chart(ctx2).Bar(barChartData2, { | |
responsive : true | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment