Flotcharts con ASP.Net (Gráfica de Barras)

Hola tyros!,

Ahora les mostraré como hacer una gráfica de barras con Flotcharts y ASP.Net.

Lo primero que necesitamos es una clase C#. Así que agregamos un espacio de nombres llamado "FlotCharts" con una clase llamada "BarChart", con el siguiente código:

using System.Collections.Generic;
/// <summary>
/// Descripción breve de FlotCharts
/// </summary>
namespace FlotCharts
{
    public class BarChart
    {
        public object[] categories;
        public List<Serie> series = new List<Serie>();
        public struct Serie
        {
            public string label;
            public string color;
            public List<double[]> data;
        }
    }
}

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

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

<!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 type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
    <script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.axislabels.js"></script>
    <style>
        body {
            font-family: Verdana;
        }

        #tooltip {
            position: absolute;
            display: none;
            border: 1px solid #fdd;
            padding: 2px;
            background-color: #fee;
            opacity: 0.80;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            $.ajax({
                type: 'POST',
                url: "barras-simples.aspx/GraficaBarras",
                dataType: "json",
                contentType: 'application/json',
                async: false,
                success: function (result) {
                    var options = {
                        series: {
                            bars: { show: true }
                        },
                        bars: {
                            align: "center",
                            barWidth: 0.5
                        },
                        xaxis: {
                            ticks: JSON.parse(result.d).categories,
                            axisLabel: 'Productos'
                        },
                        yaxis: {
                            axisLabel: "Total"
                        },
                        legend: {
                            show: true
                        },
                        grid: {
                            hoverable: true,
                            clickable: true
                        }
                    };
                    var data = JSON.parse(result.d).series;
                    $.plot($("#bar-chart"), data, options);
                    //Configurar tooltip
                    $("#bar-chart").bind("plothover", function (event, pos, item) {
                        if (item) {
                            var x = item.datapoint[0].toFixed(2),
                                y = item.datapoint[1].toFixed(2);
                            //Obtener fecha
                            $("#tooltip").html("<b>" + item.series.label + "</b> = " + y)
                                .css({ top: item.pageY + 5, left: item.pageX + 5 })
                                .fadeIn(200);
                        } else {
                            $("#tooltip").hide();
                        }

                    });
                }
            });
        });
    </script>
</head>
<body>
    <form id="frmFlotCharts" runat="server">
        <div id="bar-chart" style="width: 650px; height: 400px; margin: 0 auto"></div>
        <div id="tooltip"></div>
    </form>
</body>
</html>

Con el siguiente código C#:

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

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

    }
    [WebMethod]
    public static string GraficaBarras()
    {

        BarChart chart = new BarChart();
        chart.categories = new object[]{
            new object[]{ 0,"Fresas"},
            new object[]{ 1,"Manzanas"},
            new object[]{ 2,"Uvas"}
        };
        //Agregar Datos
        chart.series.Add(new BarChart.Serie()
        {
            label = "Fresas",
            color = "#FF0000",
            data = new List<double[]>() { new double[] { 0, 20 } }
        });
        chart.series.Add(new BarChart.Serie()
        {
            label = "Manzanas",
            color = "#00CC00",
            data = new List<double[]>() { new double[] { 1, 5 } }
        });
        chart.series.Add(new BarChart.Serie()
        {
            label = "Uvas",
            color = "#9900CC",
            data = new List<double[]>() { new double[] { 2, 13 } }
        });

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

Así se ve nuestra gráfica:

No hay comentarios:

Publicar un comentario