CODEWITHSUNDEEP
javascriptjsongoogle-visualization
Donald N. Mafa
Donald N. Mafa

Reputation: 5283

Convert normal json data to data that Google Visualization DataTable understands?

I just started using Google charts and its really cool stuff. The only problem is that I can not find any good examples for implementing this using data fed from a sql server view. So I created a sample project to facilitate this functionality, hoever i am battling to get it workin. Please find my code below:

<script type="text/javascript">
        // Load the Visualization API and the piechart package.
        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: "api/Google",
                dataType: "json",
                async: false
            }).responseText;

            alert(jsonData);
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            data.addColumn('string', 'Employee');
            data.addColumn('number', 'TotalNoOfReports');

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, { width: 400, height: 240 });
        }

    </script>

I am getting the correct json data string but when I pass my jsonData into the DataTable() class it return no data for the chart. I have also tried to call data.AddRows(jsonData),but still no luck. Im guessing google does not understand the structure of normal json data and requires it to be in the following format:

{"cols":[{"id":"Col1","label":"","type":"date"}],
  "rows":[
    {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
    {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
  ]
}

Is there a way I can get my jsonData to look like the structure above, possibly something more generic. The only chart examples are static and at times you would need to read off a database, please assist.

Upvotes: 2

Views: 9895

Answers (3)

CMoreira
CMoreira

Reputation: 1708

My knowledge is very limited in this subject, but what if you first convert the json data into something readable and then do a loop to add rows? Something like:

var jsondata = eval ("(" + JSONObject + ")");

and then

for(var key in jsondata) {

    data.addRows (row);

I know it's a very limited and short answer, but maybe someone else will have a better solution.

Upvotes: 3

Payal Mantri
Payal Mantri

Reputation: 1

Add a statement to parse your json string like 

var obj = $.parseJSON(jsonData);

and pass the parsed object to google DataTable 

var data = new google.visualization.DataTable(obj);

Upvotes: 0

koma
koma

Reputation: 6566

The response format is slightly different, you only pasted the dataTable part, but it also contains status code, request Id, and api version :

{version:'0.6',reqId:'0',status:'ok',sig:'5982206968295329967',table:{cols:[{id:'Col1',label:'',type:'number'},{id:'Col2',label:'',type:'number'},{id:'Col3',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]},{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},{c:[{v:3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]}};

you can read more about it here :

https://developers.google.com/chart/interactive/docs/dev/implementing_data_source

Upvotes: 1

Related Questions