2016-07-09 8 views
0

i Live-Daten aus MySQL-Datenbank abrufen bin versucht, und es mit highcharts zeigen aber etwas scheint falsch zu sein, weil alles, was ich bekommen ein leeres Diagramm istLive-Daten mit highcharts

hier ist mein Code

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Live Messages</title> 
 
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
     <script src="//code.highcharts.com/highcharts.js"></script> 
 
     
 
     <script> 
 
      var chart; 
 
      var dataSource = 'http://localhost/live/data.php?format=json'; 
 
      
 
      function requestData() { 
 
       $.ajax({ 
 
        url: dataSource, 
 
        success: function(points) { 
 
       
 
         chart.series[0].setData(
 
          points, 
 
          true 
 
         ); 
 
      
 
         // refresh after X miliseconds 
 
         setTimeout(requestData, 1000);  
 
        }, 
 
        cache: false 
 
       }); 
 
      } 
 
      
 

 
     
 
      $(document).ready(function() { 
 
      
 
        //add our div for the chart 
 
        $("#container").append("<div id=chart-trend></div>"); 
 
        
 
        chart = new Highcharts.Chart({ 
 
         chart: { 
 
          renderTo: 'chart-trend', 
 
          defaultSeriesType: 'spline', 
 
          events: { 
 
           load: requestData() 
 
          }, 
 
          animation: { 
 
           duration:1000 
 
          } 
 
         }, 
 
         title: { 
 
          text: 'temperateur' 
 
         }, 
 
         subtitle: { 
 
          text: 'past 24 hours' 
 
         }, 
 
         xAxis: { 
 
          type: 'datetime', 
 
          title: { 
 
           text: 'date' 
 
          } 
 
         }, 
 
         yAxis: { 
 
          title: { 
 
           text: 'temp', 
 
           margin: 10 
 
          } 
 
         }, 
 
         series: [{ 
 
          showInLegend: false, 
 
          data: [], 
 
          // pointInterval: 3600*1000/minute 
 
         }] 
 
        }); //end chart    
 
       
 
      }); //end document.ready 
 
      
 
      
 
      
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="container"></div> 
 
    </body> 
 
</html>

und hier ist die Datenbankverbindung

<?php 
 

 

 
/* 
 
    Get data from the mysql database and return it in json format 
 
*/ 
 
    
 
    
 
//setup global vars 
 

 
$format = $_GET['format']; 
 

 
if($format=='json'){ 
 
    header("Content-type: text/json"); 
 
} 
 

 
$db = new mysqli('localhost', 'root', '', 'hicharts', 3306); 
 

 
if (mysqli_connect_error()) { 
 
    die('Connect Error (' . mysqli_connect_errno() . ') ' 
 
      . mysqli_connect_error()); 
 
} 
 

 

 
// get data 
 
$sql = "select dat,temp from temperateur"; 
 
    
 

 
if ($result = $db->query($sql)) { 
 

 

 
    // $row = mysqli_fetch_array($result, MYSQLI_NUM); 
 
    
 
    while($row = $result->fetch_array()){ 
 
     $rows[] = $row; 
 
    } 
 
    
 
    foreach($rows as $row){ 
 
     
 
     $datetime = strtotime($row['dat'])*1000; 
 
    
 
     $temp = (int)$row['temp']; 
 
     
 
     $data[] = array($datetime, $temp); 
 
    } 
 
    
 
    echo(json_encode($data)); 
 
    
 
    $result->close(); 
 

 
} else { 
 
    echo "Error: " . $sql . "<br>" . $db->error; 
 
} 
 

 
$db->close(); 
 
?>

jede Hilfe

Antwort

0

ich, dass Ihre PHP-Funktionen arbeiten gehe davon aus und bekommen die Daten, die Sie von dem Front-End wollen.

Zuerst entfernen Sie () bei events: {load: requestData()}. Es sollte events: {load: requestData} sein.

Zweitens wird requestData() beim Instanziieren von Highcharts aufgerufen. Zur gleichen Zeit setzen Sie chart.series[0].setData(points, true); in requestData() Funktion, aber Sie können das nicht tun, ohne zuerst das Objekt chart zu erstellen.

Try this:

if (typeof chart !== 'undefined') { 
    chart.series[0].setData(points,true); 
} 

Sie können dies überprüfen https://jsfiddle.net/kwqjv5b6/