Reputation: 334
I'm using cshtml page to create a google chart. I have 2 pages. One that creates the json from a db query
var db = Database.Open("MyDB");
var data = @"SELECT ESTADO, COUNT(*) CNT FROM graficos WHERE ESTADO IS NOT NULL GROUP BY ESTADO";
Json.Write(data, Response.Output);
Response.ContentType = "application/json";
That is producing this result [{"ESTADO":"ABERTO","CNT":63},{"ESTADO":"ASSOCIADO A AVARIA PAI","CNT":9},{"ESTADO":"AVARIA PAI COM EM EXECUÇÃO","CNT":3},{"ESTADO":"AVARIA PAI EM DESPISTE","CNT":3},{"ESTADO":"CANCELADO","CNT":3},{"ESTADO":"EM DESPISTE","CNT":18},{"ESTADO":"EM EXECUÇÃO","CNT":27},{"ESTADO":"FECHADO","CNT":189},{"ESTADO":"RESOLVIDO","CNT":51}]
And this page where i want to display the chart
// 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: "teste.cshtml",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 800, height: 600});
}
That is giving me this Table has no columns.×
----- UPDATE --
I've seen that if i put this
{
"cols":[
{"type":"string"},{"type":"number"}
],
"rows":[
{"c": [{ "v": "ABERTO"},{"v":63} ]},
{"c": [{ "v": "ASSOCIADO A AVARIA PAI"},{"v":9} ]},
{"c": [{ "v": "AVARIA PAI COM EM"},{"v":3} ]},
{"c": [{ "v": "Resolvido"},{"v":55} ]}
]
}
The chart is produced. How can i produce the json with this structure?
Upvotes: 0
Views: 923
Reputation: 16068
You could make something like this:
var google_data = {
"cols": [{
"type": "string"
}, {
"type": "number"
}],
rows: []
};
for(var i=0;i<jsonData.length;i++){
google_data.rows.push({c:[{v:jsonData[i].ESTADO}, {v:jsonData[i].CNT}]});
}
var data = new google.visualization.DataTable(google_data);
Upvotes: 3