16 de junio de 2015

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.

No hay comentarios:

Publicar un comentario