With CanvasJS, you can create and add multiple Charts in a page as shown in this tutorial.
Here are the steps:
Position the chart container wherever the chart is supposed to be rendered in the page, with separate chart-container id for each chart.
HTML:
<div id="chartContainer1"></div> . . . <div id="chartContainer2"></div>
Create multiple charts and assign it to specific chart-containers where chart is supposed to be rendered, like chartContainer1, chartContainer2 and so on. And call corresponding chart render method to render the chart, like chart1.render(), chart2.render() and so on.
var chart1 = new CanvasJS.Chart("chartContainer1",{
title :{
text: "Live Data"
},
data: [{
type: "line",
dataPoints : [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
});
var chart2 = new CanvasJS.Chart("chartContainer2",{
title :{
text: "Live Data"
},
data: [{
type: "column",
dataPoints : [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
});
chart1.render();
chart2.render();
To summarize, in order to create multiple charts in a page, you should position a chart-container, create a new chart and call chart.render()
Below is the compilation of final code.
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix