Home forums Using CanvasJS Multiple Plots/Charts using JSON

This topic contains 3 replies, has 3 voices, and was last updated by  Preeti 1 year, 1 month ago.

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

    photon77
    Participant

    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
    <html>
    <head>
    <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 } ]
    });
    chart.render();
    });
    });
    </script>

    </head>
    <body>
    <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>
    </body>
    </html>

    The php file that is called is: http://www.capegreenenergy.com/een3270/SL/sensorJSON_SL_Test.php
    <?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();
    }else
    {
    $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);
    }
    mysqli_close($con);
    ?>

    At the moment, just have three entries in the SL_Test table for testing, and the above file correctly echoes:
    [{“x”:1385513924000,”y”:26.25,”z”:36.25},{“x”:1385513934000,”y”:26.25,”z”:40},{“x”:1385513944000,”y”:26.25,”z”:40.6}]

    #5532

    Sunil Urs
    Keymaster

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


    Sunil

    #5540

    photon77
    Participant

    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.

    #9525

    Preeti
    Member

    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.