|
|
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 TreemapWithLevels()
{
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
@* Additional chart types, such as "treemap", are defined in the treemap.js module *@
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
@using System.Collections
@{ var chartOptions =
new Highcharts
{
Title = new Title
{
Text = "Fruit Consumption"
},
Series = new List<Series>
{
new TreemapSeries
{
LayoutAlgorithm = TreemapSeriesLayoutAlgorithm.Stripes,
AlternateStartingDirection = true,
Levels = new List<TreemapSeriesLevels>
{
new TreemapSeriesLevels
{
Level = 1,
LayoutAlgorithm = TreemapSeriesLevelsLayoutAlgorithm.SliceAndDice,
DataLabels = new TreemapSeriesDataLabels()
{
Enabled = true,
Align = TreemapSeriesDataLabelsAlign.Left,
VerticalAlign = TreemapSeriesDataLabelsVerticalAlign.Top,
Style = new Hashtable() {{"fontSize", "15px"},{"fontWeight", "bold" }}
}
}
},
Data = new List<TreemapSeriesData>
{
new TreemapSeriesData { Id = "A", Name = "Apples", Color = "#EC2500" },
new TreemapSeriesData { Id = "B", Name = "Bananas", Color = "#ECE100" },
new TreemapSeriesData { Id = "O", Name = "Oranges", Color = "#EC9800" },
new TreemapSeriesData { Parent = "A", Name = "Anne", Value = 5 },
new TreemapSeriesData { Parent = "A", Name = "Rick", Value = 3},
new TreemapSeriesData { Parent = "A", Name = "Peter", Value = 4},
new TreemapSeriesData { Parent = "B", Name = "Anne", Value = 4},
new TreemapSeriesData { Parent = "B", Name = "Rick", Value = 10},
new TreemapSeriesData { Parent = "B", Name = "Peter", Value = 1},
new TreemapSeriesData { Parent = "O", Name = "Anne", Value = 1},
new TreemapSeriesData { Parent = "O", Name = "Rick", Value = 3},
new TreemapSeriesData { Parent = "O", Name = "Peter", Value = 3},
new TreemapSeriesData { Parent = "Kiwi", Name = "Susanne", Value = 2, Color = "#9EDE00"}
}
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())