Home forums Using CanvasJS Charts on the same page

This topic contains 3 replies, has 4 voices, and was last updated by  Anjali 2 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #7240

    deliator
    Participant

    Hi,

    I’ve trouble putting 3 charts with different datas each under each under.
    I’ve made tests with your sample :

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    <script type=”text/javascript”>
    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    data: [
    {
    type: “column”,
    dataPoints: [
    { x: 10, y: 10 },
    { x: 20, y: 15 },
    { x: 30, y: 25 },
    { x: 40, y: 30 },
    { x: 50, y: 28 }
    ]
    }
    ]
    });

    chart.render();
    }
    </script>
    </head>

    <body>
    <div id=”chartContainer” style=”height: 500px; width: 50%;”></div>
    </body>
    </html>

    I can not find the way how doing this …
    When i add a line like : <div id=”chartContainer2″ style=”height: 500px; width: 50%;”></div> with another chart defined as ‘chartContainer2’ i don’t see nothing.

    Any help ?

    Thanks 🙂

    #7242

    MMcCarty
    Participant

    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();
    }

    #7538

    chanco
    Participant

    Hi
    Could you please precise for us how to call these functions?
    renderMyChart(“chartContainer1″);
    renderMyChart(“chartContainer2″);
    renderMyChart(“chartContainer3″);
    In my case i use just an html page.
    Or could you please give us an exemple of page code?
    Thank in advance.
    Rgds

    #7540

    Anjali
    Participant

    chanco,

    You can call this function inside the onload event handler. Please refer the below code:

    <html>
    <head>
    <script type="text/javascript">
    window.onload = function() {
    	
    	var dataPoints = [{ x: 10, y: 10 },{ x: 20, y: 15 },{ x: 30, y: 25 },{ x: 40, y: 30 },{ x: 50, y: 28 }];
    	
    	renderMyChart(chartContainer1, dataPoints);
    	renderMyChart(chartContainer2, dataPoints);
    	renderMyChart(chartContainer3, dataPoints);
    
    	function renderMyChart(theDIVid, myData) {
    		var chart = new CanvasJS.Chart(theDIVid, {
    			data: [
    			{
    				type: "column",
    				dataPoints: myData
    			}
    			]
    		});
    		chart.render();
    	}
    }
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer1" style="width:50%; height:300px"></div>
    <div id="chartContainer2" style="width:50%; height:300px"></div>
    <div id="chartContainer3" style="width:50%; height:300px"></div>
    </body>
    </html>
    
    

    __
    Anjali

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

You must be logged in to reply to this topic.