Home Forums Chart Support Rendering multiple charts in one page.

Rendering multiple charts in one page.

Viewing 2 posts - 1 through 2 (of 2 total)
  • #42297

    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

    #42310

    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.

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

You must be logged in to reply to this topic.