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>
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);
}
}
Muchas gracias por la visita, no olvides hacer +1
No hay comentarios:
Publicar un comentario