|
|
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 LineAjax()
{
return View();
}
}
}
Controller Code
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
<script type="text/javascript">
function loadAjaxData() {
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/analytics.csv', function (csv) {
var visitorData = new Array();
var uniquesData = new Array();
var index = csv.indexOf("Sessions") + 9;
var data = csv.substring(index, csv.length);
var dataArray = data.split("\n");
for (var i = 0; i < dataArray.length - 1; i++) {
var value = dataArray[i];
var splitArray = value.split(",\"");
var entry = {
x: new Date(splitArray[0]),
y: parseFloat(splitArray[1].slice(0, -1).replace(",", ""))
}
var uniqueEntry = {
x: new Date(splitArray[0]),
y: parseFloat(splitArray[2].slice(0, -1).replace(",", ""))
}
visitorData.push(entry);
uniquesData.push(uniqueEntry);
}
Highcharts.charts[0].series[0].setData(visitorData, true);
Highcharts.charts[0].series[1].setData(uniquesData, true);
window.setTimeout(function () { Highcharts.charts[0].redraw(); }, 500);
});
}
function handleClick(e) {
console.log(e.point);
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', e.point.x) + ':<br/> ' +
e.point.y + ' visits',
width: 200
});
}
</script>
@{ var chartOptions =
new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
//Events = new ChartEvents
//{
// Load = "loadAjaxData"
//},
Type = ChartType.Line
},
Data = new Data
{
CsvURL = "https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/analytics.csv",
BeforeParse = "function beforeParse(csv) { return csv.replace(/\n\n/g, '\n' ); }"
},
Title = new Title
{
Text = "Daily visits at www.highcharts.com"
},
Subtitle = new Subtitle
{
Text = "Source: Google Analytics"
},
XAxis = new List<XAxis>
{
new XAxis
{
Type = "datetime",
TickInterval = 7 * 24 * 3600 * 1000, // one week
TickWidth = 0,
GridLineWidth = 1,
Labels = new XAxisLabels
{
Align = XAxisLabelsAlign.Left,
X = 3,
Y = -3
},
Crosshair = new XAxisCrosshair
{
Width = 1
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Labels = new YAxisLabels
{
Align = YAxisLabelsAlign.Left,
X = 3,
Y = 16,
Format = "{value:.,0f}"
},
ShowFirstLabel = false
},
new YAxis
{
LinkedTo = 0,
GridLineWidth = 0,
Opposite = true,
Labels = new YAxisLabels
{
Align = YAxisLabelsAlign.Right,
X = 3,
Y = 16,
Format = "{value:.,0f}"
},
ShowFirstLabel = false
}
},
Legend = new Legend
{
Align = LegendAlign.Left,
VerticalAlign = LegendVerticalAlign.Top,
Y = 20,
Floating = true,
BorderWidth = 0
},
Tooltip = new Tooltip
{
Shared = true
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
Cursor = PlotOptionsSeriesCursor.Pointer,
Events = new PlotOptionsSeriesEvents
{
Click = "handleClick"
},
Marker = new PlotOptionsSeriesMarker
{
LineWidth = 1
}
}
},
Series = new List<Series>
{
new LineSeries
{
Color = "black",
Name = "All Visit",
LineWidth = 4,
Marker = new LineSeriesMarker
{
Radius = 4
}
},
new LineSeries
{
Name = "New Visitors"
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())