Highcharts con ASP.Net (Gráfica de Barras Múltiples)

Hola tyros, en la entrega anterior les mostré como hacer una gráfica de barras simple con Highcharts. Ahora vamos a ver como hacer una gráfica de barras múltiples.

Primeramente, necesitamos una clase C#:

using System.Collections.Generic;
public class HighChartsColumnMultiple {

    public List<string> categories = new List<string>();
    public List<Serie> data = new List<Serie>();

    public struct Serie {
        public string name;
        public string color;
        public List<Data> data;
       
    }
    public struct Data
    {
        public object name;
        public object y;
        public object sliced;
        public object selected;
    }
}


Agregamos una página ASP.Net llamada "barras-multiples.aspx", con el siguiente código:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="barras-multiples.aspx.cs" Inherits="highcharts_barras_multiples" %>

<!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: "barras-multiples.aspx/GraficaBarras",
                dataType: "json",
                contentType: 'application/json',
                async: false,
                success: function (result) {
                    var options = {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'column',
                            renderTo: 'bar-chart'
                        },
                        title: {
                            text: ''
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true
                                },
                                showInLegend: true
                            }
                        },
                        legend: {
                            enabled: true
                        },
                        xAxis: {
                            categories: JSON.parse(result.d).categories,
                            title: {
                                text: 'Meses del Año'
                            },
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Total'
                            }
                        },
                        series: JSON.parse(result.d).data
                    };
                    var chart = new Highcharts.Chart(options);
                }
            });

        });


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

Con el siguiente código C#:

using System;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Web.Services;

public partial class highcharts_barras_multiples : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GraficaBarras()
    {
        //Crear una instancia de la clase
        HighChartsColumnMultiple chart = new HighChartsColumnMultiple();

        //Agregar categorias
        chart.categories.Add("Enero");
        chart.categories.Add("Febrero");

        //Agregar datos
        chart.data.Add(
            new HighChartsColumnMultiple.Serie()
            {
                name = "Fresas",
                color = "#FF0000",
                data = new List<HighChartsColumnMultiple.Data>() {
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Enero",
                            y =20
                        }
                    },
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Febrero",
                            y =12
                        }
                    }
                }
            }
        );

        chart.data.Add(
            new HighChartsColumnMultiple.Serie()
            {
                name = "Manzanas",
                color = "#00FF00",
                data = new List<HighChartsColumnMultiple.Data>() {
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Enero",
                            y =5
                        }
                    },
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Febrero",
                            y =21
                        }
                    }
                }
            }
        );

        chart.data.Add(
            new HighChartsColumnMultiple.Serie()
            {
                name = "Uvas",
                color = "#9900CC",
                data = new List<HighChartsColumnMultiple.Data>() {
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Enero",
                            y =13
                        }
                    },
                    {
                        new HighChartsColumnMultiple.Data(){
                            name="Febrero",
                            y =12
                        }
                    }
                }
            }
        );

        //Generar Json
        return new JavaScriptSerializer().Serialize(chart);
    }
}

Así se ve nuestra gráfica:

No hay comentarios:

Publicar un comentario