如何创建谷歌图表

时间:2018-01-18 09:20:45

标签: javascript php mysql charts google-visualization

我想基于我的mysql制作谷歌图表。在localhost一切都好。没有错误显示。它有效。

但是当我尝试上传到我的服务器时它什么也没显示。

这里是我的代码:

    <script>
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
           ['Date', 'Master Posts'],
<?php
$views = $db->query("SELECT date, COUNT(id_master_post) FROM master_post GROUP BY DAY(date) ASC");
$views->execute();
while ($value2 = $views->fetch()) { 
echo "['".substr($value2['date'], 0, -9)."',".$value2['COUNT(id_master_post)']."],";
} ?>
        ]);

        var options = {
          title: 'Master Posts Created',
        };

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

        chart.draw(data, options);
      }
    </script>
  <body>
    <div id="Views" style="width: 500px; height: 500px; float: left;"></div>
  </body>

当我尝试从phpmyadmin在sql中运行SELECT date, COUNT(id_master_post) FROM master_post GROUP BY DAY(date) ASC时。给我一些错误。

  

SELECT日期,COUNT(id_master_post)FROM master_post GROUP BY DAY(日期)   ASC LIMIT 0,25 MySQL menyatakan:Dokumentasi

     

'#1055 - SELECT列表的表达式#1不在GROUP BY子句中,并且包含非聚合列'piratefiles.master_post.date',它是   在功能上不依赖于GROUP BY子句中的列;这是   与sql_mode = only_full_group_by

不兼容

1 个答案:

答案 0 :(得分:1)

连续使用queryexecute令人困惑,而且可能是错误的 - execute方法用于执行预准备语句,但您没有创建这样的预准备语句。我开始只是格式化你的代码,所以我可以通过它来查看我是否可以识别错误并最终得到以下可能或可能不会使用。我发表评论以帮助一点。

<?php

    /* column headers for chart datatable */
    $payload=array( "['Date', 'Post']" );

    /* create sql and prepare statement */
    $sql='select `date`, count(`idpv`) as `count` from `pageview` group by day( `date` ) desc';
    $stmt=$db->prepare( $sql );

    if( $stmt ){
        /* execute sql statement */
        $result=$stmt->execute();
        $stmt->store_result();

        /* If there are results, process recordset */
        if( $result && $stmt->num_rows > 0 ){

            /*  bind results */

            $stmt->bind_result( $date, $count );

            /* fetch recordset */
            while ( $stmt->fetch() ) {

                $date=substr( $date, 0, -9 );
                $payload[]="[ '$date', $count ]";

            }
            $stmt->free_result();
            $stmt->close();
        }       
    }
    $db->close();

    /* 
        if there were no results this will only have column headers for datatable 
        this will be used by javascript function
    */
    $srcdata='['.implode( ',', $payload ).']';
?>

<html>
    <head>
        <meta charset='utf-8' />
        <title>Google charts & mysqli</title>
        <!--

            assumed here that the required google api scripts have been loaded

        -->
        <script>
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback( drawChart );

            function drawChart() {
                /* 
                    echo the source data as a javascript variable before using in datatable
                */
                var srcdata=<?php echo $srcdata; ?>

                if( srcdata.length > 1 ){
                    /* 
                        There are more than just headers in src data array
                        so add to datatable and create chart
                    */
                    var data = google.visualization.arrayToDataTable( srcdata );

                    var options = {
                      title: 'Page Views'
                    };

                    var chart = new google.visualization.PieChart( document.getElementById('Views') );
                    chart.draw( data, options );
                }
            }
        </script>
    </head>
    <body>
        <div id="Views" style="width: 500px; height: 500px; float: left;"></div>
    </body>
</html>

经过测试的演示,基于pageview表的基本模拟,插入了一些随机示例数据。

mysql> describe pageview;
+-------+--------------+------+-----+---------+-------+
| Field | Type         | Null | Key | Default | Extra |
+-------+--------------+------+-----+---------+-------+
| date  | datetime     | NO   |     | NULL    |       |
| idpv  | mediumint(9) | NO   |     | 0       |       |
+-------+--------------+------+-----+---------+-------+

和虚拟数据的片段

mysql> select * from pageview limit 10;
+---------------------+------+
| date                | idpv |
+---------------------+------+
| 2015-01-11 00:00:00 |   54 |
| 2015-01-17 00:00:00 |   55 |
| 2015-01-20 00:00:00 |  121 |
| 2015-02-07 00:00:00 |   42 |
| 2015-03-08 00:00:00 |   57 |
| 2015-03-09 00:00:00 |  122 |
| 2015-04-01 00:00:00 |    5 |
| 2015-04-12 00:00:00 |   39 |
| 2015-04-19 00:00:00 |   98 |
| 2015-04-20 00:00:00 |   90 |
+---------------------+------+

-

<?php

    include __DIR__ . '/db.php'; #pertinent to my system!


    /* column headers for chart datatable */
    $payload=array( "['Date', 'Post']" );

    /* create sql and prepare statement */
    $sql='select 
            `date`, 
            count(`idpv`) as `count` 
            from `pageview` 
            group by day( `date` )
            order by date( `date` ) desc';

    $stmt=$db->prepare( $sql );
    if( $stmt ){
        /* execute sql statement */
        $result=$stmt->execute();
        $stmt->store_result();
        /* If there are results, process recordset */
        if( $result && $stmt->num_rows > 0 ){

            /* store and bind results */

            $stmt->bind_result( $date, $count );

            /* fetch recordset */
            while ( $stmt->fetch() ) {
                $payload[]="[ '$date', $count ]";
            }
            $stmt->free_result();
            $stmt->close();
        }       
    }
    $db->close();

    /* 
        if there were no results this will only have column headers for datatable 
        this will be used by javascript function
    */
    $srcdata='['.implode( ',', $payload ).']';

?>

<html>
    <head>
        <meta charset='utf-8' />
        <title>Google charts & mysqli</title>
        <!--

            assumed here that the required google api scripts have been loaded

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

            function drawChart() {
                /* 
                    echo the source data as a javascript variable before using in datatable
                */
                var srcdata=<?php echo $srcdata; ?>

                if( srcdata.length > 1 ){
                    /* 
                        There are more than just headers in src data array
                        so add to datatable and create chart
                    */
                    var data = google.visualization.arrayToDataTable( srcdata );

                    var options = {
                      title: 'Page Views'
                    };

                    var chart = new google.visualization.PieChart( document.getElementById('Views') );
                    chart.draw( data, options );
                }
            }
        </script>
    </head>
    <body>
        <div id="Views" style="width: 500px; height: 500px; float: left;"></div>
    </body>
</html>

enter image description here