Forum Replies Created by MMcCarty

Viewing 1 post (of 1 total)
  • in reply to: Charts on the same page #7242

    It is possible. You have to change the “window.onload = function ()” code to a named function like “function renderMyChart(theDIVid)” so that you can pass the name of each chart’s div ID into the chart rendering function. Then, you would call the function 3 times from within the page like this:

    renderMyChart(“chartContainer1”);
    renderMyChart(“chartContainer2”);
    renderMyChart(“chartContainer3″);

    Assuming you also have different data that you want to use for each chart, you would remove the code

    dataPoints: [
    { x: 10, y: 10 },
    { x: 20, y: 15 },
    { x: 30, y: 25 },
    { x: 40, y: 30 },
    { x: 50, y: 28 }
    ]
    }
    ]

    from the new named function and create a named variable containing the data, like this:

    var dataValues1=”dataPoints: [ { x: 10, y: 10 }, { x: 20, y: 15 }, { x: 30, y: 25 }, { x: 40, y: 30 }, { x: 50, y: 28 }, ] } ]”

    Create a unique variable for each of the charts. Now you have a unique name and data points for each chart, so let’s update the function to handle two parameters. Rename the function to “function renderMyChart(theDIVid, myData)”.

    Now the function calls become:

    renderMyChart(“chartContainer1”, “dataValues1”);
    renderMyChart(“chartContainer2”, “dataValues2”);
    renderMyChart(“chartContainer3”, “dataValues3”);

    and your function should look something like this:

    function renderMyChart(theDIVid, myData) {
    var chart = new CanvasJS.Chart(theDIVid, {
    data: [
    {
    type: “column”,
    eval(myData);
    }
    ]
    });

    chart.render();
    }

Viewing 1 post (of 1 total)