Question

所有

我正在尝试使用Google Charts（折线图）并从MySQL db中检索信息。以下步骤

1＆GT;从MySQL db收集数据并以JSON格式编码输出（PHP） 2 - ;使用HTML文件来使用Google图表（从此HTML文件中调用php）

然而不知何故它不起作用（屏幕保持空白） - 希望有人可以提供帮助。

CHRS，杰罗姆

getData.php（是的，我现在需要使用MySQLI代替这些旧命令..： - ））

<?php
    //Sample Database Connection Syntax for PHP and MySQL.

    //Connect To Database
    $hostname="localhost";
    $username="xxxxxxx";
    $password="xxxxxxx";
    $dbname="xxxxxxxx";
    $usertable="xxxxxxxxxx";
    $yourfield0 = "FC";
    $yourfield1 = "devInfo1";
    $yourfield2 = "devInfo2";
    $yourfield3 = "srvTime";

    $con = mysql_connect($hostname,$username, $password);
    if (!$con) {
      die ("<html><script language='JavaScript'>alert('Unable to connect to database! Please try again later.'),history.go(-1)</script></html>");
    }

    mysql_select_db($dbname);

    # Check If Record Exists
    $query = "SELECT $yourfield0, $yourfield1, $yourfield2, $yourfield2 FROM $usertable ORDER BY Sensor.srvTime  ASC";
    $result = mysql_query($query);


    // *******

    $table = array();
    $table['cols'] = array(
        //Labels for the chart, these represent the column titles
        // array('id' => '', 'label' => 'FrameCount', 'type' => 'string'),
        // array('id' => '', 'label' => 'Temperature', 'type' => 'number')
        array('type' => 'string'),
        array('type' => 'number')
        ); 

    // *****************



    if($result)
    {
      while($row = mysql_fetch_array($result))
      {
        $temp = array();

        //Values
        $temp[] = array('v' => (string) $row[$yourfield0]);
        $temp[] = array('v' => (float) $row[$yourfield1]);
        $rows[] = array('c' => $temp);
      }
    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
    echo $jsonTable;

    //close the db connection & clean result
    mysql_close($con);
    mysql_free_result($result);
    return $jsonTable;

?>

JSON OUTPUT（来自PHP上方）

{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"8058"},{"v":26.4}]},{"c":[{"v":"8081"},{"v":26.5}]},{"c":[{"v":"8091"},{"v":26.5}]},{"c":[{"v":"8092"},{"v":26.5}]},{"c":[{"v":"8094"},{"v":26.5}]},{"c":[{"v":"8096"},{"v":26.5}]}]}

Google Line Charts

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

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

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table. Here it is retrieved from the getData.php 
        // getData.php returns the data and it is storedx in jsonData.

        var jsonData = $.ajax({
        url: "getData.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: 'Sensor Information',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);      
      }
    </script>
  </head>

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

谷歌图表/使用PHP从MySQL数据库收集数据

0 个答案: