JSONデータからC3グラフの線グラフを作成するにはどうすればよいですか？

私は学校のプロジェクトに助けが必要です。私は、mySQLデータベースから配列にデータを引き出し、JSONにエンコードすることができました。これは問題なく表示されます。今、（同じページに可能であれば）チャートを作成するために、JSONデータをC3に渡す手助けが必要です。次の2つの別々の配列、データ用と日付のものを作成する必要がJSONデータからC3グラフの線グラフを作成するにはどうすればよいですか？

$strQuery = "SELECT production_date,oil FROM production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC"; 
$result = mysqli_query($conn, $strQuery); 

// Print out rows 
$data = array(); 
while ($row = $result->fetch_assoc()) { 
    $data[] = $row; 
} 
echo json_encode($data);

出典

2016-08-22 prinsobed

フル実施例でありますか？ –

日付に対して生産値をプロットする時系列（折れ線グラフ）。 – prinsobed

で、このリンクを見てください：私がこれまで何をやったか

あなたはx軸上に表示して、その配列をJavaスクリプトに渡したいと思っています。ここ

あなたは円グラフ、棒グラフなどを作成したいグラフのどのような

<?php 

$conn = mysqli_connect("localhost", "root", "", "test_db"); 

// Check connection 
if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 
$strQuery = "SELECT production_date,oil FROM production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC"; 
$result = mysqli_query($conn, $strQuery); 

// Print out rows 
$valuesArray = array(); 
$datesArray = array(); 

$valuesArray[] = 'Oil'; 
$datesArray[] = 'x'; 
while ($row = $result->fetch_assoc()) { 
    $datesArray[] = $row['production_date']; 
    $valuesArray[] = $row['oil']; 
} 
?> 


<html> 
    <head> 
     <title>C3 Liner example</title> 
     <link href="c3_scr/c3.css" rel="stylesheet" type="text/css" /> 
     <script src="https://d3js.org/d3.v3.min.js"></script> 
     <script src="c3_scr/c3.js"></script><!-- load jquery --> 


    </head> 
    <body> 
     <div id="chart"></div> 
     <script> 
      var xAxisArr = <?php echo json_encode($datesArray); ?>; 
      var dataArr = <?php echo json_encode($valuesArray, JSON_NUMERIC_CHECK); ?>; 
      var chart = c3.generate({ 
       bindto: '#chart', 
       data: { 
        x: 'x', 
        columns: [ 
         xAxisArr, 
         dataArr 
        ] 
       }, 
       axis: { 
        x: { 
         type: 'timeseries', 
         tick: { 
          format: '%Y-%m-%d' 
         } 
        } 
       } 
      }); 
     </script> 
    </body> 
</html>

出典

2016-08-23 07:43:09

私はあなたの応答に本当に感謝していますが、グラフは表示されていませんが、ポイントまで動いているようです。X軸とY軸を示しています.X軸は空ですが、Y軸は値の範囲を示しています Y：0と1 BTN ..私はそれが私のデータ値が1000と10000 – prinsobed

の間にあるため、問題がどこにあるので、私は導入だと思った{ 最大：10000、分：1000 } それは仕事をdidntの。 – prinsobed

y軸の範囲を指定する必要はありません。自動的に範囲を調整します。ブラウザを右クリックしてページソースを表示し、そのように見えるJavaスクリプトコードを確認します。 http://jsfiddle.net/8tybjfwm/2/ –

は、JSONの使用 http://c3js.org/samples/data_json.html

出典

2016-08-22 13:08:34

JSONデータからC3グラフの線グラフを作成するにはどうすればよいですか？

答えて

関連する問題