2014-06-24 100 views
0

我想使用來自mysql的數據創建折線圖,並且生成的json看起來像這樣。如何使用來自mysql的數據創建折線圖

[{"date1":"2014-05-07","count":"1","name":"Aparna Giridhar"},{"date1":"2014-05-27","count":"1","name":"Aparna Giridhar"},{"date1":"2014-05-27","count":"2","name":"Yatish Bhargava"},{"date1":"2014-05-28","count":"3","name":"Yatish Bhargava"},{"date1":"2014-05-23","count":"2","name":"Natesh Bargi"},{"date1":"2014-05-28","count":"2","name":"Natesh Bargi"},{"date1":"2014-05-28","count":"3","name":"Divya Raghavan"},{"date1":"2014-05-30","count":"3","name":"Shreya P"},{"date1":"2014-05-07","count":"2","name":"Sharan Bains"},{"date1":"2014-05-09","count":"2","name":"Sharan Bains"},{"date1":"2014-05-16","count":"5","name":"Sharan Bains"},{"date1":"2014-05-28","count":"1","name":"Sharan Bains"},{"date1":"2014-05-30","count":"1","name":"Sharan Bains"},{"date1":"2014-05-26","count":"5","name":"Vergis Koshy"},{"date1":"2014-05-02","count":"1","name":""},{"date1":"2014-05-12","count":"2","name":""},{"date1":"2014-05-13","count":"5","name":""},{"date1":"2014-05-14","count":"1","name":""},{"date1":"2014-05-15","count":"1","name":""},{"date1":"2014-05-17","count":"1","name":""},{"date1":"2014-05-30","count":"2","name":"Deepti Karthik"}] 

在我的圖x軸我想日期,y軸作爲計數和行作爲名稱。

回答

1

你可以,如果你的數據進行編碼到PHP

編碼JSON與PHP服務器端與谷歌圖表做到這一點:

echo json_encode($data); 

解析JSON字符串本地JavaScript API對象「窗口。 JSON「在客戶端。 Browsersupport 1

window.JSON.parse(jsonData); 

tracker.php

<?php 
    $dbhost="localhost"; 
    $dblogin="root"; 
    $dbpwd=""; 
    $dbname="myDB"; 

    $db = mysql_connect($dbhost,$dblogin,$dbpwd); 
    mysql_select_db($dbname);  

    $day = date('d'); 
    $month = date('m'); 
    $lastMonth = (string)($month-1);  
    $lastMonth = strlen($month - 1) == 1? '0'.$lastMonth : $lastMonth; 

    $SQLString = "SELECT  
      count(analytics.day) as counts, 
      analytics.day, month, 
      date FROM analytics 
      WHERE year = '2012' AND month = '$month' 
      OR (month = '$lastMonth' and day > '$day') 
      GROUP BY day, month 
      ORDER BY date asc";  

    $result = mysql_query($SQLString);  
    $num = mysql_num_rows($result); 

# set heading 
    $data[0] = array('day','counts');  
    for ($i=1; $i<($num+1); $i++) 
    { 
     $data[$i] = array(substr(mysql_result($result, $i-1, "date"), 5, 5), 
      (int) mysql_result($result, $i-1, "counts")); 
    } 
    echo json_encode($data); 
    mysql_close($db); 
?> 

HTML

<html> 
<head> 
    <title>Kometschuh.de Tracker</title> 
    <!-- Load jQuery --> 
    <script language="javascript" type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> 
    </script> 
    <!-- Load Google JSAPI --> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", { packages: ["corechart"] }); 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
      var jsonData = $.ajax({ 
       url: "php/tracker.php", 
       dataType: "json", 
       async: false 
      }).responseText; 

      var obj = window.JSON.stringify(jsonData); 
      var data = google.visualization.arrayToDataTable(obj); 

      var options = { 
       title: 'Kometschuh.de Trackerdaten' 
      }; 

      var chart = new google.visualization.LineChart(
         document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 

    </script> 
</head> 
<body> 
    <div id="chart_div" style="width: 900px; height: 500px;"> 
    </div> 
</body> 
</html> 

Reference

+0

我得到錯誤@ VAR數據= google.visualization.arrayToDataTable(OBJ);不是數組.. – ammu

+0

你解析過JSON數據嗎? - 如果您讀取了「設置數組並返回的數據也必須表示該數組結構」的鏈接,請參閱第二個步驟 –

+0

。 ...在服務器端構建它' –

相關問題