How to display multiple charts

This topic has 3 replies, 2 voices, and was last updated 5 years, 2 months ago by XPS.

Viewing 4 posts - 1 through 4 (of 4 total)

February 5, 2019 at 8:48 pm #24222

XPS

Hi, I’m new to HTML.
While I can display one of the following charts I struggle to display more then one chart.
Can someone please explain to me whats wrong?

Thanks in advance

text
…

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart1 = 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(1991, 0, 1), y: 60261 },
			{ x: new Date(1992, 0, 1), y: 59902 },
			{ x: new Date(1993, 0, 1), y: 58250 },
			{ x: new Date(1994, 0, 1), y: 58105 },
			{ x: new Date(1995, 0, 1), y: 57999 },
			{ x: new Date(1996, 0, 1), y: 57352 },
			{ x: new Date(1997, 0, 1), y: 56907 },
			{ x: new Date(1998, 0, 1), y: 57364 },
			{ x: new Date(1999, 0, 1), y: 57716 },
			{ x: new Date(2000, 0, 1), y: 57960 },
			{ x: new Date(2001, 0, 1), y: 57401 },
			{ x: new Date(2002, 0, 1), y: 56705 },
			{ x: new Date(2003, 0, 1), y: 55850 },
			{ x: new Date(2004, 0, 1), y: 55946 },
			{ x: new Date(2005, 0, 1), y: 55500 },
			{ x: new Date(2006, 0, 1), y: 56467 },
			{ x: new Date(2007, 0, 1), y: 57437 },
			{ x: new Date(2008, 0, 1), y: 57950 },
			{ x: new Date(2009, 0, 1), y: 56133 },
			{ x: new Date(2010, 0, 1), y: 57013 },
			{ x: new Date(2011, 0, 1), y: 57909 },
			{ x: new Date(2012, 0, 1), y: 57835 },
			{ x: new Date(2013, 0, 1), y: 57668 },
			{ x: new Date(2014, 0, 1), y: 58336 },
			{ 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(1991, 0, 1), y: 38790 },
			{ x: new Date(1992, 0, 1), y: 38283 },
			{ x: new Date(1993, 0, 1), y: 37786 },
			{ x: new Date(1994, 0, 1), y: 37798 },
			{ x: new Date(1995, 0, 1), y: 37958 },
			{ x: new Date(1996, 0, 1), y: 37969 },
			{ x: new Date(1997, 0, 1), y: 37947 },
			{ x: new Date(1998, 0, 1), y: 38407 },
			{ x: new Date(1999, 0, 1), y: 39031 },
			{ x: new Date(2000, 0, 1), y: 39917 },
			{ x: new Date(2001, 0, 1), y: 39809 },
			{ x: new Date(2002, 0, 1), y: 39630 },
			{ x: new Date(2003, 0, 1), y: 39200 },
			{ x: new Date(2004, 0, 1), y: 39337 },
			{ x: new Date(2005, 0, 1), y: 39326 },
			{ x: new Date(2006, 0, 1), y: 39635 },
			{ x: new Date(2007, 0, 1), y: 40325 },
			{ x: new Date(2008, 0, 1), y: 40856 },
			{ x: new Date(2009, 0, 1), y: 40892 },
			{ x: new Date(2010, 0, 1), y: 41020 },
			{ x: new Date(2011, 0, 1), y: 41577 },
			{ x: new Date(2012, 0, 1), y: 42061 },
			{ x: new Date(2013, 0, 1), y: 42319 },
			{ x: new Date(2014, 0, 1), y: 42672 },
			{ x: new Date(2015, 0, 1), y: 43069 },
			{ x: new Date(2016, 0, 1), y: 43638 }
		]
	}]
});
chart1.render();

function toogleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else{
		e.dataSeries.visible = true;
	}
	chart1.render();
}

}
</script>
</head>
<body>
<div id="chartContainer1" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

more text
…

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart2 = 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(1991, 0, 1), y: 100 },
			{ x: new Date(1992, 0, 1), y: 99.4042581437414 },
			{ x: new Date(1993, 0, 1), y: 96.6628499361113 },
			{ x: new Date(1994, 0, 1), y: 96.4222299663132 },
			{ x: new Date(1995, 0, 1), y: 96.2463284711505 },
			{ x: new Date(1996, 0, 1), y: 95.1726655714309 },
			{ x: new Date(1997, 0, 1), y: 94.4342111813611 },
			{ x: new Date(1998, 0, 1), y: 95.1925789482418 },
			{ x: new Date(1999, 0, 1), y: 95.7767046680274 },
			{ x: new Date(2000, 0, 1), y: 96.1816099965152 },
			{ x: new Date(2001, 0, 1), y: 95.253978526742 },
			{ x: new Date(2002, 0, 1), y: 94.0990026717114 },
			{ x: new Date(2003, 0, 1), y: 92.6801745739367 },
			{ x: new Date(2004, 0, 1), y: 92.8394815884237 },
			{ x: new Date(2005, 0, 1), y: 92.0993677502862 },
			{ x: new Date(2006, 0, 1), y: 93.7040540316291 },
			{ x: new Date(2007, 0, 1), y: 95.3137186571746 },
			{ x: new Date(2008, 0, 1), y: 96.1650155158394 },
			{ x: new Date(2009, 0, 1), y: 93.1497983770598 },
			{ x: new Date(2010, 0, 1), y: 94.6101126765238 },
			{ x: new Date(2011, 0, 1), y: 96.0969781450689 },
			{ x: new Date(2012, 0, 1), y: 95.9741789880686 },
			{ x: new Date(2013, 0, 1), y: 95.6970511607839 },
			{ x: new Date(2014, 0, 1), y: 96.8055624699225 },
			{ 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(1991, 0, 1), y: 100 },
			{ x: new Date(1992, 0, 1), y: 98.692962103635 },
			{ x: new Date(1993, 0, 1), y: 97.4117040474349 },
			{ x: new Date(1994, 0, 1), y: 97.4426398556329 },
			{ x: new Date(1995, 0, 1), y: 97.8551172982728 },
			{ x: new Date(1996, 0, 1), y: 97.8834751224542 },
			{ x: new Date(1997, 0, 1), y: 97.8267594740913 },
			{ x: new Date(1998, 0, 1), y: 99.0126321216808 },
			{ x: new Date(1999, 0, 1), y: 100.621294147976 },
			{ x: new Date(2000, 0, 1), y: 102.905387986595 },
			{ x: new Date(2001, 0, 1), y: 102.626965712813 },
			{ x: new Date(2002, 0, 1), y: 102.165506573859 },
			{ x: new Date(2003, 0, 1), y: 101.056973446765 },
			{ x: new Date(2004, 0, 1), y: 101.410157257025 },
			{ x: new Date(2005, 0, 1), y: 101.381799432844 },
			{ x: new Date(2006, 0, 1), y: 102.178396493942 },
			{ x: new Date(2007, 0, 1), y: 103.957205465326 },
			{ x: new Date(2008, 0, 1), y: 105.326114978087 },
			{ x: new Date(2009, 0, 1), y: 105.418922402681 },
			{ x: new Date(2010, 0, 1), y: 105.748904356793 },
			{ x: new Date(2011, 0, 1), y: 107.184841453983 },
			{ x: new Date(2012, 0, 1), y: 108.432585717969 },
			{ x: new Date(2013, 0, 1), y: 109.097705594225 },
			{ x: new Date(2014, 0, 1), y: 110.00773395205 },
			{ x: new Date(2015, 0, 1), y: 111.0311936066 },
			{ x: new Date(2016, 0, 1), y: 112.498066511988 }
		]
	}]
});
chart2.render();

function toogleDataSeries(e){
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else{
		e.dataSeries.visible = true;
	}
	chart2.render();
}

}
</script>
</head>
<body>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

closing text
…

February 6, 2019 at 6:10 pm #24231

Vishwas R

@xps,

An HTML document can only have one html tag and one body tag. To display multiple charts in a page, you can have multiple chart-containers (div in this case) and have just one script-tag where you create both chart1 and chart2 and render them. Please take a look at this tutorial on Rendering Multiple Charts in a Page.

Also please take a look at tutorial on HTML and this stackoverflow thread for more info.

—
Vishwas R
Team CanvasJS

February 8, 2019 at 2:14 am #24247

XPS

Solved

Thank you very much.
Now I can show everyone how and why the euro fails.

[Economics] How Germany became the Euro export world champion
https://einfache-standards.blogspot.com/2018/12/economics-how-germany-became-euro_21.html

[Wirtschaft] Wie Deutschland zum Euro-Exportweltmeister wurde
https://einfache-standards.blogspot.com/2018/12/wirtschaft-wie-deutschland-zum-euro_21.html

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>

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

How to display multiple charts