如何使用此动态数组填充Google图表？

Question

I want to learn how to populate a google chart from an array that is based on a sql query. The array can contain different number of results depending on what day it is run. I created the chart with manual input data so I know it works but when I try to read data from the array I don't succeed.

This is the array

Array

(

    [0] => Array
        (
            [0] => Mobillyftar
            [PRODUCT_GROUP] => Mobillyftar
            [1] => 20
            [WEEK] => 20
            [2] => 54
            [QTY] => 54
        )

    [1] => Array
        (
            [0] => Selar
            [PRODUCT_GROUP] => Selar
            [1] => 20
            [WEEK] => 20
            [2] => 808
            [QTY] => 808
        )

    [2] => Array
        (
            [0] => Taklyftar
            [PRODUCT_GROUP] => Taklyftar
            [1] => 20
            [WEEK] => 20
            [2] => 6
            [QTY] => 6
        )

    [3] => Array
        (
            [0] => Tillb & res
            [PRODUCT_GROUP] => Tillb & res
            [1] => 20
            [WEEK] => 20
            [2] => 1159
            [QTY] => 1159
        )

)

And here is my chart:

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

<script type="text/javascript">
google.charts.load('current', {packages:['bar']});
google.charts.setOnLoadCallback(draw);

<?php 
$variable = $producedPerProductgroupAndWeekArray; 
echo "var array=".$variable.";";
?>

function draw() {
var data = new google.visualization.DataTable();
data.addColumn('string','week');
data.addColumn('number', 'qty'); 


for (idx=0;idx=array[1].lenght;idx++)
    {
        data.addRow([array[1][idx].week,Number(array[1][idx].qty)]);
        <!--data.addRow([table[idx].week,Number(table[idx.value])]);-->
        <!--data.addRow( [table[0][WEEK], Number(table[0][QTY]) ] );-->
    }

var option = {
    chart:{
        title:"barchart",
    }, 
    bars:'vertical',
}

var chart = new google.charts.Bar(document.getElementById("bar"))
chart.draw(data,option);
}
</script>

<div id="bar" style="height:500px; width:900px;"></div>

Answer 1

recommend building the array in php, similar to following...

$table = array();

$table['cols'] = array();
$table['cols'][] = array('label' => 'WEEK', 'type' => 'string');
$table['cols'][] = array('label' => 'Mobillyftar', 'type' => 'number');
$table['cols'][] = array('label' => 'Selar', 'type' => 'number');
$table['cols'][] = array('label' => 'Taklyftar', 'type' => 'number');
$table['cols'][] = array('label' => 'Tillb', 'type' => 'number');

$row = array();
$row[] = array('v' => '20');
$row[] = array('v' => 54);
$row[] = array('v' => 808);
$row[] = array('v' => 6);
$row[] = array('v' => 1159);
$table['rows'] = array('c' => $row);

which should result in the following json...

{"cols":[
  {"label":"WEEK","type":"string"},
  {"label":"Mobillyftar","type":"number"},
  {"label":"Selar","type":"number"},
  {"label":"Taklyftar","type":"number"},
  {"label":"Tillb","type":"number"}
],
"rows":[
  {"c":[{"v":"20"},{"v":54},{"v":808},{"v":6},{"v":1159}]}
]}

which can then be used to create the data table directly...

var data = new google.visualization.DataTable(jsonData);

---

see following working snippet...

 google.charts.load('current', {packages:['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var jsonData = { "cols":[ {"label":"WEEK","type":"string"}, {"label":"Mobillyftar","type":"number"}, {"label":"Selar","type":"number"}, {"label":"Taklyftar","type":"number"}, {"label":"Tillb","type":"number"} ], "rows":[ {"c":[{"v":"20"},{"v":54},{"v":808},{"v":6},{"v":1159}]} ] }; var data = new google.visualization.DataTable(jsonData); var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data); } 

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