|
|
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 BarNegativeStack()
{
List<double?> maleValues = new List<double?> {
-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
-2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
-2176300, -1329968, -836804, -354784, -90569, -28367, -3878
};
List<double?> femaleValues = new List<double?> {
1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
1447162, 1005011, 330870, 130632, 21208
};
List<BarSeriesData> maleData = new List<BarSeriesData>();
List<BarSeriesData> femaleData = new List<BarSeriesData>();
maleValues.ForEach(p => maleData.Add(new BarSeriesData { Y = p }));
femaleValues.ForEach(p => femaleData.Add(new BarSeriesData { Y = p }));
ViewData["maleData"] = maleData;
ViewData["femaleData"] = femaleData;
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
<script type="text/javascript">
function formatYAxis() {
return (Math.abs(this.value) / 1000000) + '%';
}
function formatToolTip() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
</script>
@{ var chartOptions = new Highcharts
{
Title = new Title
{
Text = "Population pyramid for Germany, midyear 2010"
},
Subtitle = new Subtitle
{
Text = "Source: www.census.gov"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> {
"0-4", "5-9", "10-14", "15-19",
"20-24", "25-29", "30-34", "35-39", "40-44",
"45-49", "50-54", "55-59", "60-64", "65-69",
"70-74", "75-79", "80-84", "85-89", "90-94",
"95-99", "100 + "
},
Reversed = false,
Labels = new XAxisLabels
{
Step = 1
}
},
new XAxis
{
Opposite = true,
Reversed = false,
LinkedTo = 0,
Labels = new XAxisLabels
{
Step =1
},
Categories = new List<string> {
"0-4", "5-9", "10-14", "15-19",
"20-24", "25-29", "30-34", "35-39", "40-44",
"45-49", "50-54", "55-59", "60-64", "65-69",
"70-74", "75-79", "80-84", "85-89", "90-94",
"95-99", "100 + "
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new YAxisTitle
{
Text = null
},
Labels = new YAxisLabels
{
Formatter = "formatYAxis"
},
Min = -4000000,
Max = 4000000
}
},
Legend = new Legend
{
Reversed = true
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
Stacking = PlotOptionsSeriesStacking.Normal
}
},
Tooltip = new Tooltip
{
Formatter = "formatToolTip"
},
Series = new List<Series>
{
new BarSeries
{
Name = "Male",
Data = @ViewData["maleData"] as List<BarSeriesData>
},
new BarSeries
{
Name = "Female",
Data = @ViewData["femaleData"] as List<BarSeriesData>
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())