CODEWITHSUNDEEP
phphtml
Haduk
Haduk

Reputation: 1

How to get data from a DB(MySQL) and draw real-time graphs from a highcharts

I'm going to use the real-time temperature values stored in MariaDB server to show real-time graphs on the web. (Temperature values continue to accumulate in real time once every 5 seconds.)

Through a lot of trial and error, I decided that Highcharts.js would be the best tool for drawing graphs.

https://www.highcharts.com/stock/demo/dynamic-update

The link above is the demo source I used.

What I've been trying to do in the most I've been putting a lot of things into the bar y.

I tried various things in the data.push of series.

(I'm a beginner on coding......)

I didn't know what I typed wrong, so I entered everything. I'm sorry.


<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script type="text/javascript"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>


  <script>

 Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {

       var series = this.series[0];



setInterval(function() {


                 $(document).ready(function() {
                 var url = "https://---include json---.php";
                $.getJSON(url, function(json) {
                    var val= json;
                    var temp1=(json['temp'][(Object.keys(json['temp']).length)-1]['temp1']); 
                    console.log(json['temp'][(Object.keys(json['temp']).length)-1]['temp1']);
                    })});


          var x = (new Date()).getTime() // current time
          var y = temp1;

           Math.round(Math.random() * 100);
          series.addPoint([x, y], true, true);//연속
        }, 1000);
      }
    }
  },



  time: {
    useUTC: false
  },

  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'TEST test'
  },

  exporting: {
    enabled: true
  },
  credits:{
    enabled:false
  },


  series: [
  {
    name: 'Random data',
    data: (function() {     



      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        y;      
      for (i = -999; i <= 0; i += 1) {

          data.push([
          //time + i * 1000, 
          //Math.round(Math.random() * 100)
        ]);
      }
      return data;
    }())
  }]


});


  </script>

The following php code is the php code for json data.


<?php

//Creating Array for JSON response
$response = array();

$servername = "localhost";
$username = "";
$password = "!";
$dbname = "";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
   die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM temp2 order by id asc";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
$response["temp"] = array();
while($row = mysqli_fetch_array($result)) {
$temp = array();      
$temp["temp1"] = $row["temp1"];
array_push($response["temp"], $temp);
          }
      echo json_encode($response,JSON_NUMERIC_CHECK);
} else {
    echo json_encode("0 results",JSON_NUMERIC_CHECK);
}

mysqli_close($conn);



?>

The above code values are output as shown below.

{"temp":[
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.82},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},  
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":18.05},{"temp1":17.93},{"temp1":17.82},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93},{"temp1":17.93},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.82},{"temp1":18.05},{"temp1":17.93},{"temp1":17.93},
  {"temp1":17.93}
]}

If you run the code, the graph won't appear on the screen.

I don't know how to print out json's value on the graph.

I translated it using Google translation because I am not good at English. I would like to thank you all for your reply.

Upvotes: 0

Views: 867

Answers (3)

Marcus
Marcus

Reputation: 1930

First of all: Wellcome to SO :)

I think you have the wrong Dataformat for your Data. You have a Array of Objects

[{"temp1":17.93},....]

But the example say:

data.push([
    time + i * 1000,
    Math.round(Math.random() * 100)
]);

An Array of Array. Try this:

<?php
    //Creating Array for JSON response
    $response = array();

    $servername = "localhost";
    $username = "";
    $password = "!";
    $dbname = "";

    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    // Check connection
    if (!$conn) {
       die("Connection failed: " . mysqli_connect_error());
    }

    $sql = "SELECT * FROM temp2 order by id asc";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        $response["temp"] = array();
        while($row = mysqli_fetch_array($result)) {
            $response["temp"][] = array("temp1", $row["temp1"]);  // <-- change this line
        }
        echo json_encode($response,JSON_NUMERIC_CHECK);
    } else {
        echo json_encode("0 results",JSON_NUMERIC_CHECK);
    }

    mysqli_close($conn);
?>

Upvotes: 0

Sorabh
Sorabh

Reputation: 15

You can use chart.js library. Simple and powerful https://www.chartjs.org

Here are some example how to use: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

Upvotes: 0

Savas YILDIRIM
Savas YILDIRIM

Reputation: 41

Add a content type to the header:

<?php 
header("Content-type: application/json; charset=utf-8");

Upvotes: 2

Related Questions