Home forums Using CanvasJS How to display multiple charts Reply To: How to display multiple charts

#24248

XPS

<!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://canvasjs.com/assets/script/canvasjs.min.js”></script>
</body>
</html>