Question

我已经做了很多搜索，找到了类似于我的问题的解决方案但到目前为止没有任何工作。任何帮助表示赞赏。

我正在尝试根据我从数据库查询的数据创建Google Line Chart，然后解析为JSON。我的查询和JSON看起来不错，但当我将其插入DataTable时，网页是空白的。

这是我的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]]

当我在https://jsonformatter.curiousconcept.com将其插入JSON Validator时，它表示它是有效的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);
?>

以下是创建Google折线图的页面。

 <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>

谢谢！

Answer 1

更新找到解决方案。

以下是代码：

<?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>

Answer 2

您需要在.ajax调用中提供一个成功函数，该函数将在数据返回时执行。任何需要数据的东西都应该放在这个函数中，或者从success函数中传递给另一个函数。您也可以在.ajax调用结束时使用.done（），并将其余的脚本放在那里。

将JSON数组解析为Google Charts DataTable

2 个答案: