Home forums Using CanvasJS multiple chart in one page

This topic contains 1 reply, has 2 voices, and was last updated by  Priyanka M S 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20752

    samira.2018
    Member

    Hello
    I hope you’re fine
    Unfortunately, my English language and programming are weak.
    This is my program, which is a chart with 4dataseries that relates to the size of the four measured gases.
    Now I need to repeat the same graph with the same names but with a different data received from a data file txt text file
    Help me please
    I need 16 charts on one page
    <!DOCTYPE HTML>
    <html>
    <head>
    <body>
    <?php

    window.onload = function () {
    // dataPoints
    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];
    var dataPoints4 = [];

    var chart = new CanvasJS.Chart(“chartContainer”,{
    zoomEnabled: true,
    title: {
    text: “Measurement of gases”
    },
    toolTip: {
    shared: true

    },
    legend: {
    verticalAlign: “top”,
    horizontalAlign: “center”,
    fontSize: 14,
    fontWeight: “bold”,
    fontFamily: “calibri”,
    fontColor: “dimGrey”
    },
    axisX: {
    title: “chart updates every 60 sec ”
    },
    axisY:{
    prefix: ”,
    includeZero: false
    },
    data: [{
    // dataSeries1
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “AIR”,
    dataPoints: dataPoints1
    },
    {
    // dataSeries2
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “N2O” ,
    dataPoints: dataPoints2
    },
    {
    // dataSeries3
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “O2” ,
    dataPoints: dataPoints3
    },
    {
    // dataSeries4
    type: “line”,
    xValueType: “dateTime”,
    showInLegend: true,
    name: “VACUUM” ,
    dataPoints: dataPoints4

    }],
    legend:{
    cursor:”pointer”,
    itemclick : function(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }
    }
    });

    var updateInterval = 60000;
    // initial value
    var yValue1 = 0;
    var yValue2 = 0;
    var yValue3 = 0;
    var yValue4 = 0;

    var updateChart = function (AIR,N2O,O2,VACUUM,tt) {
    yValue1 = AIR;
    yValue2 = N2O;
    yValue3 = O2;
    yValue4 = VACUUM;

    // pushing the new values
    dataPoints1.push({
    x: tt,
    y: yValue1
    });
    dataPoints2.push({
    x: tt,
    y: yValue2
    });
    dataPoints3.push({
    x: tt,
    y: yValue3
    });
    dataPoints4.push({
    x: tt,
    y: yValue4
    });
    };

    var doupdate = function (AIR,N2O,O2,VACUUM) {
    // updating legend text with updated with y Value
    yValue1 = AIR;
    yValue2 = N2O;
    yValue3 = O2;
    yValue4 = VACUUM;
    chart.options.data[0].legendText = ” AIR: ” + yValue1;
    chart.options.data[1].legendText = ” N2O: ” + yValue2;
    chart.options.data[2].legendText = ” O2: ” + yValue3;
    chart.options.data[3].legendText = ” VACUUM: ” + yValue4;
    chart.render();
    };

    var newres = function () {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
    resdata = JSON.parse(this.responseText);
    updateChart(resdata.AIR,resdata.N2O,resdata.O2,resdata.VACUUM,resdata.time);
    doupdate(resdata.AIR,resdata.N2O,resdata.O2,resdata.VACUUM);
    }
    };
    xhttp.open(“POST”, “gettemp.php?q=dht&t=” + Math.random(), true);
    xhttp.send();
    };

    // generates first set of dataPoints
    <?php

    Date_default_timezone_set(‘Asia/Tehran’);
    $file = ‘temp.txt’;

    $data = file_get_contents($file);

    $arr = explode(PHP_EOL, $data);
    for ($i = 0; $i < count($arr); $i++) {
    if (strpos($arr[$i], ‘null’) !== false || empty($arr[$i]) || ctype_space($arr[$i])) {
    unset($arr[$i]);
    }
    }
    if(!empty($arr)){
    foreach($arr as $a){
    if(!empty($a)){
    $dec = json_decode($a, true);
    echo “updateChart(“.$dec[0].”,”.$dec[1].”,”.$dec[2].”,”.$dec[3].”,”.$dec[4]*1000 .”);”;
    $lAIR = $dec[0];
    $lN2O = $dec[1];
    $lO2 = $dec[2];
    $lVACUUM = $dec[3];
    }
    }
    echo ‘doupdate(‘.$lAIR.’,’.$lN2O.’,’.$lO2.’,’.$lVACUUM.’);’;
    }

    ?>
    // update chart after specified interval
    setInterval(function(){newres()}, updateInterval);
    }
    </script>
    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 300px; width: 100%;”>
    </div>
    </body>
    </html>
    samaneh.azmoodeh@gmail.com

    #20763

    Priyanka M S
    Member

    @samira.2018,

    It’s not possible to position same chart in multiple containers, instead you can create multiple charts with same chart-options and position them within a page. Please take a look at tutorial on multiple charts in a page.
    __
    Priyanka M S
    Team CanvasJS

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

You must be logged in to reply to this topic.