Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/404.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何创建谷歌图表_Javascript_Php_Mysql_Charts_Google Visualization - Fatal编程技术网

Javascript 如何创建谷歌图表

Javascript 如何创建谷歌图表,javascript,php,mysql,charts,google-visualization,Javascript,Php,Mysql,Charts,Google Visualization,我想让谷歌图表基于我的mysql。在localhost中,一切正常。没有错误显示。而且它起作用了 但当我试图上传到我的服务器时,它什么也没有显示 这是我的代码: <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() {

我想让谷歌图表基于我的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>

load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
['日期','主要职位'],

连续使用
query
execute
会造成混乱,而且很可能是错误的-使用
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>
和一段伪数据

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


您能给我们看一条错误消息吗?请阅读关于如何询问SO的问题。没有错误消息。请隔离代码开始失败的地方。回显一些战略性设置的检查点。sql查询有
where month(date)
但是没有条件这样做-所以它总是正确的-这是预期的吗?
$views=$db->query
$views->execute();
?如果调用
execute(),我认为第一个应该是
$views=$db->prepare()
查看我的最后一条评论,请更新您的答案。我很感激您投入的时间/精力……我可能会在SELECT循环中而不是在php循环中修剪日期值。编辑得很好。它必须是datetime,因为substr
-9
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>