|
|
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 ColumnParsed()
{
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
@*When loading data from HTML <table> you need to add the data.js module*@
<script src="https://code.highcharts.com/modules/data.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 formatTooltip() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
</script>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
@{ var chartOptions = new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
Type = ChartType.Column
},
Data = new Data
{
Table = "datatable"
},
Title = new Title
{
Text = "Data extracted from a HTML table in the page"
},
YAxis = new List<YAxis>
{
new YAxis
{
AllowDecimals = false,
Title = new YAxisTitle
{
Text = "Units"
}
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())