0

いくつかのデータを適切な JSON 形式に整理して、HighCharts グラフにプロットできるようにするために、数日間頭を悩ませてきました。

私の計画は、jQuery 関数を実行して、MySQL データベースから気象データのいくつかの列を取得する PHP スクリプトを呼び出すことです。JavaScript 側でデータを再編成することはできますが、すべてのデータ編成を PHP で行ってから、単一の正しい JSON 構造を HighCharts エンジンに入れることをお勧めします。

私は気象データを見ているので、毎分サンプリングされたデータの列がいくつかあります。MySQL から取得しているデータ列は次のとおりです。これらの各列を独自の配列に入力しました。

データを次の JSON/配列形式に操作するために必要な PHP ロジックに頭を悩ませているようには見えません。

[
  [
    [JSTimestamp1, avgOutdoorTemperature1],
    [JSTimestamp2, avgOutdoorTemperature2],
    [JSTimestamp3, avgOutdoorTemperature3],
    [JSTimestampN, avgOutdoorTemperatureN]
  ],
  [
    [JSTimestamp1, avgIndoorTemperature1],
    [JSTimestamp2, avgIndoorTemperature2],
    [JSTimestamp3, avgIndoorTemperature3],
    [JSTimestampN, avgIndoorTemperatureN]
  ],
  [
    [JSTimestamp1, avgOutdoorHumidity1],
    [JSTimestamp2, avgOutdoorHumidity2],
    [JSTimestamp3, avgOutdoorHumidity3],
    [JSTimestampN, avgOutdoorHumidityN]
  ],
  [
    [JSTimestamp1, avgIndoorHumidity1],
    [JSTimestamp2, avgIndoorHumidity2],
    [JSTimestamp3, avgIndoorHumidity3],
    [JSTimestampN, avgIndoorHumidityN]
  ]
]

上記の構造にダミー データを入力すると、HighCharts で美しくプロットされます。グラフがどのように表示されるかを示すサンプル デモを次に示します: http://highcharts.com/jsbin/afutef/11/edit#javascript,live

私の現在のコードは次のとおりです。

<?php

include_once('./include/mysqldatabase.php');
include_once('./include/mysqlresultset.php');

date_default_timezone_set('America/New_York');

$MYSQL_HOST = 'ip_address';
$MYSQL_USER = 'username';
$MYSQL_PASS = 'password';
$MYSQL_NAME = 'weatherdata';

$db = MySqlDatabase::getInstance();
try {
    $conn = $db->connect($MYSQL_HOST, $MYSQL_USER, $MYSQL_PASS, $MYSQL_NAME);
}
catch (Exception $e) {
    die($e->getMessage());
}

$query = "
    select
        RecDate,
        unix_timestamp(RecDateTime)*1000 as JSTime,
        avgOutdoorTemperature,
        avgIndoorTemperature,
        avgOutdoorHumidity,
        avgIndoorHumidity
    from `rollup-minute-60`
    where 
        RecDate > 201301010000
    ";

$timeArray = array();
$avgOutdoorTemperatureArray = array();
$avgIndoorTemperatureArray = array();
$combinedArray = array();
$i = 0;

$seriesNames = array('Average Outdoor Temperature','Average Indoor Temperature', 'Average Outdoor Humidity', 'Average Indoor Humidity');

foreach ($db->iterate($query) as $r) {
    $jstime = $r->JSTime;
    $avgOutdoorTemperature = $r->avgOutdoorTemperature;
    $avgIndoorTemperature = $r->avgIndoorTemperature;
    $avgOutdoorHumidity = $r->avgOutdoorHumidity;
    $avgIndoorHumidity = $r->avgIndoorHumidity;

    $timeArray[$i] = (float)$jstime;
    $avgOutdoorTemperatureArray[$i] = (float)$avgOutdoorTemperature;
    $avgIndoorTemperatureArray[$i] = (float)$avgIndoorTemperature;
    $avgOutdoorHumidityArray[$i] = (float)$avgOutdoorHumidity;
    $avgIndoorHumidityArray[$i] = (float)$avgIndoorHumidity;    

    $combinedArray[$i] = array((float)$avgOutdoorTemperature, (float)$avgIndoorTemperature, (float)$avgOutdoorHumidity, (float)$avgIndoorHumidity);

    $i++;
}

echo "Combined array:<br>";
echo json_encode($combinedArray);
echo "<br><br><br>";

echo "Time array:<br>";
echo json_encode($timeArray);
echo "<br><br><br>";

$arraySize = sizeof($timeArray);
$seriesNameSize = sizeof($seriesNames);
$outputJSONArray = array();
$tempArray = array();

for ($i=0; $i<$seriesNameSize; $i++) {

    for ($j=0; $j<$arraySize; $j++) {
        $tempArray = array();

        array_push($tempArray, $timeArray[$j], $combinedArray[$j][$i]);
        echo "i=".$i.", j=".$j.", tempArray: " . json_encode($tempArray) ."<br>";

        $outputJSONArray[$i] = $tempArray;

     } 
}

echo json_encode($outputJSONArray);

?>

上記の現在のコードでは、出力配列は、多次元構造ではなく $outputJSONArray の最後の要素のみを表示しています。

誰かが私を正しい方向に向けるのを手伝ってくれますか? このサイトには、始めるのに役立つ有益な情報がたくさんありますが、最後のハードルを乗り越えるには少し助けが必要です。

ありがとうございました！

4

2 に答える 2

1

Highcharts の FAQ を確認してください: http://docs.highcharts.com/#preprocessing-data-from-a-database 2 番目の例では、これを行う方法を説明しています。

<?php
while ($row = mysql_fetch_array($result)) {
   extract $row;
   $datetime *= 1000; // convert from Unix timestamp to JavaScript time
   $data[] = "[$datetime, $value]";
}
?>
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container'
      },
      series: [{
         data: [<?php echo join($data, ',') ?>]
      }]
});
于 2013-02-18T11:46:59.063 に答える
0

Paweł さん、返信ありがとうございます。私はあなたが投稿した例で作業しており、単一の時系列についてよく理解しています。ただし、複数のシリーズの適切なフォーマットには混乱が生じます。

PHP 側でデータを操作して正しい形式のデータを取得するのに苦労しました。

[
  [
    [time1, y1],
    [time2, y2],
    [time3, y3]
  ]
  [
    [time1, z1],
    [time2, z2],
    [time3, z3]
  ]
  [
    ...
  ]
]

しかし、今日の早い段階でいろいろと試してみて、最終的にホワイトボードに解決策を描いた後、機能するように見える解決策を見つけ、収集したデータ配列をシリーズごとに 1 回トラバースする必要がありました。最適ではないかもしれませんが、私がテストした数千のポイントではうまく機能します。参照用の私のコードは次のとおりです。

$seriesNames = array('Average Outdoor Temperature','Average Indoor Temperature');

foreach ($db->iterate($query) as $r) {
    $time = (float)$r->RecDateTime;
    $jstime = (float)($r->Timestamp*1000);
    $avgOutdoorTemperature = (float)$r->avgOutdoorTemperature;
    $avgIndoorTemperature = (float)$r->avgIndoorTemperature;

    $dataArray[] = array(array($jstime, $avgOutdoorTemperature), array($jstime, $avgIndoorTemperature));
}

$arraySize = sizeof($dataArray);
$seriesNameSize = sizeof($seriesNames);

for ($i=0; $i<$seriesNameSize; $i++) {
    $tempArray = array();
        for ($j=0; $j<$arraySize; $j++) {
            $tempArray[] = $dataArray[$j][$i];  
        } 
    $outputJSONArray[] = $tempArray;
}

echo json_encode($outputJSONArray);

複数のクエリを実行し、各シリーズを手動で追加することもできたと思いますが、最終的に使用する予定のクエリはかなり集中的で、1 回だけ呼び出すことを好みます。

于 2013-02-19T01:47:48.393 に答える