|
|
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 ColumnBasic()
{
List<double> tokyoValues = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 };
List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 };
List<double> berlinValues = new List<double> { 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1 };
List<double> londonValues = new List<double> { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 };
List<ColumnSeriesData> tokyoData = new List<ColumnSeriesData>();
List<ColumnSeriesData> nyData = new List<ColumnSeriesData>();
List<ColumnSeriesData> berlinData = new List<ColumnSeriesData>();
List<ColumnSeriesData> londonData = new List<ColumnSeriesData>();
tokyoValues.ForEach(p => tokyoData.Add(new ColumnSeriesData { Y = p }));
nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p }));
berlinValues.ForEach(p => berlinData.Add(new ColumnSeriesData { Y = p }));
londonValues.ForEach(p => londonData.Add(new ColumnSeriesData { Y = p }));
ViewData["tokyoData"] = tokyoData;
ViewData["nyData"] = nyData;
ViewData["berlinData"] = berlinData;
ViewData["londonData"] = londonData;
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.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
{
Title = new Title
{
Text = "Monthly Average Rainfall"
},
Subtitle = new Subtitle
{
Text = "Source: WorldClimate.com"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> {
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Rainfall (mm)"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.1f} mm</b></td></tr>",
FooterFormat = "</table>",
Shared = true,
UseHTML = true
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
AnimationBool = false
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "Tokyo",
Data = @ViewData["tokyoData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "New York",
Data = @ViewData["nyData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Berlin",
Data = @ViewData["berlinData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "London",
Data = @ViewData["londonData"] as List<ColumnSeriesData>
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())