Primero, nuestra clase C#:
using System.Collections.Generic;
public class HighChartsLine
{
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;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lineas-multiples.aspx.cs" Inherits="highcharts_lineas_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: "lineas-multiples.aspx/GraficaLineas",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'line',
renderTo: 'line-chart'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},
legend: {
enabled: true
},
xAxis: {
categories: JSON.parse(result.d).categories,
title: {
text: 'Fecha'
}
},
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="line-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.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class highcharts_lineas_multiples : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GraficaLineas()
{
//Crear una instancia de la clase
HighChartsLine chart = new HighChartsLine();
//Agregar categorias
chart.categories.Add("01/01/2017");
chart.categories.Add("02/01/2017");
chart.categories.Add("03/01/2017");
chart.categories.Add("04/01/2017");
//Agregar Datos
chart.data.Add(
new HighChartsLine.Serie()
{
name = "Abarrores",
color = "#FF0000",
data = new List<HighChartsLine.Data>() {
{ new HighChartsLine.Data(){ y=2300.85 } },
{ new HighChartsLine.Data(){ y=2500 } },
{ new HighChartsLine.Data(){ y=800 } },
{ new HighChartsLine.Data(){ y=0 } }
}
}
);
chart.data.Add(
new HighChartsLine.Serie()
{
name = "Lácteos",
color = "#00CC00",
data = new List<HighChartsLine.Data>() {
{ new HighChartsLine.Data(){ y=750 } },
{ new HighChartsLine.Data(){ y=1350 } },
{ new HighChartsLine.Data(){ y=2500 } },
{ new HighChartsLine.Data(){ y=7000 } }
}
}
);
//Generar Json
return new JavaScriptSerializer().Serialize(chart);
}
}
No hay comentarios:
Publicar un comentario