FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › How to display multiple charts › Reply To: How to display multiple charts

February 8, 2019 at 2:14 am #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://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>