dongyong8071
dongyong8071
2018-10-02 17:08

使用PHP生成Google功能图表来自MySQL的数据,但功能无法可视化

已采纳

I want to create a function chart from Google Charts with my data coming from a MySQL database (localhost). The program shows no error, that is conflicting with this topic, when compiling with a online markup language validator, though it still doesn't create the function chart when viewing in the browser. I checked my code and online sources, including multiple posts on this topic from this forum, but to no avail. The PHP code works for sure. The only thing i can think off straight away would be, that the JavaScript code is not loaded right.

The JavaScript part is a slightly modified version from sgoogle linechart (type function) sourcecode (https://developers.google.com/chart/interactive/docs/gallery/linechart).

Code:

<!Doctype html>
<html>
<body>
<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $database = "daylight";
    $conn = new mysqli($servername, $username, $password, $database);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
        $startdate=time()-(time()%(24*3600))-7200;
        $enddate=$startdate+365*24*3600;
        //echo $startdate."<br>".$enddate;
        $s=strftime("%Y-%m-%d", $startdate);
        $e=strftime("%Y-%m-%d", $enddate);

        $Off = 12;  //Offset
        $A = 4;     //Amplidute
        $light=0;

        for($i=$startdate; $i<=$enddate; $i+=$day)  //genData (works)
        {...}

        $sql_request = "SELECT * FROM `db` WHERE `Datum` >= '$s' And `Datum` <= '$e'";
        $daylight_array=array();
        $date_array=array();
        foreach($conn->query($sql_request) as $row)
        {
            $daylight_array[]=$row["Tageslicht"];
            $date_array[]=$row["Datum"];
            //print $row["Tageslicht"];
        }
        // echo json_encode($date_array);
        // echo json_encode($daylight_array);

?>
<div id="chart" style="width: 900px; height: 500px"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

    var date = <?php echo json_encode($date_array); ?>;
    var daylight = <?php echo json_encode($daylight_array); ?>;

    function drawChart() {
        var data = google.visualization.arrayToDataTable();
        data.addColumn('string', 'Jahr-Monat-Tag');
        data.addColumn('number', 'Sonnenstunden');

        for(i = 0; i < date.length; i++)
            data.addRow([date[i], daylight[i]]);

        var options = {

          title: 'Sonnenstunden über das Jahr',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

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

        chart.draw(data, options);
  }
</script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dr9379 dr9379 3年前

    I believe your method of initializing the DataTable is incorrect. As the docs say, arrayToDatatable creates and populates a DataTable using a single call. So instead, you should initialize the DataTable with something like this:

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

    Didn't have the time to try it out, but seems to be this way....

    If you insist on using the method you used, then provide the method with array of data as per documentation.

    点赞 评论 复制链接分享
  • donglusou3335 donglusou3335 3年前

    First, arrayToDataTable seems to require a parameter to be passed.

    var data = google.visualization.arrayToDataTable([]);
    

    Second, date and daylight are not the right type. They are currently string when they are needed to be arrays.

    var date = JSON.parse(<?php echo JSON.stringify($date_array); ?>);
    var daylight = JSON.parse(<?php echo JSON.stringify($daylight_array); ?>);
    

    After pushing those two updates it seems to work fine for me.

    点赞 评论 复制链接分享

相关推荐