CODEWITHSUNDEEP
c#jsonrazorgoogle-visualizationwebmatrix
Nibbler
Nibbler

Reputation: 334

Json to google charts

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

Answers (1)

juvian
juvian

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

Related Questions