Mysql
 sql >> डेटाबेस >  >> RDS >> Mysql

हाईचार्ट्स के साथ mysql डेटाबेस से लाइन चार्ट में डायनेमिक डेटा जोड़ें

मुझे लगता है कि आपके पास ग्राफ में कई श्रृंखलाएं हैं जहां बैकएंड प्रति श्रृंखला प्रति समय एक बिंदु प्रदान करता है।

सादगी के लिए मैं आपको मिलीसेकंड में समय लौटाने का सुझाव देता हूं। मैं PHP में बहुत मजबूत नहीं हूँ लेकिन मुझे लगता है कि बात स्पष्ट है

<?php

header("Content-type: text/json");


 include_once 'include/connection.php';
 $db = new DB_Class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." ORDER BY datetime DESC limit 0,1 ";

        $serie = new StdClass;
        $serie->name = $row['0'];
        $result1 = mysql_query($SQL1);

        $points = array();
        while ($rows = mysql_fetch_array($result1)) {
           $points[] = array(strtotime($rows['0']) * 1000, $rows['1']);
        }

        $serie->data = $points;
        $series[] = $serie;
     }


// Create a PHP array and echo it as JSON
$ret = $series;
echo json_encode($ret);
?>

क्लाइंट-साइड कोड होगा:

var chart;
var chartSeries = {};
var latestTimeReported = {};

function requestData() {

  $.ajax({
    url: 'live-server-data.php',
    success: function(seriesUpdate) {

      //in case initializer of highcharts is too quick - skip the update
      if (!chart) {
        setTimeout(requestData, 1000);
        return;
      }

      $.each(seriesUpdate, function (serieIndex, serieUpdate) {
        var existingSerie = chartSeries[serieUpdate.name];
        var newPoint = serieUpdate.data[0];
        var lastInsertedTime = latestTimeReported[serieUpdate.name];          

        if (lastInsertedTime  && lastInsertedTime < newPoint[0]) {
          console.log('Attempt inserting old data!!!!');
          return;
        }

        latestTimeReported[serieUpdate.name] = newPoint[0];

        if (existingSerie) {
          var shift = existingSerie.data.length > 20;
          existingSerie.addPoint(newPoint , true, shift);
        } else {
          var newSerie = chart.addSeries({                        
            name: serieUpdate.name,
            data: serieUpdate.data
          }, true);
          chartSeries[serieUpdate.name] = newSerie;
        }

      });

      // call it again after one second
      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: []
    });

आप यहां नया अद्यतन उदाहरण देख सकते हैंhttp://plnkr.co/edit/OqMofEGDadF9J3Uit8qD



  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. mysql IP पतों का रिवर्स रिज़ॉल्यूशन कैसे करता है?

  2. समूहीकृत MySQL डेटा से नवीनतम तिथि प्राप्त करें

  3. एक प्रक्रिया बनाते समय त्रुटि mysql CRUD

  4. MySQL रिकॉर्ड जो TTL के अधीन होगा

  5. SSH सुरंग पर MySQL कनेक्शन