Ahora voy a mostrarles como hacer una gráfica de lineas en ASP.Net con Flotcharts.
Como siempre, necesitamos una clase C#. Así que agregamos un espacio de nombres llamado "FlotCharts" con una clase llamada "LineChart", con el siguiente código:
using System.Collections.Generic;
/// <summary>
/// Descripción breve de FlotCharts
/// </summary>
namespace FlotCharts
{
public class LineChart
{
public List<Serie> series = new List<Serie>();
public struct Serie
{
public string label;
public string color;
public List<double[]> data;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lineas.aspx.cs" Inherits="flotcharts_lineas" %>
<!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 type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="http://www.jqueryflottutorial.com/js/flot/jquery.flot.axislabels.js"></script>
<style>
body {
font-family: Verdana;
}
#tooltip {
position: absolute;
display: none;
border: 1px solid #fdd;
padding: 2px;
background-color: #fee;
opacity: 0.80;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
url: "lineas.aspx/GraficaLineas",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var options = {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
mode: "time",
minTickSize: [1, "day"],
timeformat: "%d/%m/%Y",
axisLabel: 'Fecha'
},
yaxis: {
axisLabel: "Total"
},
legend: {
show: true
},
grid: {
hoverable: true,
clickable: true
}
};
var data = JSON.parse(result.d).series;
$.plot($("#line-chart"), data, options);
//Configurar tooltip
$("#line-chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1].toFixed(2);
//Obtener fecha
var date = new Date(x);
var formattedDate = ('0' + date.getUTCDate()).slice(-2) + '/' +
('0' + (date.getUTCMonth() + 1)).slice(-2) + '/' +
date.getUTCFullYear();
$("#tooltip").html("<b>" + item.series.label + "</b><br />" + formattedDate + " = $" + y)
.css({ top: item.pageY + 5, left: item.pageX + 5 })
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
}
});
});
</script>
</head>
<body>
<form id="frmFlotCharts" runat="server">
<div id="line-chart" style="width: 650px; height: 400px; margin: 0 auto"></div>
<div id="tooltip"></div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web.Services;
using FlotCharts;
using System.Web.Script.Serialization;
public partial class flotcharts_lineas : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GraficaLineas()
{
LineChart chart = new LineChart();
//Agregar Datos
chart.series.Add(new LineChart.Serie()
{
label = "Abarrotes",
color = "#FF0000",
data = new List<double[]> {
new double[]{ JSTime(new DateTime(2017, 1, 1)), 2300.85 },
new double[]{ JSTime(new DateTime(2017, 1, 2)), 2500},
new double[]{ JSTime(new DateTime(2017, 1, 3)), 800},
new double[]{ JSTime(new DateTime(2017, 1, 4)), 0}
}
});
//Generar Json
return new JavaScriptSerializer().Serialize(chart);
}
/// <summary>
/// Función para convertir una fecha en
/// Timestamp Javascript
/// </summary>
/// <param name="input">Fecha a convertir</param>
/// <returns></returns>
public static double JSTime(DateTime input)
{
DateTime baseDate = new DateTime(1970, 1, 1);
return input.Subtract(baseDate).TotalMilliseconds;
}
}
No hay comentarios:
Publicar un comentario