Consider the code:
*google.load('visualization', '1', {'packages':['corechart','table']});*
*// Set a callback to run when the Google Visualization API is loaded.*
*google.setOnLoadCallback(drawChart);*
*function drawChart() {*
* var jsonData123 = $.ajax({*
* url: '/APIEnterpriser/rest/getIPAddress',*
* dataType:"json",*
* async: false*
* }).responseText;*
* var parsed123 = JSON.parse(jsonData123);*
* var domainName= parsed123;*
* var jsonData = $.ajax({*
* xhrFields: { withCredentials: true },*
* type:'GET',*
* url: 'http://'+domainName+':9898/jolokia/read/*/*',*
* dataType:"json",*
* crossDomain: true,*
* async: false*
* }).responseText;*
* var parsed = JSON.parse(jsonData);*
* var arr = [];*
* for(var x in parsed){*
* arr.push(parsed[x]);*
* }*
* var dataArray = [['EPM', 'Buffered', 'ThreadCount', 'CPU(%)',
'Memory(KB)']];*
* for (var i = 3; i < arr.length; i++) {*
* dataArray.push([arr[i].EPM, arr[i].Buffered, arr[i].ThreadCount,
arr[i].CPU.toPrecision(4), arr[i].Memory]);*
* }*
* var data = new google.visualization.arrayToDataTable(dataArray);*
* var chart = new
google.visualization.Table(document.getElementById('chart_div'));*
* chart.draw(data, {width: 800, height: 200, showRowNumber: true,
allowHtml: true});*
* setTimeout(drawChart, 5000);*
The code shows the data in tabular format, but when I change this to line
or are chart, I am not getting the dynamic line which changes according to
the data, though the table updates its value every 5 seconds.
This is the code to change the above code to line chart.
var dataArray1 = [['Time','EPM']];
for (var i = 3; i < arr.length; i++) {
dataArray1.push([new Date(), arr[i].EPM]);
}
var dataArray2 = [['Time','Buffered']];
for (var i = 3; i < arr.length; i++) {
dataArray2.push([new Date(), arr[i].Buffered]);
}
var dataArray3 = [['Time','ThreadCount']];
for (var i = 3; i < arr.length; i++) {
dataArray3.push([new Date(), arr[i].ThreadCount]);
}
var dataArray4 = [['Time','CPU(%)']];
for (var i = 3; i < arr.length; i++) {
dataArray4.push([new Date(), arr[i].CPU]);
}
var dataArray5 = [['Time','Memory(KB)']];
for (var i = 3; i < arr.length; i++) {
dataArray5.push([new Date(), arr[i].Memory]);
}
var data1 = new google.visualization.arrayToDataTable(dataArray1);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div11'));
chart.draw(data1, {title: 'EPM', chartArea:{width:'50%',height:'75%'}});
setTimeout(drawChart, 5000);
var data2 = new google.visualization.arrayToDataTable(dataArray2);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div12'));
chart.draw(data2, {title: 'Buffered',
chartArea:{width:'50%',height:'75%'}});
setTimeout(drawChart, 5000);
var data3 = new google.visualization.arrayToDataTable(dataArray3);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div13'));
chart.draw(data3, {title: 'ThreadCount',
chartArea:{width:'50%',height:'75%'}});
setTimeout(drawChart, 5000);
var data4 = new google.visualization.arrayToDataTable(dataArray4);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div14'));
chart.draw(data4, {title: 'CPU(%)',
chartArea:{width:'50%',height:'75%'}});
setTimeout(drawChart, 5000);
var data5 = new google.visualization.arrayToDataTable(dataArray5);
var chart = new
google.visualization.LineChart(document.getElementById('chart_div15'));
chart.draw(data5, {title: 'Memory(KB)',
chartArea:{width:'50%',height:'75%'}});
setTimeout(drawChart, 5000);
How can I have a dynamics changing line chart?
On Thursday, October 9, 2014 6:30:40 AM UTC+5:30, Andrew Gallant wrote:
>
> PieCharts use 1 string and 1 number column only - they cannot use extra
> data, so you will have to decide which series are appropriate to use. You
> can create a DataView to restrict the data the chart sees to a particular
> subset of columns, so you don't have to change your DataTable construction
> if you have some other use for the DataTable.
>
> Here's an example DataView:
>
> // create a DataView based on the DataTable "data"
> var view = new google.visualization.DataView(data);
> view.setColumns([0, 1]);
>
> Use the view in place of the DataTable when drawing the chart.
>
> On Saturday, October 4, 2014 5:32:40 PM UTC-4, [email protected] wrote:
>>
>> Hi,
>> Can we convert this table into pie chart? Because I think piechart
>> requires a string and a number to follow along. But its not working when I
>> change "var chart = new google.visualization.Table(
>> document.getElementById('chart_div'));" to "var chart = new
>> google.visualization.PieChart(document.getElementById('chart_div'));"
>>
>> On Thursday, October 2, 2014 10:13:47 AM UTC+5:30, [email protected]
>> wrote:
>>>
>>> It sure did Andrew. Thanks a lot.
>>>
>>> On Thursday, October 2, 2014 7:45:16 AM UTC+5:30, Andrew Gallant wrote:
>>>>
>>>> Why are you starting to fill your array at index 3?
>>>>
>>>> var dataArray = new Array(size+1);
>>>> dataArray[3] = new Array();
>>>> dataArray[3][0] = 'EPM';
>>>> dataArray[3][1] = 'Buffered';
>>>> dataArray[3][2] = 'ThreadCount';
>>>>
>>>> and why reference the size of arr[3]?
>>>>
>>>> for(var sizeCount in arr[3]){
>>>> size++;
>>>> }
>>>>
>>>> I think this might be the root of your problem. You can simplify your
>>>> code like this, and I think it should work:
>>>>
>>>> var dataArray = [['EPM', 'Buffered', 'ThreadCount']];
>>>> for (var i = 3; i < arr.length; i++) {
>>>> dataArray.push([arr[i].EPM, arr[i].buffered, arr[i].ThreadCount]);
>>>> }
>>>>
>>>> On Tuesday, September 30, 2014 10:42:22 PM UTC-4, [email protected]
>>>> wrote:
>>>>>
>>>>> Even when using var chart = new google.visualization.Table(
>>>>> document.getElementById('chart_div'));
>>>>>
>>>>> I am getting this error. "Uncaught TypeError: Array.prototype.map
>>>>> called on null or undefined "
>>>>>
>>>>> On Wednesday, October 1, 2014 5:04:46 AM UTC+5:30, Andrew Gallant
>>>>> wrote:
>>>>>>
>>>>>> This line:
>>>>>>
>>>>>> var chart = new
>>>>>> google.visualization.DataTable(document.getElementById('chart_div'));
>>>>>>
>>>>>> is incorrect. You should be creating a visualization object there,
>>>>>> not a DataTable. Did you intend to create a Table?
>>>>>>
>>>>>> var chart = new
>>>>>> google.visualization.Table(document.getElementById('chart_div'));
>>>>>>
>>>>>> On Tuesday, September 30, 2014 5:39:20 AM UTC-4, [email protected]
>>>>>> wrote:
>>>>>>>
>>>>>>> *<!DOCTYPE html>*
>>>>>>> *<html>*
>>>>>>> *<head>*
>>>>>>> *<meta charset="ISO-8859-1">*
>>>>>>> *<title>Insert title here</title>*
>>>>>>> *</head>*
>>>>>>> *<script type="text/javascript" src="https://www.google.com/jsapi
>>>>>>> <https://www.google.com/jsapi>"></script>*
>>>>>>> *<script
>>>>>>> src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
>>>>>>> <http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>"></script>*
>>>>>>> *<script>*
>>>>>>> *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:
>>>>>>> "http://127.0.0.1:9001/jolokia/read/MineStar:type=Speedometer,name=Statistics/*
>>>>>>>
>>>>>>> <http://127.0.0.1:9001/jolokia/read/MineStar:type=Speedometer,name=Statistics/*>",*
>>>>>>> * dataType:"json",*
>>>>>>> * async: false*
>>>>>>> * }).responseText;*
>>>>>>>
>>>>>>> * var parsed = JSON.parse(jsonData);*
>>>>>>>
>>>>>>> * var arr = [];*
>>>>>>>
>>>>>>> * for(var x in parsed){*
>>>>>>> * arr.push(parsed[x]);*
>>>>>>> * }*
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> * // Create our data table out of JSON data loaded from server.*
>>>>>>> * var size = 0;*
>>>>>>> * for(var sizeCount in arr[3]){*
>>>>>>> * size++;*
>>>>>>> * }*
>>>>>>> * var dataArray = new Array(size+1);*
>>>>>>> * dataArray[3] = new Array();*
>>>>>>> * dataArray[3][0] = 'EPM';*
>>>>>>> * dataArray[3][1] = 'Buffered';*
>>>>>>> * dataArray[3][2] = 'ThreadCount';*
>>>>>>>
>>>>>>> * //dataArray[0][2] = {type:'string', role:'tooltip'};*
>>>>>>> * var i = 3; *
>>>>>>>
>>>>>>> * while(i < size+1){*
>>>>>>> * dataArray[i] = new Array();*
>>>>>>> * //dataArray[i][1] = (jsonObj[i].siteIndicatorColor);*
>>>>>>> * dataArray[i][0] =(arr[i].EPM);*
>>>>>>> * dataArray[i][1] = (arr[i].Buffered);*
>>>>>>> * dataArray[i][2] = (arr[i].ThreadCount);*
>>>>>>> * i++;*
>>>>>>> * }*
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> * var data = new google.visualization.arrayToDataTable(dataArray);*
>>>>>>> * var chart = new
>>>>>>> google.visualization.DataTable(document.getElementById('chart_div'));*
>>>>>>> * chart.draw(data, {width: 400, height: 240});*
>>>>>>> *}*
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> *</script>*
>>>>>>> *<body>*
>>>>>>> *<div id="chart_div"></div>*
>>>>>>> *</body>*
>>>>>>> *</html>*
>>>>>>>
>>>>>>> I have written this code. But its not working. It is saying as :*
>>>>>>> Uncaught
>>>>>>> TypeError: Array.prototype.map called on null or undefined *
>>>>>>>
>>>>>>> On Tuesday, September 30, 2014 11:50:33 AM UTC+5:30,
>>>>>>> [email protected] wrote:
>>>>>>>>
>>>>>>>> I have a json format data. But I need to parse only "value" data
>>>>>>>> from it and show it in google visualisation api. How can I achieve
>>>>>>>> this.
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> Consider the following JSON data:
>>>>>>>>
>>>>>>>> {
>>>>>>>> timestamp: 1412048041,
>>>>>>>> status: 200,
>>>>>>>>
>>>>>>>> request: {
>>>>>>>> mbean: "MineStar:name=Statistics,type=Speedometer",
>>>>>>>> type: "read"
>>>>>>>> },
>>>>>>>> value: {
>>>>>>>> EPM: 1,
>>>>>>>> Buffered: 0,
>>>>>>>> ThreadCount: 142
>>>>>>>> }}
>>>>>>>>
>>>>>>>> I have used jolokia jar to convert my jmx beans to json data.
>>>>>>>>
>>>>>>>> How can I parse only "value" to a UI using google visualisation api?
>>>>>>>>
>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
