Hello,
The Charts are defined by a Unique HTML ID and you will only need to change the IDs to a different one by duplicating the Codes. Example, this the HTML Code to show a Bar Chart:
Bar Chart
and this is the JS Code which needs to be added at the bottom of the Page just after the js/functions.js JS File Linking to initialize the Bar Chart:
jQuery(window).load( function(){
var globalGraphSettings = {animation : Modernizr.canvas};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,50]
}
]
};
function showBarChart(){
var ctx = document.getElementById("barChartCanvas").getContext("2d");
new Chart(ctx).Bar( barChartData, globalGraphSettings );
}
$('#barChart').appear( function(){
$(this).css({ opacity: 1 });
setTimeout( showBarChart, 300 );
},{accX: 0, accY: -155},'easeInCubic');
});
So now when you are looking to add an Additional Bar Chart, you will need to Add Another Bar Chart using the previous HTML Code but with a Unique ID. This will look something like this:
Bar Chart 2
and then duplicate the previous JS Code but with the Unique ID you just assigned to the New Bar Chart. Your complete Code will look like this:
jQuery(window).load( function(){
var globalGraphSettings = {animation : Modernizr.canvas};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,50]
}
]
};
function showBarChart(){
var ctx = document.getElementById("barChartCanvas").getContext("2d");
new Chart(ctx).Bar( barChartData, globalGraphSettings );
}
$('#barChart').appear( function(){
$(this).css({ opacity: 1 });
setTimeout( showBarChart, 300 );
},{accX: 0, accY: -155},'easeInCubic');
// For 2nd Bar Chart
var barChartData2 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,50]
}
]
};
function showBarChart2(){
var ctx = document.getElementById("barChartCanvas2").getContext("2d");
new Chart(ctx).Bar( barChartData2, globalGraphSettings );
}
$('#barChart2').appear( function(){
$(this).css({ opacity: 1 });
setTimeout( showBarChart2, 300 );
},{accX: 0, accY: -155},'easeInCubic');
});
Similarly, you can use the Codes for the Other Charts as well. This will definitely work fine.
Let us know if we can help you with anything else or if you find any further issues.
