Parse json data to google visualisation api

lifes...@gmail.com

unread,

Sep 30, 2014, 2:20:33 AM9/30/14

to google-visua...@googlegroups.com

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?

lifes...@gmail.com

unread,

Sep 30, 2014, 5:39:20 AM9/30/14

to google-visua...@googlegroups.com

<!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"></script>

<script src="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/*",

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

Andrew Gallant

unread,

Sep 30, 2014, 7:34:46 PM9/30/14

to google-visua...@googlegroups.com

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'));

lifes...@gmail.com

unread,

Sep 30, 2014, 10:42:22 PM9/30/14

to google-visua...@googlegroups.com

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 "

Andrew Gallant

unread,

Oct 1, 2014, 10:15:16 PM10/1/14

to google-visua...@googlegroups.com

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]);

lifes...@gmail.com

unread,

Oct 2, 2014, 12:43:47 AM10/2/14

to google-visua...@googlegroups.com

It sure did Andrew. Thanks a lot.

lifes...@gmail.com

unread,

Oct 4, 2014, 5:32:40 PM10/4/14

to google-visua...@googlegroups.com

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'));"

Andrew Gallant

unread,

Oct 8, 2014, 9:00:40 PM10/8/14

to google-visua...@googlegroups.com

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.

Nagendra Singh

unread,

Dec 1, 2014, 3:38:15 AM12/1/14

to google-visua...@googlegroups.com

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?

Reply all

Reply to author

Forward