Home forums Using CanvasJS How can I use PHP MySQL Dynamic data

Tagged: , , ,

This topic contains 48 replies, has 26 voices, and was last updated by  Vishwas R 4 months ago.

Viewing 4 posts - 46 through 49 (of 49 total)
  • Author
    Posts
  • #20422

    Hello sir, I am storing sensor data in mysql database ,now I want to use canvasJS to show realtime data from mysql database on web page.
    Jquery code for updating chart data

    function fData(){
    var lastid= $(‘#lastId’).val();
    $.ajax({
    url: httppath+”pages/fetchData”,
    type: “post”,
    data:{pId:$(‘#pid’).val(),’lastId’:lastid},
    dataType:”json”,
    success: function (res) {
    if(res[‘Pt’]!==” || res[‘Pt’]!=” “){
    $(‘#lastId’).val(res[“Pt”][‘id’]);
    updateChart(res[‘Pt’]);
    }
    },
    error: function(jqXHR, textStatus, errorThrown) {
    // console.log(textStatus, errorThrown);
    }
    });
    }
    var dps = []; // dataPoints
    var xVal;
    var yVal;
    var chart = new CanvasJS.Chart(“chartContainer”,{
    title :{
    text: “Live Data”
    },
    axisX: {
    title: “Axis X Title”
    },
    axisY: {
    title: “Pulse Rate”
    },
    data: [{
    type: “line”,
    dataPoints : dps
    }]
    });

    chart.render();

    var updateChart = function (data) {
    yVal = data[‘sensor_value’];
    dps.push({x: xVal,y: yVal});
    console.log(dps);
    xVal++;
    if (dps.length > 10 )
    {
    dps.shift();
    }
    chart.render();
    // update chart after specified time.
    };

    #20427

    @connect-javed001,

    Please check this sample project to create dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page to create a Live Updating Charts from JSON API & AJAX.

    ___________
    Indranil Deo,
    Team CanvasJS

    #23818

    I have a somewhat similiar case. I want to create a dynamic Chart from an Mysql-DB

    Unfortunatelly, I get the Msg “TypeError: chart is undefined”
    I am “only” a Graphic Designer and no programmer :()

    =============================================================================================================
    SCRIPT
    =============================================================================================================

    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml” >
    <head>
    <title></title>
    <script src=”https://code.jquery.com/jquery-3.3.1.js” integrity=”sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”></script>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>

    <script type=”text/javascript”>
    var updateInterval = 100;
    var chart;
    var dps;
    $(document).ready(function () {

    $.getJSON(“testdata.php”, function (result) {
    dps = result;
    var chart = new CanvasJS.Chart(“chartContainer”, {
    title:{
    text: “Test”,
    },
    axisY:{
    minimum: 0,
    maximum: 1000
    },
    data: [
    {
    type: “stackedBar”,
    dataPoints: dps
    }
    ]
    });

    chart.render();
    });

    var updateChart = function () {
    $.getJSON(“testdata.php”, function (result) {
    dps.splice(0, dps.length);
    $.each(result, function (index, value) {
    dps.push(value);
    });
    });

    chart.render();
    };

    setInterval(function(){updateChart()}, updateInterval);

    });

    </script>
    </head>
    <body>
    BODY
    <div id=”chartContainer” style=”width: 800px; height: 380px;”></div>

    </body>
    </html>

    =============================================================================================================
    DATA
    =============================================================================================================

    <?php

    header(‘Content-Type: application/json’);

    $con = mysqli_connect(“localhost”,”wp1″,”QPZBtAe7″,”wp1″);

    // 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 id,Laserschneider_Druckluft_Volumenstrom_Nm3h FROM blb ORDER BY id DESC LIMIT 500”);

    while($row = mysqli_fetch_array($result))
    {
    $point = array(“label” => $row[‘id’] , “y” => $row[‘Laserschneider_Druckluft_Volumenstrom_Nm3h’]);
    array_push($data_points, $point);
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
    }
    mysqli_close($con);

    #23824

    @gereby,

    The issue seems to be with the declaration of variables (chart), please refer this stackoverflow thread for more info on scope of a variable in JavaScript. Please take a look at this updated code.


    Vishwas R
    Team CanvasJS

Viewing 4 posts - 46 through 49 (of 49 total)

You must be logged in to reply to this topic.