|
![]() |
Controller Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;
namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
public partial class SharedController : Controller
{
public ActionResult HeatMap()
{
List<HeatmapSeriesData> data = new List<HeatmapSeriesData>();
data.Add(new HeatmapSeriesData { X = 0, Y = 0, Value = 10 });
data.Add(new HeatmapSeriesData { X = 0, Y = 1, Value = 19 });
data.Add(new HeatmapSeriesData { X = 0, Y = 2, Value = 8 });
data.Add(new HeatmapSeriesData { X = 0, Y = 3, Value = 24 });
data.Add(new HeatmapSeriesData { X = 0, Y = 4, Value = 67 });
data.Add(new HeatmapSeriesData { X = 1, Y = 4, Value = 92 });
data.Add(new HeatmapSeriesData { X = 1, Y = 1, Value = 58 });
data.Add(new HeatmapSeriesData { X = 1, Y = 2, Value = 78 });
data.Add(new HeatmapSeriesData { X = 1, Y = 3, Value = 117 });
data.Add(new HeatmapSeriesData { X = 1, Y = 4, Value = 48 });
data.Add(new HeatmapSeriesData { X = 2, Y = 0, Value = 35 });
data.Add(new HeatmapSeriesData { X = 2, Y = 1, Value = 15 });
data.Add(new HeatmapSeriesData { X = 2, Y = 2, Value = 123 });
data.Add(new HeatmapSeriesData { X = 2, Y = 3, Value = 64 });
data.Add(new HeatmapSeriesData { X = 2, Y = 4, Value = 52 });
data.Add(new HeatmapSeriesData { X = 3, Y = 0, Value = 72 });
data.Add(new HeatmapSeriesData { X = 3, Y = 1, Value = 132 });
data.Add(new HeatmapSeriesData { X = 3, Y = 2, Value = 114 });
data.Add(new HeatmapSeriesData { X = 3, Y = 3, Value = 19 });
data.Add(new HeatmapSeriesData { X = 3, Y = 4, Value = 16 });
data.Add(new HeatmapSeriesData { X = 4, Y = 0, Value = 38 });
data.Add(new HeatmapSeriesData { X = 4, Y = 1, Value = 5 });
data.Add(new HeatmapSeriesData { X = 4, Y = 2, Value = 8 });
data.Add(new HeatmapSeriesData { X = 4, Y = 3, Value = 117 });
data.Add(new HeatmapSeriesData { X = 4, Y = 4, Value = 115 });
data.Add(new HeatmapSeriesData { X = 5, Y = 0, Value = 88 });
data.Add(new HeatmapSeriesData { X = 5, Y = 1, Value = 32 });
data.Add(new HeatmapSeriesData { X = 5, Y = 2, Value = 12 });
data.Add(new HeatmapSeriesData { X = 5, Y = 3, Value = 6 });
data.Add(new HeatmapSeriesData { X = 5, Y = 4, Value = 120 });
data.Add(new HeatmapSeriesData { X = 6, Y = 0, Value = 13 });
data.Add(new HeatmapSeriesData { X = 6, Y = 1, Value = 44 });
data.Add(new HeatmapSeriesData { X = 6, Y = 4, Value = 88 });
data.Add(new HeatmapSeriesData { X = 6, Y = 3, Value = 98 });
data.Add(new HeatmapSeriesData { X = 6, Y = 4, Value = 96 });
data.Add(new HeatmapSeriesData { X = 7, Y = 0, Value = 31 });
data.Add(new HeatmapSeriesData { X = 7, Y = 1, Value = 1 });
data.Add(new HeatmapSeriesData { X = 7, Y = 2, Value = 82 });
data.Add(new HeatmapSeriesData { X = 7, Y = 3, Value = 32 });
data.Add(new HeatmapSeriesData { X = 7, Y = 4, Value = 30 });
data.Add(new HeatmapSeriesData { X = 8, Y = 0, Value = 85 });
data.Add(new HeatmapSeriesData { X = 8, Y = 1, Value = 97 });
data.Add(new HeatmapSeriesData { X = 8, Y = 2, Value = 123 });
data.Add(new HeatmapSeriesData { X = 8, Y = 3, Value = 64 });
data.Add(new HeatmapSeriesData { X = 8, Y = 4, Value = 84 });
data.Add(new HeatmapSeriesData { X = 9, Y = 0, Value = 47 });
data.Add(new HeatmapSeriesData { X = 9, Y = 1, Value = 114 });
data.Add(new HeatmapSeriesData { X = 9, Y = 2, Value = 31 });
data.Add(new HeatmapSeriesData { X = 9, Y = 3, Value = 48 });
data.Add(new HeatmapSeriesData { X = 9, Y = 4, Value = 91 });
ViewData["heatMapData"] = data;
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
@* Additional chart types, such as "heatmap", are defined in the heatmap.js module *@
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
<script type="text/javascript">
function formatTooltip() {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
</script>
@{var chartOptions = new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
MarginTop = 40,
MarginBottom = 80
},
Title = new Title
{
Text = "Sales per employee per weekday"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Alexander", "Marie", "Maximilian", "Sophia", "Lukas", "Maria", "Leon", "Anna", "Tim", "Laura" }
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Categories = new List<string> { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" }
}
},
Legend = new Legend
{
Layout = LegendLayout.Vertical,
Align = LegendAlign.Right,
VerticalAlign = LegendVerticalAlign.Top,
Y = 25,
SymbolHeight = 280
},
Tooltip = new Tooltip
{
Formatter = "formatTooltip"
},
ColorAxis = new ColorAxis
{
Min = 0,
MinColor = "#FFFFFF",
MaxColor = "#7cb5ec"
},
Series = new List<Series>
{
new HeatmapSeries
{
Name = "Sales per employee",
BorderWidth = 2,
DataLabels = new HeatmapSeriesDataLabels
{
Enabled = true,
Color = "#000000",
},
Data = @ViewData["heatMapData"] as List<HeatmapSeriesData>
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())