php mysqlを使って単日グラフを表示する方法

グラフ上にHighChartsとimを使用して温度を表示しています。ハイチャートグラフを使って、1日だけ、1週間以上、1ヶ月以上のデータを表示することが可能であると考えていました。今、私はすべてのデータを1番目のレコードからMySQL DBの最新データに変換します。ここにコードがあります。これはdata.phpある -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); 
?>

そして、これは、グラフデータが表示されるメインページのコードです -

<!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>

を右今、私は出力としてこれを取得 -

Output

出典

2016-04-12 Hannan Mustajab

してください[ 'mysql_ *'関数を使用して停止]（http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions- in-php）。 [これらの拡張機能]（http://php.net/manual/en/migration70.removed-exts-sapis.php）はPHP 7で削除されました。[prepared]（http://en.wikipedia.org/ [PDO]（http://php.net/manual/en/pdo.prepared-statements.php）および[MySQLi]（http://php.net/manual/en/mysqli.quickstart）のwiki/Prepared_statement）ステートメント.prepared-statements.php）、PDOの使用を検討してください。[これは本当に簡単です]（http://jayblanchard.net/demystifying_php_pdo.html）。 –

温度テーブルのテーブル構造を指定してください。 –

@AashuSpk。うん、確かに、ここにテーブルの構造 - http://prntscr.com/arhz13 –

Highcharts APIのsetExtremes（）メソッドを使用できます。あなたは最小値と最大値を提供するだけで、あなたのケースでは同じDate Objectで構成されていると思います。

Thisは、使用方法の例としてフィドルです。

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

ドキュメントはここにある：http://api.highcharts.com/highstock#Axis.setExtremes

出典

2016-04-12 20:54:23 theCodeSurgeon

あなたの返信ありがとう、しかし私はあなたを得るdidntそして私はあなたdidntが私を得ることを考える。！ –

グラフの斜面にカーソルを合わせると、気温だけが表示されます。日付と時刻ではありません。考えていますか？ –

ハイチャートに渡された一連のオブジェクトのデータを取得し、ツールヒントのダイナミックテキストをカスタマイズして、ツールヒントセクションでそれらを読み取ることができます。ここでフィドルhttp://jsfiddle.net/Mn6sB/9/ – theCodeSurgeon

php mysqlを使って単日グラフを表示する方法

答えて

関連する問題