动态谷歌折线图不显示与php和Javascript

o75abkj4 于 2023-01-24 发布在 PHP

关注(0)|答案(1)|浏览(155)

我用google charts在我本地托管的网页上显示一个线形图，我用mysqli从phpmyadmin数据库中提取数据，然后将其回显到javascript的行空间中。
这是我的html主体中的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

    function drawBasic() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Speed');

        data.addRows([                
            <?php 
            $sql = "SELECT id_rides, speed, date_completed FROM rides_done WHERE (id_users = $_SESSION[id])";
            $result = mysqli_query($link, $sql);
            while($row = mysqli_fetch_assoc($result)) {
                $date = $row['date_completed'];
                $speed = floatval($row['speed']);
                echo "['".$date."', ".$speed."],";
            }
            ?>
        ]);

        var options = {
            hAxis: {
            title: 'Ride date'
            },
            vAxis: {
            title: 'Average speed'
            }
        };

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

        chart.draw(data, options);
    }

</script>

问题是网页上没有显示任何内容。
我知道这个查询可以正常工作，因为我在javascript之外自己尝试了这个查询，输出如下：results of sql query
在我添加图表的动态元素之前，它可以很好地处理随机的数据列表。
我希望看到一个折线图，y轴上有“平均速度”，x轴上有“骑行日期”，有7个数据点，但没有显示任何内容。
看来js对这里的数据类型很有讲究，所以我想知道这是否与下面的行有关-这两行我都一直在摆弄，但没有用。

echo "['".$date."', ".$speed."],";

data.addColumn('string', 'Date');
data.addColumn('number', 'Speed');

非常感谢。所有的建议和想法都是非常欢迎的。很明显，我对Javascript非常陌生，所以很可能会犯一些愚蠢的错误。

php

来源：https://stackoverflow.com/questions/75194161/dynamic-google-line-chart-not-showing-up-with-php-and-javascript

1条答案

按热度按时间

fjaof16o1#

我想说的几件事：由于您似乎希望在dataTable中使用日期，因此将其设置为date类型列可能会更好，并使用new Date(str)将数据库查询中的值转换为日期。我还建议您在运行数据库查询后使用json_encode来创建JSON对象，而不是像上面那样手动构建字符串-这种方法的一个缺点是后面的逗号可能会导致问题。
我使用我的数据库中的伪数据拼凑了一个工作演示来模拟您在这里尝试做的事情。SQL查询使用别名来获取任意数据，并按照您的操作命名它，因此Javascript基本保持不变。
使用JSON数据，可以很容易地使用Object.keys( json ).forEach()类型结构迭代Object（如果这对您来说是新的，我向您道歉）

<?php

    #add a db connection
    chdir('../../dbo');
    require 'db-conn-details.php';
    require 'mysqli-conn.php';
    
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <script src='//www.gstatic.com/charts/loader.js'></script>
        <script></script>
        <title>Google charts.....</title>
        <style>
            #chart_div{
                width:800px;height:600px
            }
        </style>
    </head>
    <body>
        <div id='chart_div'></div>
        
        <script>
            <?php
            
                $sql = 'SELECT `speed`, `date_completed` FROM `rides_done` WHERE ( `id_users` = $_SESSION[id] )';
                $sql = 'select `dr` as `speed`, date(`lasteditdate`) as `date_completed` from `testtable` limit 20'; # example sql...
                
                $result = $link->query( $sql );
                $json = json_encode( $result->fetch_all( MYSQLI_ASSOC ) );
                printf('const json=%s;', $json );
            ?>
        
        
            google.charts.load('current', { packages: ['corechart'] } );
            google.charts.setOnLoadCallback( drawBasic );
        
            function drawBasic() {
                var data = new google.visualization.DataTable();
                    data.addColumn('date', 'Date');
                    data.addColumn('number', 'Speed');
        
                Object.keys( json ).forEach( key=>{
                    let obj=json[ key ];
                    data.addRow( [ new Date( obj.date_completed ), parseFloat( obj.speed ) ] );
                })
        
                var options = {
                    hAxis: {
                        title: 'Ride date'
                    },
                    vAxis: {
                        title: 'Average speed'
                    }
                };
        
                var chart = new google.visualization.LineChart( document.getElementById('chart_div') );
                    chart.draw( data, options );
            }
            
            
        </script>
    </body>
</html>

上面的图表如下：

赞(0）回复(0）举报 2023-01-24

我来回答

动态谷歌折线图不显示与php和Javascript

1条答案

相关问题

热门标签

最新问答