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.

How To: Gráfico de Tarta de Google

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

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

@model List<ProgramInfo>

La clase (ProgramInfo) debe tener al menos estas 2 propiedades:

        public string Name { get; set; }

 public int CountAll { get; set; }

 

El HTML:

        <section class="panel">

            <div class="panel-body">

                <div id="piechartGoogle"></div>

            </div>

        </section>

 

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 arrBase = fnGetJsonData();

     var data = google.visualization.arrayToDataTable(arrBase);

     fnDisplayPieChartBase('piechartGoogle', data, 'Projects by Programs');

   }

 

   function fnDisplayPieChartBase(idDomElemnt, data, titleBase) {

     var options = { title: titleBase };

     var chart = new google.visualization.PieChart( document.getElementById(idDomElemnt));

     chart.draw(data, options);

   }

  

   function fnGetJsonData() {

     var json = @Html.Raw(Json.Encode(@Model.Select(x => new { x.Name, x.CountAll })));

 

     var arrResult = [];

     arrResult.push(['Program', 'Count']);

 

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

       arrResult.push([json[i].Name, json[i].CountAll]);

     }

     return arrResult;

   }

 

</script>

 

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