locked
JSON Output to chart RRS feed

  • Question

  • User-960835389 posted

    I'm using webmatrix to create a chart from my db. I have one cshtml file 

         var db = Database.Open("MyDB");
         var data = @"SELECT ESTADO, COUNT(*) CNT FROM graficos WHERE ESTADO IS NOT NULL GROUP BY ESTADO";
         var resultadoSql = db.Query(data);
         Json.Write(resultadoSql, 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 on the page that the chart will be displayed (yeap google charts :x)

        // 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});
        }

    But i can't produce the chart it always says 

    Table has no columns.×

    Then i've tried this that was on one example and it works, the chart is created with the values.

    {
    "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} ]}
        ]
    }

    And i was thinking that perhaps the json file must be outputed this way ? How can i achieve that ?


    Tuesday, August 19, 2014 8:08 AM

Answers

  • User-1454326058 posted

    Hi paintufas,

    For that JSON string, we can’t use the entity class to achieve that. The reason is that in the rows entity, it has the same key (c).

    For your requirement, I suggest that you should iterate the returned data and add each data to the row.

    For example:

    public class Data
    
    {
    
        public string ColumnName = "";
    
        public int Value = 0;
    
     
    
        public Data(string columnName, int value)
    
        {
    
            ColumnName = columnName;
    
            Value = value;
    
        }
    
    }    
    
     $.ajax({
    
                    type: 'POST',
    
                    dataType: 'json',
    
                    contentType: 'application/json',
    
                    url: 'Default.aspx/GetData',
    
                    data: '{}',
    
                    success:
    
                        function (response) {
    
                            drawVisualization(response.d);
    
                        }
    
                });
    
            })
    function drawVisualization(dataValues) {
    
                var data = new google.visualization.DataTable();
    
                data.addColumn('string', 'Column Name');
    
                data.addColumn('number', 'Column Value'); 
    
                for (var i = 0; i < dataValues.length; i++) {
    
                    data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
    
                } 
    
                new google.visualization.PieChart(document.getElementById('visualization')).
    
                    draw(data, { title: "Google Chart demo" });
    
            } 
    

    There is a link about Google Visualization API that may benefit you:

    # Google Visualization API Code Examples

    https://developers.google.com/chart/interactive/docs/examples

    Best Regards,

    Starain Chen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 20, 2014 3:22 AM