|
![]() |
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 Scatter3d()
{
List<Scatter3dSeriesData> list = new List<Scatter3dSeriesData>();
list.Add(new Scatter3dSeriesData { X = 1, Y = 6, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 7, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 1, Y = 3, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 6, Z = 8 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 7, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 9, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 0, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 3, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 9, Z = 8 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 6, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 9, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 3, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 9, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 7, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 7, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 2, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 6, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 6, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 7, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 1, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 8, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 3, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 4, Z = 8 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 5, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 9, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 1, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 4, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 6, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 1, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 8, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 6, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 1, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 2, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 7, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 8, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 4, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 3, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 8, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 5, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 2, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 0, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 1, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 8, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 1, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 7, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 0, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 9, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 4, Z = 8 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 6, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 9, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 7, Y = 6, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 3, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 3, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 9, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 1, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 8, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 0, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 9, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 6, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 3, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 3, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 1, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 1, Y = 1, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 0, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 1, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 8, Z = 8 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 8, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 5, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 9, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 4, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 8, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 1, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 7, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 3, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 8, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 1, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 6, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 9, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 4, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 1, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 9, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 8, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 7, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 4, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 6, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 7, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 5, Z = 4 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 8, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 4, Z = 0 });
list.Add(new Scatter3dSeriesData { X = 2, Y = 2, Z = 6 });
list.Add(new Scatter3dSeriesData { X = 5, Y = 1, Z = 2 });
list.Add(new Scatter3dSeriesData { X = 9, Y = 9, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 9, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 8, Y = 4, Z = 3 });
list.Add(new Scatter3dSeriesData { X = 4, Y = 1, Z = 7 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 2, Z = 5 });
list.Add(new Scatter3dSeriesData { X = 0, Y = 4, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 3, Y = 5, Z = 9 });
list.Add(new Scatter3dSeriesData { X = 6, Y = 9, Z = 1 });
list.Add(new Scatter3dSeriesData { X = 1, Y = 9, Z = 2 });
ViewData["Data"] = list;
return View();
}
}
}
Controller Code
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
// Add mouse events for rotation
$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
eStart = chart.pointer.normalize(eStart);
var posX = eStart.chartX,
posY = eStart.chartY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5; // lower is more sensitive
$(document).on({
'mousemove.hc touchmove.hc': function (e) {
// Run beta
e = chart.pointer.normalize(e);
newBeta = beta + (posX - e.chartX) / sensitivity;
chart.options.chart.options3d.beta = newBeta;
// Run alpha
newAlpha = alpha + (e.chartY - posY) / sensitivity;
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function () {
$(document).off('.hc');
}
});
});
</script>
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering
@{ var chartOptions = new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
Margin = new double[] { 100, 100, 100, 100 },
Type = ChartType.Scatter3d,
Options3d = new ChartOptions3d
{
Enabled = true,
Alpha = 10,
Beta = 30,
Depth = 250,
ViewDistance = 5,
FitToPlot = false,
Frame = new ChartOptions3dFrame
{
Bottom = new ChartOptions3dFrameBottom
{
Size = 1,
Color = "rgba(0,0,0,0.02)",
},
Back = new ChartOptions3dFrameBack
{
Size = 1,
Color = "rgba(0,0,0,0.04)"
},
Side = new ChartOptions3dFrameSide
{
Size = 1,
Color = "rgba(0,0,0,0.06)"
}
}
}
},
Title = new Title
{
Text = "Draggable box"
},
Subtitle = new Subtitle
{
Text = "Click and drag the plot area to rotate in space"
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Max = 10
}
},
XAxis = new List<XAxis>
{
new XAxis
{
Min = 0,
Max = 10,
GridLineWidth = 1
}
},
ZAxis = new ZAxis
{
Min = 0,
Max = 10,
ShowFirstLabel = false
},
Legend = new Legend
{
Enabled = false
},
Series = new List<Series>
{
new Scatter3dSeries
{
Name = "Reading",
Data = ViewData["Data"] as List<Scatter3dSeriesData>
}
}
};
chartOptions.ID = "chart";
var renderer = new HighchartsRenderer(chartOptions);
}
@Html.Raw(renderer.RenderHtml())