2016-04-12 36 views
0

kullanarak tek bir günde verilere ait verileri nasıl gösteririm Grafik üzerinde HighCharts ve im gösterme sıcaklığını kullanıyorum. Sadece bir gün için veya 1 hafta veya bir ay boyunca yüksek grafik grafik kullanarak verileri göstermek mümkün olduğunu düşünüyordum. Şu anda 1. kayıttan MySQL DB'den en son olana kadar olan tüm verileri alıyorum. İşte kod. bu data.php olduğunu -php mysql

<?php 
$con = mysql_connect("192.168.100.107:3306","root","hannan786"); 

if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db("pi", $con); 

$sth = mysql_query("SELECT * FROM temperature "); 
$rows = array(); 
$rows['Temperature'] = 'temperature'; 
while($r = mysql_fetch_array($sth)) { 
    $rows['data'][] = $r['temperature']; 
} 


$result = array(); 
array_push($result,$rows); 



print json_encode($result, JSON_NUMERIC_CHECK); 

mysql_close($con); 
?> 

Ve bu grafik veri görüntülenir ana sayfa kodudur -

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Refresh" Content="5"> 

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Temperature</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
$(function() { 
    var chart; 
    $(document).ready(function() { 
     $.getJSON("data.php", function(json) { 

      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container', 
        type: 'line', 
        marginRight: 130, 
        marginBottom: 25 
       }, 
       title: { 
        text: 'Temperature', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: ['Temperature'] 
       }, 
       yAxis: { 
        title: { 
         text: 'Amount' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +': '+ this.y; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -10, 
        y: 100, 
        borderWidth: 0 
       }, 
       series: json 
      }); 
     }); 

    }); 

}); 
     </script> 
    </head> 
    <body> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

    </body> 
</html> 

Right Now I çıkışı olarak bu olsun -

Output

+1

[ 'mysql_ *' işlevleri kullanarak durdurmak] Lütfen (http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions- içinde php). [Bu uzantılar] (http://php.net/manual/en/migration70.removed-exts-sapis.php) PHP 7'de kaldırılmıştır. [Hakkında] öğrenin (http://en.wikipedia.org/ wiki/Prepared_statement) [PDO] için ifadeler (http://php.net/manual/en/pdo.prepared-statements.php) ve [MySQLi] (http://php.net/manual/en/mysqli.quickstart .prepared-statements.php) ve PDO kullanmayı düşünün, [gerçekten çok kolay] (http://jayblanchard.net/demystifying_php_pdo.html). –

+0

Lütfen sıcaklık tablosu için masa yapısı sağlayın. –

+0

@AashuSpk. Evet Tabii, İşte tablo yapısı - http://prntscr.com/arhz13 –

cevap

0

Highcharts API'sının setExtremes() yöntemini kullanabilirsiniz. Sadece azami ve maksimum değer sağlamanız gerekir, sizin durumunuzda aynı Tarih Nesnesini içerir, bence.

This, nasıl kullanılacağı hakkında bir örnek niteliğindedir.

chart.xAxis[0].setExtremes(
    Date.UTC(2007, 0, 1), 
    Date.UTC(2007, 11, 31) 
); 

Dokümanlar Buradasınız: http://api.highcharts.com/highstock#Axis.setExtremes

+0

Cevabınız için teşekkürler, Ama ben seni almadım ve sanırım beni bile almadın. ! –

+0

Grafik eğiminin üzerine geldiğimde, sadece sıcaklığı alıyorum, Tarih ve Zaman değil, Herhangi bir fikrin var mı, Oraya nasıl gidebilirim. –

+1

, Highcharts'a geçirilen nesne serisindeki verileri alabilir ve araç ipucu dinamik metninizi özelleştirerek araç ipucu bölümünde okuyabilirsiniz. Fiddle burada http://jsfiddle.net/Mn6sB/9/ – theCodeSurgeon