|
|
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 Pyramid()
{
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
@* The Pyramid chart is essentially a customized funnel chart. Funnel charts requires the funnel.js add-on *@
<script src="https://code.highcharts.com/modules/funnel.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
{
MarginRight = 100
},
Title = new Title
{
Text = "Sales funnel",
X = -50
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
DataLabels = new PlotOptionsSeriesDataLabels
{
Enabled = true,
Format = "<b>{point.name}</b> ({point.y:,.0f})",
Color = "black"
}
}
},
Legend = new Legend
{
Enabled = false
},
Series = new List<Series>
{
new PyramidSeries
{
Name = "Unique users",
Data = new List<PyramidSeriesData> {
new PyramidSeriesData{ Name = "Website visits", Y = 15654 },
new PyramidSeriesData{ Name = "Downloads", Y = 4064 },
new PyramidSeriesData{ Name = "Requested price list", Y = 1987 },
new PyramidSeriesData{ Name = "Invoice Sent", Y = 976 },
new PyramidSeriesData{ Name = "Finalized", Y = 846 }
}
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())