Home › Forums › Chart Support › Multiple Plots/Charts using JSON

Multiple Plots/Charts using JSON

Viewing 4 posts - 1 through 4 (of 4 total)
  • November 28, 2013 at 5:32 am #5527

    photon77

    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}]

    November 29, 2013 at 4:21 pm #5532

    Sunil Urs

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

    —
    Sunil

    December 1, 2013 at 5:28 am #5540

    photon77

    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.

    October 29, 2015 at 4:56 pm #9525

    Preeti

    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.