PHP数组到谷歌图表 [英] PHP array into google charts

问题描述

我需要一些帮助，将PHP数据放入Google图表中.

I need a little help putting PHP data into google charts.

我创建了一个简单的数组

I have created a simple array

$chart_arr = array($year, $new_balance);
json_encode($chart_arr);    

如果我跑步

<?php echo json_encode($chart_arr);?>    

我看到以下内容:[2015,1150] [2016,1304.5] [2017,1463.635] [2018,1627.54405] [2019,1796.3703715]，所以我认为(?)我从我的forloop编码中得到了正确的数字会产生$ year和$ new_balance.

I see the following: [2015,1150] [2016,1304.5] [2017,1463.635] [2018,1627.54405] [2019,1796.3703715], so I think (?) I am getting the right numbers encoded from my forloop that generates $year and $new_balance.

我想在Google图表中绘制这些数字

I want to chart these numbers in google chart

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

function drawChart() {


var data = new google.visualization.DataTable();
                data.addColumn('string', 'Year');
                data.addColumn('number', 'Balance');
                data.addRows([
                    <?php echo json_encode($chart_arr);?>
                ]);    

或者:

                data.addRows([
                <?php echo $chart_arr;?>
            ]);    

然后继续...

var options = {
              title: 'My Savings',
              curveType: 'function',
              legend: { position: 'bottom' } 
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);

}

显示为...

    <div class="grid-container"> 
    <div class="grid-100 grid-parent">
        <div id="curve_chart" style="width: 100%; height: auto"></div>
     </div>   

</div>

我尝试了多种变体，但是要么没有将数据放入图表中，要么没有使图表显示.

I have tried a number of variations but am either not getting the data into the chart or not getting a chart to display.

有人可以帮助我显示我要去哪里吗?

Could someone help me to show where I am going wrong?

我看到了另一个相关的帖子，其中使用了以下代码:

I saw another related post that used the following code:

     $chartsdata[$i] = array($testTime, $testNb);
echo json_encode($chartsdata);

var jsonData = $.ajax({
        url: "test.php",
        dataType: "json",
        async: false
    }).responseText;

    var obj = JSON.stringify(jsonData);
    data.addRows(obj);

这是我需要研究的方法吗?

Is this the approach I need to be looking at?

预先感谢

推荐答案

我看到您提出第一个问题后仍未找到解决方法，所以我在这里为您提供了一个可行的示例，希望对您有所帮助:).

i see you haven't found out how to do it after your first question, so i've made you a working example here, hope this helps you Dave :).

如果对此有任何疑问，请随时提问！

If you've got some questions about this, feel free to ask!

<?php 
//create array variable
$values = [];

//pushing some variables to the array so we can output something in this example.
array_push($values, array("year" => "2013", "newbalance" => "50"));
array_push($values, array("year" => "2014", "newbalance" => "90"));
array_push($values, array("year" => "2015", "newbalance" => "120"));

//counting the length of the array
$countArrayLength = count($values);

?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Balance');

    data.addRows([

    <?php
    for($i=0;$i<$countArrayLength;$i++){
        echo "['" . $values[$i]['year'] . "'," . $values[$i]['newbalance'] . "],";
    } 
    ?>
    ]);

    var options = {
        title: 'My Savings',
        curveType: 'function',
        legend: { position: 'bottom' } 
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(data, options);
}
</script>

<div class="grid-container"> 
<div class="grid-100 grid-parent">
    <div id="curve_chart" style="width: 100%; height: auto"></div>
</div>   

</div>

这篇关于PHP数组到谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！