このJSONデータをハイチャートに変換することに苦労しています

Question

JSON URLからデータを取り込んでMariaDBに入力する次のスニペットがあります。

今、私はそのデータをデータベースから取り出して（データベースがJSONを経時的に記録しているので）グラフに入れたいのですが、データをJSON URLからハイチャートに取り込むのが難しいです。 ...私のデータは次のようになります。

[{"time":"1509488314","hashrate":"34096322642","minersTotal":"99"}, 
{"time":"1509490093","hashrate":"34096645609","minersTotal":"101"}, 
{"time":"1509490201","hashrate":"34096374421","minersTotal":"101"}, 
{"time":"1509490321","hashrate":"34138925733","minersTotal":"101"}, 
{"time":"1509490441","hashrate":"34062086317","minersTotal":"101"}, 
{"time":"1509490561","hashrate":"34116887228","minersTotal":"101"}, 
{"time":"1509490681","hashrate":"34053449517","minersTotal":"103"}, 
{"time":"1509490801","hashrate":"34060600882","minersTotal":"103"}, 
{"time":"1509490921","hashrate":"34065888457","minersTotal":"103"}, 
{"time":"1509491041","hashrate":"34093378965","minersTotal":"105"}] 

私は基本的には、X軸全体に時間をプロットしたい、バーなどのラインやminersTotalとしてhashrate。

私はPHP/MariaDBビットを実行しましたが、この部分を実行することは私にとっては苦労しています。

私のPHPコード：

$mysqli = new mysqli($servername, $username, $password, $dbname); 
$myArray = array(); 
if ($result = $mysqli->query("SELECT * FROM hashrates LIMIT 100")) { 

    while($row = $result->fetch_object()) { 
      $myArray[] = $row; 
    } 
    echo json_encode($myArray); 
} 

$result->close(); 
$mysqli->close(); 

Answer 1

私はこの

$(function() { 
    var hashrates = new Array(); 
    var minersTotal = new Array(); 

    function refreshdata() { 
     $.getJSON("data.json", function(data) { 
      var hashrates = new Array(); 
      var minersTotal = new Array(); 
      for (i = 0; i < data.length; i++) { 
       var object = data[i]; 
       var time = object.time * 1000; 
       hashrates.push([time, parseFloat(object.hashrate)/1000000000]); 
       minersTotal.push([time, parseFloat(object.minersTotal)]); 
      } 
      $('#container').highcharts().series[0].setData(minersTotal, true); 
      $('#container').highcharts().series[1].setData(hashrates, true); 
      $('#container').highcharts().redraw(); 
     }); 
    } 

    $('#container').highcharts({ 
     chart: { 
      backgroundColor: "rgba(0,0,0,0)", 
      color: "#FF0000", 
      alignTicks: false, 
      events: { 
       load: function() { 
        setInterval(function() {refreshdata();}, 60000); 
       } 
      } 
     }, 
     title: { 
      text: "Pool performance" 
     }, 
     subtitle: { 
      text: "3 days (15 min intervals)" 
     }, 
     tooltip: { 
      shared: true, 
      valueDecimals: 2 
     }, 
     legend: { 
      layout: "horizontal" 
     }, 
     xAxis: { 
      title: { 
       text: "Time (UTC)" 
      }, 
      type: "datetime", 
      showFirstLabel: true 
     }, 
     yAxis: [{ 
      title: { 
       text: "Hashrate (GH/s)" 
      }, 
      labels: { 
       style: { 
        color: "#434348" 
       }, 
       formatter: function() { 
        return this.axis.defaultLabelFormatter.call(this).toString().substr(0,4); 
       } 
      }, 
      gridLineColor: "#434348", 
      tickInterval: 10, 
      min: 0 
     },{ 
      title: { 
       text: "Miners", 
       style: { 
        color: "#95CEFF" 
       }, 
      }, 
      labels: { 
       style: { 
        color: "#95CEFF" 
       } 
      }, 
      opposite: true, 
      tickInterval: 40, 
      gridLineColor: "#95CEFF" 
     }], 

     series: [{ 
      name: "Miners", 
      type: "spline", 
      data: minersTotal, 
      yAxis: 1 
     },{ 
      name: "Hashrate", 
      data: hashrates, 
      type: "spline" 
     }] 
    }); 
    refreshdata(); 
}); 

一緒に行くことになったことは、ここにアクションで見ることができます：https://metaverse.farm/

Answer 2

このdemo (Highcharts Demos › Dual axes, line and column)よります。データは、値の配列でなければなりません。例：["Item1", "Item2", "Item3"]。

データでは、Array#map()を使用できます。

var times = data.map(function(x) { 
    return new Date(x.time * 1000); 
}); 
var hashrates = data.map(function(x) { 
    return x.hashrate * 1; 
}); 
var minersTotals = data.map(function(x) { 
    return x.minersTotal * 1; 
}); 

あなたはこのような何かを行うことができます。

(function() { 
 
    var data = [{ 
 
     "time": "1509488314", 
 
     "hashrate": "34096322642", 
 
     "minersTotal": "99" 
 
    }, 
 
    { 
 
     "time": "1509490093", 
 
     "hashrate": "34096645609", 
 
     "minersTotal": "101" 
 
    }, 
 
    { 
 
     "time": "1509490201", 
 
     "hashrate": "34096374421", 
 
     "minersTotal": "101" 
 
    }, 
 
    { 
 
     "time": "1509490321", 
 
     "hashrate": "34138925733", 
 
     "minersTotal": "101" 
 
    }, 
 
    { 
 
     "time": "1509490441", 
 
     "hashrate": "34062086317", 
 
     "minersTotal": "101" 
 
    }, 
 
    { 
 
     "time": "1509490561", 
 
     "hashrate": "34116887228", 
 
     "minersTotal": "101" 
 
    }, 
 
    { 
 
     "time": "1509490681", 
 
     "hashrate": "34053449517", 
 
     "minersTotal": "103" 
 
    }, 
 
    { 
 
     "time": "1509490801", 
 
     "hashrate": "34060600882", 
 
     "minersTotal": "103" 
 
    }, 
 
    { 
 
     "time": "1509490921", 
 
     "hashrate": "34065888457", 
 
     "minersTotal": "103" 
 
    }, 
 
    { 
 
     "time": "1509491041", 
 
     "hashrate": "34093378965", 
 
     "minersTotal": "105" 
 
    } 
 
    ]; 
 
    var times = data.map(function(x) { 
 
    return new Date(x.time * 1000); 
 
    }); 
 
    var hashrates = data.map(function(x) { 
 
    return x.hashrate * 1; 
 
    }); 
 
    var minersTotals = data.map(function(x) { 
 
    return x.minersTotal * 1; 
 
    }); 
 

 
    Highcharts.chart("container", { 
 
    chart: { 
 
     zoomType: "xy" 
 
    }, 
 
    title: { 
 
     text: "Data" 
 
    }, 
 
    subtitle: { 
 
     text: "Subtitle" 
 
    }, 
 
    xAxis: [{ 
 
     categories: times, 
 
     crosshair: true 
 
    }], 
 
    yAxis: [{ // Primary yAxis. 
 
     labels: { 
 
     format: "{value}", 
 
     style: { 
 
      color: Highcharts.getOptions().colors[1] 
 
     } 
 
     }, 
 
     title: { 
 
     text: "Hashrate", 
 
     style: { 
 
      color: Highcharts.getOptions().colors[1] 
 
     } 
 
     } 
 
    }, { // Secondary yAxis. 
 
     title: { 
 
     text: "MinersTotal", 
 
     style: { 
 
      color: Highcharts.getOptions().colors[0] 
 
     } 
 
     }, 
 
     labels: { 
 
     format: "{value}", 
 
     style: { 
 
      color: Highcharts.getOptions().colors[0] 
 
     } 
 
     }, 
 
     opposite: true 
 
    }], 
 
    tooltip: { 
 
     shared: true 
 
    }, 
 
    legend: { 
 
     layout: "vertical", 
 
     align: "left", 
 
     x: 120, 
 
     verticalAlign: "top", 
 
     y: 100, 
 
     floating: true, 
 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF" 
 
    }, 
 
    series: [{ 
 
     name: "MinersTotal", 
 
     type: "column", 
 
     yAxis: 1, 
 
     data: minersTotals, 
 
     tooltip: { 
 
     valueSuffix: "" 
 
     } 
 
    }, { 
 
     name: "Hashrate", 
 
     type: "line", 
 
     data: hashrates, 
 
     tooltip: { 
 
     valueSuffix: "" 
 
     } 
 
    }] 
 
    }); 
 
})();

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

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

が、これはあなたのために働くなら、私に教えてください。