How to Convert JSON String to Google Datatable for Google Charts

The article presents the solution to some of the issues that I faced while converting JSON string to Google Datatable. The primary reason for me to write an article on seemingly looking trivial issue is that I ended up spending lot of time in doing research and reaching to the solution.

 

Problem Scenario/Issues

One AJAX request is made to the server to retrieve the JSON data and draw the Google chart (LineChart in this example) using this JSON data.

Following is how the JSON data looks like after being sent from the server-side code:

{cols: [
     {id: 'task', label: 'Task', type: 'string'},
     {id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [
     {c:[{v: 'Work'}, {v: 11}]},
     {c:[{v: 'Work'}, {v: 11}]},
     {c:[{v: 'Eat'}, {v: 2}]},
     {c:[{v: 'Commute'}, {v: 2}]},
     {c:[{v: 'Watch TV'}, {v:2}]},
     {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]}

Following is the AJAX & Javascript code which was written to achieve above mentioned scenario. However, the problem was that chart was not showing up.

$.ajax({
	url : $("#displayReportsForm").attr("action"),
	data : data,
	type : "GET",

	success : function(response) {		
		google.setOnLoadCallback(drawChart(response));		
	},
	error : function(xhr, status, error) {
		alert(xhr.responseText);
	}
});

function drawChart(jsonData) {				
	var containerId = "divId"; //Id of a div container within HTML to hold the chart
	try {
		var data = new google.visualization.DataTable(jsonData);
		var chart = new google.visualization.LineChart(document
				.getElementById(containerID));
		chart.draw(data, options);
	} catch (err) {
		alert( err.message );			
	}
}

On one of the related pages on stackoverflow, a problem was stated where the same jsonData was locally done like following, but the chart did not show up.

jsonData = "{cols: [{id: 'task', label: 'Task', type: 'string'},{id: 'hours', label: 'Hours per Day', type: 'number'}],rows: [{c:[{v: 'Work'}, {v: 11}]},{c:[{v: 'Work'}, {v: 11}]},{c:[{v: 'Eat'}, {v: 2}]},{c:[{v: 'Commute'}, {v: 2}]},{c:[{v: 'Watch TV'}, {v:2}]},{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]}"

 

Solutions

Following could be used to resolve the above-mentioned issues and get the chart show up.

1. If testing locally, DO NOT enclose jsonData within “” as shown above. If you would remove outer double quotes (“”) sign, it would work fine.

2. For the above method to work correctly, one would require to write following additional code within the method.

jsonData = JSON.stringify(eval("(" + jsonData + ")"));

Thus, the method would look like following:

function drawChart(jsonData) {				
	jsonData = JSON.stringify(eval("(" + jsonData + ")"));
	var containerId = "divId"; //Id of a div container within HTML to hold the chart
	try {
		var data = new google.visualization.DataTable(jsonData);
		var chart = new google.visualization.LineChart(document
				.getElementById(containerID));
		chart.draw(data, options);
	} catch (err) {
		alert( err.message );			
	}
}
Ajitesh Kumar
Follow me
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data Science and Machine Learning / Deep Learning. In addition, I am also passionate about various different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia etc and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data etc. I would love to connect with you on Linkedin and Twitter.
Posted in Java. Tagged with , .

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.