使用 php 和 mysql 的条形图

Question

要求来自 MySql 数据的条形图，我有静态条形图的工作代码，代码如下 -->

<script>
var data = [    
    [0, 11], //London, UK
    [1, 15], //New York, USA
    [2, 25], //New Delhi, India
    [3, 24], //Taipei, Taiwan
    [4, 13], //Beijing, China
    [5, 18]  //Sydney, AU
];
var dataset = [
    { label: "barchart", data: data, color: "#5482FF" }
];
var ticks = [
    [0, "London"],
    [1, "New Mumbai"],
    [2, "New Delhi"],
    [3, "Taipei"],
    [4, "Beijing"],
    [5, "Sydney"]
];
<script>

但对于动态条形图，数据来自数据库，数据也是数组格式，如下所示

Array
(
    [0] => Array
        (
            [product] => abc
            [total] => 21
        )
    [1] => Array
        (
            [product] => xyz
            [total] => 1
        )
    [2] => Array
        (
            [product] => pqr
            [total] => 13
        )
)

如何根据这些数据创建条形图？或任何建议？

Answer 1

用过chart.js
图表文档 http://www.chartjs.org/docs/

柱状图示例chart.I希望对您有所帮助

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>
<?php 
$array=array
(
    '0' => array
        (
            'product' => 'abc',
            'total' => 21
        ),
    '1' => array
        (
            'product' => 'xyz',
            'total' => 1
        ),
    '2' => array
        (
            'product' => 'pqr',
            'total' => 13
        )
);

?>


<script>
        var lab=[];
        var data=[];
        <?php 
        foreach($array as $tem)
        {

            ?>

            lab.push('<?php echo $tem['product']; ?>');
            data.push('<?php echo $tem['total']; ?>');
        <?php }

        ?>

        var barChartData = {
            labels : lab,
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : data
                },

            ]

        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

    </script>
    </body>
</html>

Answer 2

 $results = "data From the DB";

  $ticks = array();

  foreach($results as $result){

      $data[0] = $result['product'];

      $data[1] = $result['total'];

      $ticks[] = $data;

    }

    <script>
    var ticks =  <?php print_R($ticks); ?> 
    </script>

使用 php 和 mysql 的条形图

Bar graph using php and mysql

javascript

php

mysql

arrays

bar-chart