带有JSON blob的Google线图表可视化 [英] Google line chart visualization with JSON blob
本文介绍了带有JSON blob的Google线图表可视化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我有一个谷歌折线图可视化数据集已被转换为JSON
以下是一些具有属性的代码：
var chartOptions = {curveType：'none'，
width：1200，height：768，
vAxis：{maxValue：8000， title：'以ms为单位加载时间'}，
hAxis：{title：'Date and Time'}，
title：'线形图示例'，
titlePosition：'out'，
titleTextStyle：{fontSize：14，textIndent：10}，
fontSize：12
};
//加载核心图表可视化
google.load（'visualization'，'1'，{packages：['corechart']}）;
//加载回调函数
google.setOnLoadCallback（getData）;
我必须遍历并显示在折线图中的JSON blob看起来像这样：
{
cols：[
{
id：formatted_timestamp，
label：格式化时间戳，
type：number
}，
{
id：fully_loaded，
label：满载，
type：number
}，
{
id：load_time，
label ：加载时间，
type：number
}，
{
id：location，
label：测试位置，
type：string
}，
{
id：time_to_first_byte，
label：字节，
type：number
}，
{
id：timestamp，
label：Timestamp，
type：datetime
}，
{
id：url，
label： URL，
type：string
}，
{
id：view，
label：View＃ ，
type：number
}
]，
rows：[
{
c：[
{
v：1288888570000
}，
{
v：9236
}，
{
v：6348
}，
{
v：美国弗吉尼亚州杜勒斯
}，
{
v：466
} ，
{
v：日期（2010，10，4，16，36，10）
}，
{
v： HTTP ：//example.com
，
{
v：1
}
]
}，
{
c：[
{
v：1288888592000
}，
{
v：4499
}，
{
v：3630
}，
{
v：美国弗吉尼亚州杜勒斯
}，
{
v：322
}，
{
v：日期（2010,10,4,16,36,32）
}，
{
v：http://example2.com
}，
{
v：2
}
]
}，
{
c：[
{
v：1288888582000
}，
{
v：4499
}，
{
v：3630
}，
{
v：美国弗吉尼亚州杜勒斯
}，
{
v：322
} ，
{
v：Date（2010，10，4，16，36，32）
}，
{
v： http://example3.com
，
{
v：2
}
]
}，
为简洁起见，我缩写了行，因为它们中有很多，但它们几乎重复不同的数据。 / p>
我的问题是如何迭代这个blob，然后在google中显示它线图可视化？另外，如何从中选择不同的数据集并将其显示在绘制在同一图上的其他数据中？
预先感谢。
因此，经过Google Visualization API的一些试验和错误之后，我想出了如何显示来自JSON数据集的数据。
//加载核心图表可视化包
google.load（'visualization'，'1'，{packages： [ 'corechart']}）;
//在加载回调启动函数
google.setOnLoadCallback（getData）;
函数getData（）{
//获取Google数据
var query = new google.visualization.Query（'/ example / datatable ）;
//设置查询参数
query.setQuery（'select timestamp，this_time，foo group by foo'）;
//发送参数并启动函数
query.send（drawTable）;
$ b函数drawTable（response）{
//错误检查
if（response.isError（））{
alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;
return;
//将响应转换为JSON字符串
var googleDataQuery = response.getDataTable（）。toJSON（）;
//将JSON转换为Google数据表
var convertedData = new google.visualization.DataTable（googleDataQuery，0.5）;
//初始化一个特定的数据表子集视图并存入一个变量
var view = new google.visualization.DataView（convertedData）;
/ *指定要查看的行，在本例中为1到100行。您可以将数组用于
特定行，即[0,3,5] * /
view.setRows（1，100）;
//指定列数据
view.setColumns（[1,2]）;
//启动图表类型。在这种情况下，折线图
visualization = new google.visualization.LineChart（document.getElementById（'gchart'））;
//使用图表选项绘制数据表子集
visualization.draw（view，chartOptions）;
}
So I have a google line chart visualization with a data set that has been converted to JSON
Here is some code with properties:
var chartOptions = {curveType: 'none',
width: 1200, height: 768,
vAxis: {maxValue: 8000, title: 'Load time in ms'},
hAxis: {title: 'Date and Time'},
title: 'A Line Graph Example',
titlePosition: 'out',
titleTextStyle: {fontSize: 14,textIndent: 10},
fontSize: 12
};
//Load core chart visualization
google.load('visualization', '1', {packages: ['corechart']});
//On load call back invoke function
google.setOnLoadCallback(getData);
The JSON blob that I have to iterate through and display in the line chart looks something like this:
{
"cols": [
{
"id": "formatted_timestamp",
"label": "Formatted timestamp",
"type": "number"
},
{
"id": "fully_loaded",
"label": "Fully loaded",
"type": "number"
},
{
"id": "load_time",
"label": "Load time",
"type": "number"
},
{
"id": "location",
"label": "Test location",
"type": "string"
},
{
"id": "time_to_first_byte",
"label": "Time to first byte",
"type": "number"
},
{
"id": "timestamp",
"label": "Timestamp",
"type": "datetime"
},
{
"id": "url",
"label": "URL",
"type": "string"
},
{
"id": "view",
"label": "View #",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": 1288888570000
},
{
"v": 9236
},
{
"v": 6348
},
{
"v": "Dulles, VA USA"
},
{
"v": 466
},
{
"v": "Date(2010, 10, 4, 16, 36, 10)"
},
{
"v": "http://example.com"
},
{
"v": 1
}
]
},
{
"c": [
{
"v": 1288888592000
},
{
"v": 4499
},
{
"v": 3630
},
{
"v": "Dulles, VA USA"
},
{
"v": 322
},
{
"v": "Date(2010, 10, 4, 16, 36, 32)"
},
{
"v": "http://example2.com"
},
{
"v": 2
}
]
},
{
"c": [
{
"v": 1288888582000
},
{
"v": 4499
},
{
"v": 3630
},
{
"v": "Dulles, VA USA"
},
{
"v": 322
},
{
"v": "Date(2010, 10, 4, 16, 36, 32)"
},
{
"v": "http://example3.com"
},
{
"v": 2
}
]
},
For the sake of brevity, I abbreviated the rows because there are a lot of them but they pretty much repeat with different data.
My question is how would I iterate through this blob and then display it in the google line chart visualization? Also how would I select different sets of data from this and display it over other data plotted on the same graph?
Thanks in advance.
解决方案
So after some trial and error with the Google Visualization API I figured out how to display data from the JSON data set.
//Load core chart visualization package
google.load('visualization', '1', {packages: ['corechart']});
//On load call back initiate function
google.setOnLoadCallback(getData);
function getData() {
//get Google vis data
var query = new google.visualization.Query('/example/datatable');
//set query parameters
query.setQuery('select timestamp, this_time, foo group by foo');
//send parameters and initiate function
query.send(drawTable);
}
function drawTable(response) {
//error checking
if (response.isError()){
alert('Error in query: ' + response.getMessage() + '' + response.getDetailedMessage());
return;
}
//convert response to JSON string
var googleDataQuery = response.getDataTable().toJSON();
//Convert JSON to google Data table
var convertedData = new google.visualization.DataTable(googleDataQuery, 0.5);
//Initialize a specific data table sub set view and store into a variable
var view = new google.visualization.DataView(convertedData);
/*specify rows you want to see, in this case rows 1 through 100. You can use an array for
specific rows ie [0,3,5]*/
view.setRows(1, 100);
//specify column data
view.setColumns([1,2]);
//initiate type of chart. in this case a line chart
visualization = new google.visualization.LineChart(document.getElementById('gchart'));
//draw data table sub set with chart options
visualization.draw(view, chartOptions);
}
这篇关于带有JSON blob的Google线图表可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
