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

Question

I have some value in my database. I want to make a chart with these values summary.

Here is my PHP code to connect database:

<?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);
?>

This code output is:

[{"SUM(akim)":"851"},{"SUM(akim)":"64"}]

Now I have script to draw chart. Here is my script code:

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

Where I am wrong? I think it should work, but it's not working.

Answer 1

This functionality can be achieved using a javascript library called ChartJs. You can read the documentation for more details. http://www.chartjs.org/docs/#bar-chart-introduction