Google Charts con ASP.NET (Gráfica de Barras)

Hola tyros, continuando con nuestros ejemplos, les presento la manera de crear una gráfica de barras verticales con ASP.Net y Google Charts.

Ver versión para PHP

Para este ejemplo, vamos a establecer el color de cada barra.

Nota: Se requiere la clase "Charts" que utilizamos en el ejercicio anterior:


using System.Collections.Generic;
public class Charts
{
    public List<ChartColumn> cols = new List<ChartColumn>();
    public List<ChartRow> rows = new List<ChartRow>();
    public struct ChartColumn
    {
        public string id;
        public string label;
        public string pattern;
        public string type;
        public string role;
    }
    public struct ChartRow
    {
        public List c;
    }
    public struct ChartRowValue
    {
        public object v;
        public object f;
    }
    public void AddColumn(ChartColumn col) { cols.Add(col); }
    public void AddRow(ChartRow row) { rows.Add(row); }
}


Creamos una página asp.net con el nombre "barras.aspx", con este código:

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

<!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.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        google.charts.load('current', { 'packages': ['corechart'] });

        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            //Barras
            $.ajax({
                type: 'POST',
                url: "barras.aspx/GraficaBarras",
                dataType: "json",
                contentType: 'application/json',
                async: false,
                success: function (result) {
                    var data = new google.visualization.DataTable(result.d);
                    var options = {
                        title: '',
                        hAxis: {
                            title: 'Productos'
                        },
                        vAxis: {
                            title: 'Total'
                        },
                        legend: { position: 'none' },
                        backgroundColor: { fill: 'transparent' },
                        'height': 300
                    };
                    target = document.getElementById('bar-chart');
                    var chart = new google.visualization.ColumnChart(target);
                    chart.draw(data, options);
                }
            });

        }
    </script>
    <style>
        body {
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <form id="frmChart" runat="server">
        <div>
            <div id="bar-chart"></div>
        </div>
    </form>
</body>
</html>


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

    }
    [WebMethod]
    public static string GraficaBarras()
    {

        Charts chart = new Charts();
        //Agregar columnas
        chart.cols.Add(new Charts.ChartColumn()
        {
            id = "",
            label = "Tipo",
            pattern = "",
            type = "string"
        });//col1
        chart.cols.Add(new Charts.ChartColumn()
        {
            id = "",
            label = "Total",
            pattern = "",
            type = "number"
        });//col2
        chart.cols.Add(new Charts.ChartColumn()
        {
            type = "string",
            role = "style"
        });//col3 (Estilo)

        //Agregar datos
        //Agregar 20 Fresas
        chart.rows.Add(new Charts.ChartRow()
        {
            c = new List<Charts.ChartRowValue>() {
                { new Charts.ChartRowValue() { v = "Fresas" } },
                { new Charts.ChartRowValue() { v = 20 } },
                { new Charts.ChartRowValue() { v = "color: #FF0000" } }
            }
        });
        //Agregar 5 Manzanas
        chart.rows.Add(new Charts.ChartRow()
        {
            c = new List<Charts.ChartRowValue>() {
                { new Charts.ChartRowValue() { v = "Manzanas" } },
                { new Charts.ChartRowValue() { v = 5 } },
                { new Charts.ChartRowValue() { v = "color: #00CC00" } }
            }
        });

        //Agregar 13 Uvas
        chart.rows.Add(new Charts.ChartRow()
        {
            c = new List<Charts.ChartRowValue>() {
                { new Charts.ChartRowValue() { v = "Uvas" } },
                { new Charts.ChartRowValue() { v = 13 } },
                { new Charts.ChartRowValue() { v = "color: #9900CC" } }
            }
        });
        //Convertir clase a Json
        return new JavaScriptSerializer().Serialize(chart);

    }
}


Así se ve:

1 comentario:

  1. Marca error en estas líneas
    chart.rows.Add(new Charts.ChartRow()
    {
    c = new List() {
    { new Charts.ChartRowValue() { v = "Fresas" } },
    { new Charts.ChartRowValue() { v = 20 } },
    { new Charts.ChartRowValue() { v = "color: #FF0000" } }
    }
    });

    Compiler Error CS0029
    Article
    09/15/2021
    10 contributors
    Cannot implicitly convert type 'type' to 'type'

    The compiler requires an explicit conversion. For example, you may need to cast an r-value to be the same type as an l-value. Or, you must provide conversion routines to support certain operator overloads.

    Alguén me puede apoyar?, por favor!

    ResponderEliminar