如何使用数据库值绘制条形图

时间:2016-11-02 08:08:03

标签: javascript php sql charts bar-chart

我的数据库中有一些价值。我想用这些值汇总制作图表。

这是我连接数据库的PHP代码:

<?php
header('Content-Type: text/html; charset=utf-8');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'futurk_etkin');
define('DB_PASSWORD', 'etkin');
define('DB_NAME', 'futurk_etkin');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT SUM(akim) FROM etkin GROUP BY YEAR(tarih),MONTH(tarih)");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

echo json_encode($data);
?>

此代码输出为:

  

[{ “SUM(阿基姆)”: “851”},{ “SUM(阿基姆)”: “64”}]

现在我有绘制图表的脚本。这是我的脚本代码:

<script>
    $(document).ready(function(){
    var data = <?php echo json_encode($data) ?>;

            var akim = [];

            for(var i in data) {
                akim.push(data[i].SUM(akim));
            }

                var chartdata = {
                    labels: id,
                    datasets : [
                        {
                            label: 'akim',
                            backgroundColor: 'rgba(200, 200, 200, 0.75)',
                            borderColor: 'rgba(200, 200, 200, 0.75)',
                            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                            hoverBorderColor: 'rgba(200, 200, 200, 1)',
                            data: akim
                        }
                    ]
                };

                var ctx = $("#mycanvas1");

                var barGraph = new Chart(ctx, {
                    type: 'bar',
                    data: chartdata
                });
        });
    </script>

我哪里错了?我认为它应该有用,但它不起作用。

1 个答案:

答案 0 :(得分:0)

使用名为ChartJs的javascript库可以实现此功能。 您可以阅读文档以获取更多详细信息。 http://www.chartjs.org/docs/#bar-chart-introduction