Highcharts con ASP.Net (Gráfica de Pastel)

Hola tyros!

Highcharts es uno de los plugin Jquery para crear gráficas mas populares. En las siguientes publicaciones voy a mostrarles como utilizarlo de una manera fácil y escalable.
Comenzaremos aprendiendo a crear una gráfica de pastel, la cual, según mi gusto es la mas fácil.

Paso 1 - Crear una clase base


Highcharts acepta datos en tipo Json, así que utilizaremos "JavaScriptSerializer" de .Net para crear un contenido aceptable por el plug in.

Este es el contenido de la clase:

using System.Collections.Generic;

/// <summary>
/// Descripción breve de HighCharts
/// </summary>  
public class HighChartsPie
{
    public string name;
    public object colorByPoint;
    public List<Data> data = new List<Data>();
    public struct Data {
        public object name;
        public object y;
        public object sliced;
        public object selected;
        public object color;
    }
}


Paso 2 - Crear la página ASP.Net


Ahora, vamos acrear una página ASP.Net llamada "pastel.aspx" con el siguiente código:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pastel.aspx.cs" Inherits="highcharts_pastel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TyroDeveloper</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: 'POST',
                url: "pastel.aspx/GraficaPastel",
                dataType: "json",
                contentType: 'application/json',
                async: false,
                success: function (result) {
                    var options = {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie',
                            renderTo: 'pie-chart'
                        },
                        title: {
                            text: ''
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true
                                },
                                showInLegend: true
                            }
                        },
                        series: [$.parseJSON(result.d)]
                    };
                    var chart = new Highcharts.Chart(options);
                }
            });

        });
    </script>
    <style>
        body {
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <form id="frmChart" runat="server">
        <div>
            <div id="pie-chart" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
        </div>
    </form>
</body>
</html>

A continuación, el código C#:

using System;
using System.Web.Script.Serialization;
using System.Web.Services;
public partial class highcharts_pastel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GraficaPastel()
    {
        //Crear una instancia de la clase
        HighChartsPie chart = new HighChartsPie();
        //Establecer algunas propiedades
        chart.name = "Tipo";
        chart.colorByPoint = true;
        //Agregar 20 fresas
        chart.data.Add(
            new HighChartsPie.Data()
            {
                name = "Fresas",
                y = 20,
                color = "#FF0000"
            }
        );
        //Agregar 5 Manzanas
        chart.data.Add(
            new HighChartsPie.Data()
            {
                name = "Manzanas",
                y = 5,
                color = "#00FF00",
                sliced = true,
                selected=true
            }
        );
        //Generar Json
        return new JavaScriptSerializer().Serialize(chart);
    }
}

Una vez hecho esto, así, este sería el resultado:


Muchas gracias por la visita, no olvides hacer +1

No hay comentarios:

Publicar un comentario