Home › Forums › Chart Support › How to display multiple charts › Reply To: How to display multiple charts
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer1", {
animationEnabled: true,
theme: "light2",
title:{
text: ""
},
axisX:{
valueFormatString: "YYYY",
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "",
minimum: 35000,
maximum: 65000,
crosshair: {
enabled: true
}
},
toolTip:{
shared:true
},
legend:{
cursor:"pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: [{
type: "line",
showInLegend: true,
name: "worked hours",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2015, 0, 1), y: 58923 },
{ x: new Date(2016, 0, 1), y: 59286 }
]
},
{
type: "line",
showInLegend: true,
name: "employed",
lineDashType: "dash",
dataPoints: [
{ x: new Date(2015, 0, 1), y: 43069 },
{ x: new Date(2016, 0, 1), y: 43638 }
]
}]
});
chart.render();
function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
chart.render();
}
var chart = new CanvasJS.Chart("chartContainer2", {
animationEnabled: true,
theme: "light2",
title:{
text: ""
},
axisX:{
valueFormatString: "YYYY",
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "%",
minimum: 90,
maximum: 115,
crosshair: {
enabled: true
}
},
toolTip:{
shared:true
},
legend:{
cursor:"pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: [{
type: "line",
showInLegend: true,
name: "standardized worked hours",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2015, 0, 1), y: 97.7796584855877 },
{ x: new Date(2016, 0, 1), y: 98.3820381341166 }
]
},
{
type: "line",
showInLegend: true,
name: "standardized employed",
lineDashType: "dash",
dataPoints: [
{ x: new Date(2015, 0, 1), y: 111.0311936066 },
{ x: new Date(2016, 0, 1), y: 112.498066511988 }
]
}]
});
chart.render();
function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
chart.render();
}
var chart = new CanvasJS.Chart("chartContainer3", {
animationEnabled: true,
theme: "light2",
title:{
text: ""
},
axisX:{
valueFormatString: "YYYY",
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "%",
minimum: 80,
maximum: 160,
crosshair: {
enabled: true
}
},
toolTip:{
shared:true
},
legend:{
cursor:"pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data: [{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs Germany",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 117.8723404 },
{ x: new Date(2017, 0, 1), y: 120.106383 }
]
},
{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs Greece",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 130.239521 },
{ x: new Date(2017, 0, 1), y: 130.988024 }
]
},
{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs Spain",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 131.0533516 },
{ x: new Date(2017, 0, 1), y: 131.3269494 }
]
},
{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs France",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 130.5315204 },
{ x: new Date(2017, 0, 1), y: 131.3967862 }
]
},
{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs Italy",
markerType: "square",
xValueFormatString: "DD MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 140.8355795 },
{ x: new Date(2017, 0, 1), y: 140.1617251 }
]
},
{
type: "line",
showInLegend: true,
name: "Unit-Labour-Costs Netherlands",
lineDashType: "dash",
dataPoints: [
{ x: new Date(2016, 0, 1), y: 131.4465409 },
{ x: new Date(2017, 0, 1), y: 132.0754717 }
]
}]
});
chart.render();
function toogleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else{
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
text
...
<div id="chartContainer1" style="height: 370px; width: 100%;"></div>
<br />
<br />
more text
...
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>
even more text
...
<div id="chartContainer3" style="height: 370px; width: 100%;"></div>
last chance for text
...
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>