Home forums Using CanvasJS Multiple Plots/Charts using JSON

This topic contains 3 replies, has 3 voices, and was last updated by  Preeti 11 months, 4 weeks ago.

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


    Good day,

    I have been using JSON for dynamic plots, which works very well – I had some questions earlier in the year that you kindly answered. Getting either multiple charts on one page, or multiple plots on one chart, with JSON, is past my (not so advanced) skill level – I’d love to be able to do one or both of those things! I am using canvasJS for my Energy Conservation class – we’ve got Arduinos pulling in data 🙂

    The code for a test webpage is: http://www.capegreenenergy.com/een3270/SL/SL_Test.html
    <title>SENSOR DATA</title>
    <script src=”/jquery/jquery-1.10.1.js”></script> <!– make sure jquery is available! –>
    <script src=”/js/canvasjs.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $.getJSON(“sensorJSON_SL_Test.php”, function (result1) {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    zoomEnabled: true,
    panEnabled: true,
    data: [ {
    type: “line”,
    xValueType: “dateTime”, <!– this formatting is crucial, –>
    dataPoints: result1 } ]

    <h2>This page is a display of Temperature Data acquired by Beijing resident Sida Lin</h2>
    <div id=”chartContainer” style=”width: 800px; height: 380px;”></div>
    <h2>This calls sensorJSON_DP.php to connect to the Mysql DB hosted on Cape Green Energy</h2>
    <h2>sensorJSON_DP echos the requested data in JSON format for use by the javascript graphing package CanvasJS</h2>

    The php file that is called is: http://www.capegreenenergy.com/een3270/SL/sensorJSON_SL_Test.php
    header(‘Content-Type: application/json’);
    $con=mysqli_connect(“localhost”, “EEN3270_Student”, “xxxxx”, “EEN3270_F13”);
    // Check connection
    if (mysqli_connect_errno($con))
    echo “Failed to connect to DataBase: ” . mysqli_connect_error();
    $data_points = array();
    $result = mysqli_query($con, “SELECT * FROM SL_Test”);
    while($row = mysqli_fetch_array($result))
    $point = array(“x” => $row[‘DATE’] , “y” => $row[‘VALUE1’], “z”=> $row[‘VALUE2’]);
    array_push($data_points, $point);
    echo json_encode($data_points, JSON_NUMERIC_CHECK);

    At the moment, just have three entries in the SL_Test table for testing, and the above file correctly echoes:


    Sunil Urs

    Creating multiple charts in a page is quite simple actually. This example should give you enough idea on the same.




    Ah, now I see! I needed two instances of “chart” – say chart1 and chart2, then two “chartcontainers” – chartcontainer1 and chartcontainer2. Then I could do chart1.render() and chart2.render (): worked like a charm. Thanks much.



    sorry its too late……….
    but i thnk instead of using chart1 and chart2 , jus change css style position relative for that canvas.
    its working for me.
    $(“.canvasjs-chart-canvas”).attr(“style”, “position: relative”);

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

You must be logged in to reply to this topic.