16 de junio de 2015

How To: Gráfico de Columnas de Google

Veamos cómo lograr un gráfico similar al de la imagen en ASP.NET MVC usando el api de Google Chart.

image

Partimos del hecho de que tenemos una vista con un modelo de datos:

El Modelo:

@model List<ModelCitDepartamentoInfo>

La clase (ModelCitDepartamentoInfo) debe tener al menos estas 4 propiedades:

        public int TypeName { get; set; }

        public int CountCommitted { get; set; }

        public int CountOnGoing { get; set; }

        public int CountFinished { get; set; }

 

El HTML:

<div class="panel-body">

<div id="chartGoogleColumn-Steering-Projects"></div>

</div>

El código JavaScript:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

   google.load("visualization", "1", { packages: ["corechart"] });

   google.setOnLoadCallback(drawChart);

 

   function drawChart() {

     var data = fnGetData4GoogleChart_SteeringProjects();

    

     var options = {

            colors: ['#ffa564', '#d2d8e6', '#797979'],

            isStacked: true,

            legend: { position: "top" },

            bar: {groupWidth: "50%"},

        };

 

    var view = new google.visualization.DataView(data);

    view.setColumns([0,

            1, { calc: "stringify",

                sourceColumn: 1,

                type: "string",

                role: "annotation" },

            2, { calc: "stringify",

                sourceColumn: 2,

                type: "string",

                role: "annotation" },

            3, { calc: "stringify",

                sourceColumn: 3,

                type: "string",

                role: "annotation" }

        ]);

 

    var chart = new  google.visualization.ColumnChart(document.getElementById('chartGoogleColumn-Steering-Projects'));

    chart.draw(view, options);

  }

 

 

  function fnGetData4GoogleChart_SteeringProjects() {

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

 

        data.addColumn('string', 'Type');

        data.addColumn('number', 'Committed');

        data.addColumn('number', 'OnGoing');

        data.addColumn('number', 'Finished');

 

        //Transformar el modelo de datos en json

        var json = @Html.Raw(Json.Encode(@Model.Select(x => new { x.TypeName, x.CountCommitted, x.CountOnGoing, x.CountFinished })

                ));

 

    for (var i=0; i < json.length; i++) {

      data.addRow([json[i].TypeName,

        json[i].CountCommitted == 0 ? null : json[i].CountCommitted,

        json[i].CountOnGoing == 0 ? null : json[i].CountOnGoing,

        json[i].CountFinished == 0 ? null : json[i].CountFinished

      ]);

    }

 

    return data;

  }

</script>

 

Y eso es todo, al visualizar la página veremos el gráfico de la imagen del inicio.

1 comentario:

  1. El Chart API de google está limitado a #0,000 peticiones x usuario x dia?
    saben eso?

    ResponderEliminar