来自mySQL的JSON和Google图表中的着色

Question

I would like to get some help with coloring data differently in with google chart. 我想获得一些与Google图表不同方式为数据着色的帮助。 I'm trying to compare two domains with date and rank value. 我正在尝试将两个域与日期和排名值进行比较。

If I leave out the 'domain' data and just have date and value data, it will display a chart with the date data on the y-axis and the value data on the x-axis. 如果我忽略“域”数据，而仅具有日期和值数据，它将在Y轴上显示带有日期数据，在X轴上显示值数据的图表。 I would like to use the domain data in my table to differentiate the data I'm comparing, one domain in one color vs. another domain in another color in a bar chart with the legend identifying the domain. 我想使用表格中的域数据来区分我正在比较的数据，条形图中用一种颜色的一个域与用另一种颜色的另一种域，用图例标识域。

Basically using the code below I get the following error: All series on a given axis must be of the same data type 基本上使用下面的代码，我得到以下错误：给定轴上的所有序列必须是相同的数据类型

If there's different and or easier way of going about this let me know. 如果有其他更简单的解决方法，请告诉我。

Table Structure: 表结构：

Column Type Null Default Comments 列类型空默认注释

date text No 日期文字编号
value text No 值文字否
domain text No 域文本

Here's what I use to change my mysql data into Google friendly JSON: 这是将mysql数据更改为Google友好的JSON的方法：

<?php
/* $server = the IP address or network name of the server
 * $userName = the user to log into the database with
 * $password = the database account password
 * $databaseName = the name of the database to pull data from
 */
$host="127.0.0.1"; //replace with your hostname
$username="XXXXXXX"; //replace with your username
$password="XXX"; //replace with your password
$db_name="KYW_data"; //replace with your database
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name") or die ("cannot select DB");

mysql_select_db($db_name, $con); 

// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysql_query('SELECT date, value FROM KYW_Compete_rank');

$table = array();
$table['cols'] = array(
/* define your DataTable columns here
* each column gets its own array
* syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
    array('label' => 'date', 'type' => 'string'),
array('label' => 'value', 'type' => 'number'),
array('label' => 'value', 'type' => 'string')
// etc...
);

$rows = array();
while($r = mysql_fetch_assoc($query)) {
    $temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['date']);
$temp[] = array('v' => $r['value']);
$temp[] = array('v' => $r['domain']);
// etc...
// insert the temp array into $rows
    $rows[] = array('c' => $temp);
}

Code for Displaying Google Chart: 显示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 piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

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

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

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      new google.visualization.BarChart(document.getElementById('visualization')).
            draw(data,
                 {title:"Rank Standings",
                  width:600, height:400,
                  vAxis: {title: "Year and Month"},
                  hAxis: {title: "Rank"}}
            );
    }

    </script>
  </head>

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

Answer 1

To get the legend to display two different series, you have to split your data into two columns. 为了使图例显示两个不同的序列，您必须将数据分成两列。 You can use SQL like this to split your data: 您可以像这样使用SQL来拆分数据：

SELECT
    date,
    SUM(IF(<condition for series 1>, value, 0)) AS value_1,
    SUM(IF(<condition for series 2>, value, 0)) AS value_2
FROM KYW_Compete_rank
GROUP BY date

and then populate your DataTable: 然后填充您的数据表：

$table = array(
    'cols' => array(
        array('label' => 'date', 'type' => 'string'),
        array('label' => 'value 1', 'type' => 'number'),
        array('label' => 'value 2', 'type' => 'number')
    )
    'rows' => array()
);
while($r = mysql_fetch_assoc($query)) {
    $data['rows'][] = array('c' => array(
        array('v' => $r['date']),
        array('v' => $r['value_1']),
        array('v' => $r['value_2'])
    ));
}
echo json_encode($data, JSON_NUMERIC_CHECK);

来自mySQL的JSON和Google图表中的着色

问题描述

1 个解决方案

解决方案1
0 2014-04-17 21:20:29

来自mySQL的JSON和Google图表中的着色

问题描述

1 个解决方案

解决方案1 0 2014-04-17 21:20:29

解决方案1
0 2014-04-17 21:20:29