Google图表在x轴上绘制包含日期的趋势线 [英] Google Chart draw Trendlines with date on x axis
问题描述
我需要使用趋势线绘制Google折线图，但我使用Ajax请求来获取数据。
在ajax文件中，一个数组的图形的元素，在我转换为JSON之后，像这样：
$ reply = json_encode
echo $ reply;
这是我的ajax回复的内容：
reply = [
[Periodo，Rome，Milan，Test]，
[20160830 3]，
[20160831，2,3,6]，
[20160901，2,3,20]，
[20160902，20,30,12]
];
在我的程序中，我填充的图形如下：
var replyJSON = JSON.parse（reply）;
var data = google.visualization.arrayToDataTable（replyJSON）;
这是一个类似的例子，我有什么，我会做什么， t复制ajax调用： http://jsfiddle.net/roby492/srrrn9sa/384/
我需要获得回复JSON，转换jquery日期中的日期字符串以正确显示趋势线。
我如何做到这一点？或者如何通过Ajax发送JSON，而不是字符串，而不是字符串？
谢谢。
Roberto R。
在此推荐类似的设置
示例构建了google可接受的JSON
这允许直接创建 DataTable ， 从JSON
中生成JSON
p> $ rows = array（）;
$ table = array（）;
$ table ['cols'] = array（
array（'label'=>'Time'，'type'=>'string'），
array （'label'=>'Wind_Speed'，'type'=>'number'），
数组（'label'=>'Wind_Gust'，'type'=>'number'）
）;
while（$ row = mysql_fetch_assoc（$ sqlResult））{
$ temp = array（）;
$ temp [] = array（'v'=>（string）$ row ['Time']）;
$ temp [] = array（'v'=>（float）$ row ['Wind_Speed']）;
$ temp [] = array（'v'=>（float）$ row ['Wind_Gust']）;
$ rows [] = array（'c'=> $ temp）;
}
$ table ['rows'] = $ rows;
echo json_encode（$ table）;
使用JSON中的实际日期列，有点棘手
主要是因为JavaScript中的月份数是零，不像php
所以如果你格式化一个日期php，需要减少月number by 1
在JSON中传递日期，可以使用一个长度为1的
以下格式，请注意它以字符串形式传递...
日期（2016，8，28，15，34，40 ） - >再次相当于今天的日期，
，月份为零（8 = 9月）
以便在PHP中以此格式构建日期，您可以使用以下...
$ date1 = new DateTime （）;
$ date2 =Date（。date_format（$ date1，'Y'）。，。（（int）date_format（$ date1，'m'） - 1），.date_format date1，'d'）。，.date_format（$ date1，'H'）。，.date_format（$ date1，'i'）。，.date_format（$ date1，'s'）。 ）;
生成Date（...）如上所示
调整其他答案中的代码段以包含Date列，可能如下所示：
$ rows = array（）;
$ table = array（）;
$ table ['cols'] = array（
array（'label'=>'Date'，'type'=>'date'），
array （'label'=>'Wind_Speed'，'type'=>'number'），
数组（'label'=>'Wind_Gust'，'type'=>'number'）
）;
while（$ row = mysql_fetch_assoc（$ sqlResult））{
$ date1 = $ row ['Date'];
$ date2 =Date（。date_format（$ date1，'Y'）。，。（（int）date_format（$ date1，'m'） - 1），.date_format date1，'d'）。，.date_format（$ date1，'H'）。，.date_format（$ date1，'i'）。，.date_format（$ date1，'s'）。 ）;
$ temp = array（）;
$ temp [] = array（'v'=>（string）$ date2）;
$ temp [] = array（'v'=>（float）$ row ['Wind_Speed']）;
$ temp [] = array（'v'=>（float）$ row ['Wind_Gust']）;
$ rows [] = array（'c'=> $ temp）;
}
$ table ['rows'] = $ rows;
echo json_encode（$ table）;
通过ajax从php获取上述结果，您可以直接创建表格
var data = new google.visualization.DataTable（reply）;
无需解析JSON或使用 arrayToDataTable
I need to draw a Google Line Chart with Trendlines, but I use an Ajax request to get data to put inside it
In the ajax file, I insert in one array the elements of the graphic and after I convert it in JSON like that:
$reply= json_encode($array);
echo $reply;
This is the content of my ajax reply:
reply = [
["Periodo","Rome","Milan","Test"],
["20160830",1,2,3],
["20160831",2,3,6],
["20160901",2,3,20],
["20160902",20,30,12]
];
In my program I populate the graphic like that:
var replyJSON = JSON.parse(reply);
var data = google.visualization.arrayToDataTable(replyJSON);
This is a similar example of what I have and what I would to do, but here I can't replicate the ajax call: http://jsfiddle.net/roby492/srrrn9sa/384/
I need to get reply JSON, convert the string of date in jquery date to show correctly the trendlines.
How can I do this? Or how Can I send by Ajax the JSON with date instead of a string?
Thank you. Roberto R.
take a look at this php to google chart via ajax example
recommend similar setup here
the example builds JSON that is acceptable by google
which allows creation of the DataTable, directly from the JSON
following is a snippet from that answer, that builds the JSON
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Time', 'type' => 'string'),
array('label' => 'Wind_Speed', 'type' => 'number'),
array('label' => 'Wind_Gust', 'type' => 'number')
);
while ($row = mysql_fetch_assoc($sqlResult)) {
$temp = array();
$temp[] = array('v' => (string) $row['Time']);
$temp[] = array('v' => (float) $row['Wind_Speed']);
$temp[] = array('v' => (float) $row['Wind_Gust']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
echo json_encode($table);
to use an actual Date column in the JSON, gets a little tricky
primarily because month numbers in JavaScript are zero-based, unlike php
so if you format a Date in php, need to reduce the month number by 1
which makes for a lengthy format statement
to pass a date in JSON, you can use the following format, note that it is passed as a string...
"Date(2016, 8, 28, 15, 34, 40)" --> which equates to today's date
again, the month is zero-based (8 = September)
so to build a date in this format in php, you can use the following...
$date1 = new DateTime();
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";
which produces the "Date(...)" shown above
adjusting the snippet from the other answer to include a Date column, might look something like this...
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Date', 'type' => 'date'),
array('label' => 'Wind_Speed', 'type' => 'number'),
array('label' => 'Wind_Gust', 'type' => 'number')
);
while ($row = mysql_fetch_assoc($sqlResult)) {
$date1 = $row['Date'];
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";
$temp = array();
$temp[] = array('v' => (string) $date2);
$temp[] = array('v' => (float) $row['Wind_Speed']);
$temp[] = array('v' => (float) $row['Wind_Gust']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
echo json_encode($table);
getting the above results via ajax from php, you can create the table directly
var data = new google.visualization.DataTable(reply);
no need to parse the JSON or use arrayToDataTable
这篇关于Google图表在x轴上绘制包含日期的趋势线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
