Rendering multiple charts in one page.

[kiranshashi]

In reference to this link

https://canvasjs.com/docs/charts/how-to/render-multiple-charts-in-a-page/

I would like to have multiple bar/line charts ( say 10 or more )
One approach is to create multiple instances of the same Chart() e.g: “var chart = new CanvasJS.Chart(“chartContainer2″,…”

However, Im investigating if I can create a single instance e.g: var chart – new CanvasJS.Chart.( parameters ) and pass it necessary variables/parameters and make the code easy to maintain.

Requirement is to also feed in a stock market data JSON file to it.
Is it possible.

My objective is to create a single html page with 10 + charts to display “Simple Moving Average”
e.g:

The first chart will be for MSFT.
Followed by another chart for AMZN
Followed by another chart for NVDA and so on.

I have a JSON data file for each stock, and I’m looking at not creating multiple instances, but just 1 instance and pass it necessary parameters.

Your comments or suggestions would be appreciated.

Shashi

[Thangaraj Raman]

Shashi,

For your case, we suggest you to use separate variables for each chart instance or to keep all the chart instances in an array as shown below.

var chartsArray = [];
chartsArray.push(new CanvasJS.Chart("chartContainer1", { //Chart 1  Options }));
chartsArray.push(new CanvasJS.Chart("chartContainer2", { //Chart 2 Options }));
for(var i = 0; i < chartsArray.length; i++) {
    chartsArray[i].render();
}

—
Thangaraj Raman
Team CanvasJS.