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>
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);
}
}
No hay comentarios:
Publicar un comentario