|
|
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 Column3DStackingGrouping()
{
List<double?> johnValues = new List<double?> { 5, 3, 4, 7, 2 };
List<double?> janeValues = new List<double?> { 2, 5, 6, 2, 1 };
List<double?> joeValues = new List<double?> { 3, 4, 4, 2, 5 };
List<double?> janetValues = new List<double?> { 3, 0, 4, 4, 3 };
List<ColumnSeriesData> johnData = new List<ColumnSeriesData>();
List<ColumnSeriesData> janeData = new List<ColumnSeriesData>();
List<ColumnSeriesData> joeData = new List<ColumnSeriesData>();
List<ColumnSeriesData> janetData = new List<ColumnSeriesData>();
johnValues.ForEach(p => johnData.Add(new ColumnSeriesData { Y = p }));
janeValues.ForEach(p => janeData.Add(new ColumnSeriesData { Y = p }));
joeValues.ForEach(p => joeData.Add(new ColumnSeriesData { Y = p }));
janetValues.ForEach(p => janetData.Add(new ColumnSeriesData { Y = p }));
ViewData["johnData"] = johnData;
ViewData["janeData"] = janeData;
ViewData["joeData"] = joeData;
ViewData["janetData"] = janetData;
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
@*All Highcharts 3D charts requires the highcharts-3rd.js module*@
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
@{ var chartOptions = new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
Options3d = new ChartOptions3d
{
Enabled = true,
Alpha = 15,
Beta = 15,
Depth = 40,
ViewDistance = 25
}
},
Title = new Title
{
Text = "Total fruit consumption, grouped by gender"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Apples", "Oranges", "Pears", "Grapes", "Bananas" }
}
},
YAxis = new List<YAxis>
{
new YAxis
{
AllowDecimals = false,
Min = 0,
Title = new YAxisTitle
{
Text = "Number of Fruit"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<b>{point.key}</b><br>",
PointFormat = "<span style=\"color:{series.color}\">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}"
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
Depth = 40
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "John",
Data = @ViewData["johnData"] as List<ColumnSeriesData>,
Stack = "male"
},
new ColumnSeries
{
Name = "Jane",
Data = @ViewData["janeData"] as List<ColumnSeriesData>,
Stack = "female"
},
new ColumnSeries
{
Name = "Joe",
Data = @ViewData["joeData"] as List<ColumnSeriesData>,
Stack = "male"
},
new ColumnSeries
{
Name = "Janet",
Data = @ViewData["janetData"] as List<ColumnSeriesData>,
Stack = "female"
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())