Para comenzar, necesitamos nuestra clase C#, la cual utilizaremos para crear un contenido Json:
using System.Collections.Generic;
public class HighChartsColumnSimple
{
public List<string> categories = new List<string>();
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;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="barras-simples.aspx.cs" Inherits="highcharts_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 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-simples.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: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},
legend: {
enabled: false
},
xAxis: {
categories: JSON.parse(result.d).categories,
title: {
text: 'Frutas'
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
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="bar-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_barras_simples : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GraficaBarras()
{
//Crear una instancia de la clase
HighChartsColumnSimple chart = new HighChartsColumnSimple();
//Agregar categorias
chart.categories.Add("Fresas");
chart.categories.Add("Manzanas");
//Agregar 20 fresas
chart.data.Add(
new HighChartsColumnSimple.Data()
{
name = "Fresas",
y = 20,
color = "#FF0000"
}
);
//Agregar 5 Manzanas
chart.data.Add(
new HighChartsColumnSimple.Data()
{
name = "Manzanas",
y = 5,
color = "#00FF00"
}
);
//Generar Json
return new JavaScriptSerializer().Serialize(chart);
}
}
No hay comentarios:
Publicar un comentario