谷歌堆积柱形图 - 如何从mysql查询结果创建所需的json

时间:2015-06-04 21:22:59

标签: php mysql json google-visualization

这是一个关于从MySQL查询结果创建json的问题。 json将用于Google Chart。

我还没有看到如何从MySQL查询结果创建json数组的明确示例,可以在Google ColumnChart中使用isStacked:true。

我没有堆叠工作正常的ColumnChart。该代码包含在下面。该图表显示x轴上的卡和y轴上的值。

但是,现在我想要包含一个日期值(年和月字符串),然后将其放在x轴上,然后按日期将这些卡堆叠在列中。

我正在努力将json数组转换为Google似乎想要的pivoted / cross表格式(例如这里[https://developers.google.com/chart/interactive/docs/gallery/barchart#stacked-bar-charts]

我怀疑我需要遍历卡片并从中创建列标题,类似于行值的创建方式

$rows = array();
while($r = mysql_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array('v' => $r['card']);
    $temp[] = array('v' => (int) $r['value']); 
    // insert the temp array into $rows
    $rows[] = array('c' => $temp);
}

而不是只为这些卡片提供一个列,就像这样基本的未堆叠的ColumnChart:

//define your DataTable columns here
$table['cols'] = array(
    array('label' => 'card', 'type' => 'string'),
    array('label' => 'value', 'type' => 'number')
);

也许做这样的事情:

//define your DataTable columns here
$table['cols'] = array(
// loop through query results to get cards and make column from each of them
while($r = mysql_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array('v' => $r['card']);
    $cols[] = array('c' => $temp);
}
);

但后来仍不确定如何将值引入数组。

有人能指出我正确的方向吗?

MySQL / php / json数据源:

<?php

//connect to database
$username = "xxx";
$password = "xxx";
$hostname = "127.0.0.1"; 

//connection to the database
$conn = mysql_connect($hostname, $username, $password) or die("Could not connect to that");
mysql_select_db("sitrucp_ppcc");

//run query
$query = "select 
ca.name as 'card', 
count(a.id) as 'value' 
from activities a
join cards ca
on a.card_id = ca.id
group by 
ca.name
order by 
ca.name";  

$result = mysql_query($query) or die(mysql_error());

$table = array();
//define your DataTable columns here
$table['cols'] = array(
    array('label' => 'card', 'type' => 'string'),
    array('label' => 'value', 'type' => 'number')
);

// each column needs to have data inserted via the $temp array
// typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
$rows = array();
while($r = mysql_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array('v' => $r['card']);
    $temp[] = array('v' => (int) $r['value']); 
    // insert the temp array into $rows
    $rows[] = array('c' => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);

echo $jsonTable;


mysql_close($conn);

?>

Google图表网页:

<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi">   </script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

        // Load the Visualization API and the chart package.
        google.load('visualization', '1', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create our data table out of JSON data loaded from server
            var jsonData = $.ajax({
                url: "activities_json_by_card.php",
                dataType:"json",
                async: false
            }).responseText;
            var data = new google.visualization.DataTable(jsonData);

            //set chart options
            var options = {
                title: 'Card Activities',
                vAxis: {title: "Value"},
                hAxis: {title: "Cards"},
                width: 500,
                height: 500,
                legend: { position: 'none' }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }

    </script>
</head>

<body>
    <!--Div that will hold the chart-->
    <div id="chart_div"></div>

</body>
</html>

0 个答案:

没有答案