Fatal编程技术网
  • javascript/
  • Javascript 将JSON数组解析为GoogleCharts数据表

Javascript 将JSON数组解析为GoogleCharts数据表

javascript php jquery json charts

Javascript 将JSON数组解析为GoogleCharts数据表,javascript,php,jquery,json,charts,Javascript,Php,Jquery,Json,Charts,我已经做了相当多的搜索，并找到了与我的问题类似的问题的解决方案，但迄今为止还没有找到有效的解决方案。感谢您的帮助 我试图从数据库中查询的数据创建一个Google折线图，然后解析为JSON。我的查询和JSON看起来不错，但当我将其插入DataTable时，web页面是空白的 这是我的JSON输出： [["date","percentage"],["0000-00-00 00:00:00",28.18],["2015-01-06 06:00:01",93.65],["2015-01-07 06:00

我已经做了相当多的搜索，并找到了与我的问题类似的问题的解决方案，但迄今为止还没有找到有效的解决方案。感谢您的帮助

我试图从数据库中查询的数据创建一个Google折线图，然后解析为JSON。我的查询和JSON看起来不错，但当我将其插入DataTable时，web页面是空白的

这是我的JSON输出：

[["date","percentage"],["0000-00-00 00:00:00",28.18],["2015-01-06 06:00:01",93.65],["2015-01-07 06:00:01",85.9],["2015-01-08 06:08:43",89.25],["2015-01-09 06:08:42",99.26],["2015-01-10 14:50:37",99.48],["2015-02-06 06:00:01",93.88],["2015-02-07 06:00:01",89.15],["2015-02-08 06:08:51",89.55],["2015-02-09 06:09:25",98.94],["2015-02-09 17:26:50",98.94],["2015-02-10 06:10:55",99.06],["2015-03-07 06:11:32",85.7],["2015-03-08 06:07:58",89.86],["2015-03-10 06:11:04",99.06],["2015-04-06 14:19:26",82.17],["2015-04-07 06:11:47",85.8],["2015-04-08 06:10:01",89.76],["2015-04-10 06:10:53",100],["2015-05-06 16:25:01",91.21],["2015-05-07 06:11:12",85.7],["2015-05-08 06:08:53",89.25],["2015-05-09 22:35:40",97.77],["2015-05-10 06:10:39",99.17],["2015-05-10 21:28:01",98.85],["2015-06-06 06:00:02",90.84],["2015-06-07 06:11:05",85.9],["2015-06-09 06:09:32",97.88],["2015-06-10 06:10:55",99.79],["2015-07-06 06:00:01",91.33],["2015-07-07 06:10:35",85.09],["2015-07-08 06:09:36",89.45],["2015-07-09 06:08:55",98.2],["2015-07-10 06:12:44",5.94],["2015-08-06 06:00:01",91.58],["2015-08-08 06:09:03",89.05],["2015-08-09 06:09:23",97.03],["2015-08-09 15:54:27",97.67],["2015-09-06 06:00:01",90.96],["2015-09-07 06:12:33",84.99],["2015-09-08 06:08:54",89.15],["2015-09-09 06:12:48",99.26],["2015-09-09 14:29:39",95.02],["2015-10-06 06:00:01",91.09],["2015-10-07 06:13:13",89.35],["2015-10-08 06:08:42",89.25],["2015-10-09 06:09:40",99.47],["2015-10-09 17:14:20",99.47],["2015-11-05 06:00:01",97.41],["2015-11-06 06:00:01",85.47],["2015-11-07 06:12:17",89.45],["2015-11-08 06:10:45",89.45],["2015-12-05 06:00:01",96.7],["2015-12-06 06:00:01",90.72],["2015-12-07 06:12:22",88.74],["2015-12-09 06:09:39",99.58]]
当我将其插入JSON验证器时，它表示它是有效的JSON，当我硬编码时，它似乎一切正常

这是我的密码：

  <?php
    $dbhost="localhost";
    $dblogin="root";
    $dbpwd="password!";
    $dbname="qaDB";

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


    $SQLString = "SELECT date, percentage FROM reports WHERE RTYPE_ID=1";       

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

# set heading   
    $data[0] = array('date','percentage');      
    for ($i=1; $i<($num+1); $i++)
    {
        $data[$i] = array(substr(mysql_result($result, $i-1, "date"), 0, 20),
            (float) mysql_result($result, $i-1, "percentage"));
    }   
    echo json_encode($data);
    mysql_close($db);
?>
这是创建谷歌折线图的页面

 <html>
    <head>
        <title>JSON Chart Test</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 newWin = window.open();
        var jsonData = $.ajax({
            url: "legacyDashboardJSON.php",
            dataType: "json",
            async: false
        }).responseText;


//var newStr = jsonData.substring(1, jsonData .length-1);
 //newWin.document.write(jsonData);
// var parsedData = JSON.parse(newStr);

//var obj = JSON.stringify(newStr);


var data = google.visualization.DataTable(jsonData);

var options = {
    title: 'Stats'
};

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

</script>
</head>
<body>
    <div id="chart_div">

    </div>
</body>
</html>


JSON图表测试
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
//var newWin=window.open（）；
var jsonData=$.ajax({
url:“legacyDashboardJSON.php”，
数据类型：“json”，
异步：false
}).responseText；
//var newStr=jsonData.substring（1，jsonData.length-1）；
//newWin.document.write（jsonData）；
//var parsedData=JSON.parse（newStr）；
//var obj=JSON.stringify（newStr）；
var data=google.visualization.DataTable（jsonData）；
变量选项={
标题：“统计”
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
谢谢

您需要在.ajax调用中提供一个success函数，该函数将在数据返回时执行。任何需要数据的东西都应该放在这个函数中，或者从success函数传递到另一个函数。您还可以在.ajax调用的末尾使用.done（），并将脚本的其余部分放在其中。

UPDATE找到了解决方案

代码如下：

<?php



$DB_NAME = 'qaDB';


$DB_HOST = 'localhost';


$DB_USER = 'root';
$DB_PASS = '!';





  $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }


  $result = $mysqli->query('SELECT date,percentage FROM reports');



  $rows = array();
  $table = array();
  $table['cols'] = array(


    array('label' => 'date', 'type' => 'string'),
    array('label' => 'percentage', 'type' => 'number')

);
    foreach($result as $r) {

      $temp = array();


      $temp[] = array('v' => (string) $r['date']); 


      $temp[] = array('v' => (int) $r['percentage']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

$jsonTable = json_encode($table);
echo $jsonTable;

mysql_close($mysqli);
?>

<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    function drawChart() {

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

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);
      var options = {
           title: 'Metrics',
          width: 800,
          height: 600
        };

      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>


//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“legacyDashboardJSON.php”，
数据类型：“json”，
异步：false
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
变量选项={
标题：“指标”，
宽度：800，
身高：600
};
//实例化并绘制图表，传入一些选项。
//别忘了检查你的部门ID
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
将答案作为答案发布并接受答案，这将有助于评论和其他用户。