使用 Google Charts for this JSON var_dump(); 绘制柱形图；数据

Question

如何使用 Google-可视化将下面的 PHP-JSON 代码放入柱形图中？

<?php
    /* Connect  to database */
    $mysqli = new mysqli("localhost","root","123","charts");
    if(mysqli_connect_errno()){
      trigger_error('Connection failed: '.$mysqli->error);
    }

    /* Build the query */
    $query = "SELECT a.item_code,a.total,a.date FROM chart_values a, (SELECT DISTINCT item_code FROM chart_values GROUP BY item_code,date) b WHERE a.item_code = b.item_code";

    /* Loop through the results and build a JSON array for the data table */
    $result = $mysqli->query($query);

    $table = array();
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) {

                if (!isset($table[$row['item_code']])) {
                    $table[$row['item_code']] = array(
                          'total' => array(),
                          'date' => array()
              );
           }

            $table[$row['item_code']]['total'][] = $row['total'];
            $table[$row['item_code']]['date'][] = $row['date'];
    }       
    echo var_dump($table);
    $data = json_encode($table);
?>

var_dump($table); 结果是这样的：

array(3) { ["Scratch card 1.0 JD"]=> array(2) { ["total"]=> array(3) { [0]=> string(3) "411" [1]=> string(3) "333" [2]=> string(3) "123" } ["date"]=> array(3) { [0]=> string(10) "2013-04-01" [1]=> string(10) "2014-03-01" [2]=> string(10) "2015-02-01" } } ["Scratch card 2.0 JD"]=> array(2) { ["total"]=> array(3) { [0]=> string(3) "212" [1]=> string(3) "500" [2]=> string(3) "608" } ["date"]=> array(3) { [0]=> string(10) "2013-04-01" [1]=> string(10) "2014-03-01" [2]=> string(10) "2015-02-01" } } ["Scratch card 3.0 JD"]=> array(2) { ["total"]=> array(3) { [0]=> string(3) "234" [1]=> string(3) "345" [2]=> string(3) "456" } ["date"]=> array(3) { [0]=> string(10) "2013-04-01" [1]=> string(10) "2014-03-01" [2]=> string(10) "2015-02-01" } } }

Answer 1

<?php
    /* Connect  to database */
    $mysqli = new mysqli("localhost","root","123","charts");
    if(mysqli_connect_errno()){
      trigger_error('Connection failed: '.$mysqli->error);
    }

    /* Build the query */
    $query = "SELECT a.item_code,a.total,a.date FROM chart_values a, (SELECT DISTINCT item_code FROM chart_values GROUP BY item_code,date) b WHERE a.item_code = b.item_code";

    /* Loop through the results and build a JSON array for the data table */
    $result = $mysqli->query($query);

    $table = array();
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) {

                if (!isset($table[$row['item_code']])) {
                    $table[$row['item_code']] = array(
                          'total' => array(),
                          'date' => array()
              );
           }

            $table[$row['item_code']]['total'][] = $row['total'];
            $table[$row['item_code']]['date'][] = $row['date'];
    }       
    //echo var_dump($table);
    $datas = $table;
   // echo $datas; // insert this data to your database, cause this $data is string.

    $googleData = array('Date');
    foreach($datas as $key => $data){
        $googleData[] = $key;
    }

    for($i=0;$i<count($datas);$i++){
        foreach($datas as $key => $data){
            if(!in_array($data['date'][$i], $googleData)){
                $googleData[] = $data['date'][$i];
            }
            $googleData[] = $data['total'][$i];
        }
    }

    $googleData = json_encode(array_chunk($googleData,count($datas)+1));
    print_r($googleData);
?>

只需从您的 js 代码中删除注释并将其更改为 $googleData

var data = google.visualization.arrayToDataTable(JSON.parse('<?php echo $googleData; ?>'));

这是我的代码

<script src="https://www.google.com/jsapi"></script>
<body>
    <div style="width:90%; height:500px;" id="columnchart_material" style="width: 1000px; height: 500px;"></div>
</body>

<?php 

$datas = '{"Scratch card 1.0 JD":{"total":["411","333","123"],"date":["2013-04-01","2014-03-01","2015-02-01"]},"Scratch card 2.0 JD":{"total":["212","500","608"],"date":["2013-04-01","2014-03-01","2015-02-01"]},"Scratch card 3.0 JD":{"total":["234","345","456"],"date":["2013-04-01","2014-03-01","2015-02-01"]}}';

$datas = json_decode($datas,true);
// echo '<pre>';
// print_r($datas);

        $googleData = array('Date');
        foreach($datas as $key => $data){
            $googleData[] = $key;
        }

        for($i=0;$i<count($datas);$i++){
            foreach($datas as $key => $data){
                if(!in_array($data['date'][$i], $googleData)){
                    $googleData[] = $data['date'][$i];
                }
                $googleData[] = $data['total'][$i];
            }
        }

        $googleData = json_encode(array_chunk($googleData,count($datas)+1));
        // print_r($googleData);
?>
<script type="text/javascript">
google.load("visualization", "1.1", {
    packages: ["bar"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(JSON.parse('<?php echo $googleData; ?>'));

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
}
</script>

新答案

<?php
    /* Connect  to database */
    $mysqli = new mysqli("localhost","root","123","charts");
    if(mysqli_connect_errno()){
      trigger_error('Connection failed: '.$mysqli->error);
    }

    /* Build the query */
    $query = "SELECT a.item_code,a.total,a.date FROM chart_values a, (SELECT DISTINCT item_code FROM chart_values GROUP BY item_code,date) b WHERE a.item_code = b.item_code";

    /* Loop through the results and build a JSON array for the data table */
    $result = $mysqli->query($query);

    $table = array();
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) {

                if (!isset($table[$row['item_code']])) {
                    $table[$row['item_code']] = array(
                          'total' => array(),
                          'date' => array()
              );
           }

            $table[$row['item_code']]['total'][] = $row['total'];
            $table[$row['item_code']]['date'][] = $row['date'];
    }       
    echo var_dump($table);
    $datas = json_encode($table);

$datas = json_decode($datas,true);
// echo '<pre>';
// print_r($datas);

        $googleData = array('Date');
        foreach($datas as $key => $data){
            $googleData[] = $key;
        }

        for($i=0;$i<count($datas);$i++){
            foreach($datas as $key => $data){
                if(!in_array($data['date'][$i], $googleData)){
                    $googleData[] = $data['date'][$i];
                }
                $googleData[] = $data['total'][$i];
            }
        }

        $googleData = json_encode(array_chunk($googleData,count($datas)+1));
        // print_r($googleData);
?>



<script src="https://www.google.com/jsapi"></script>
<body>
    <div style="width:90%; height:500px;" id="columnchart_material" style="width: 1000px; height: 500px;"></div>
</body>


<script type="text/javascript">
google.load("visualization", "1.1", {
    packages: ["bar"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable(JSON.parse('<?php echo $googleData; ?>'));

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
}
</script>

使用 Google Charts for this JSON var_dump(); 绘制柱形图；数据

Draw a column chart using Google Charts for this JSON var_dump(); data

php

json

mysqli

google-visualization

nested-loops