FlexChart
FlexChart
Zones
Features
Sample
Description
Zones
The view creates a scatter chart of student grades, highlighting each grade range using zones.
Set the porperty "OnClientRendering" for FlexChart as a client function name, the zones will be drawn in rendering event of FlexChart in client-side.
Source
ZonesController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Zones()
{
List<Dot> studentPoints = new List<Dot>();
var nStudents = 200;
var nMaxPoints = 1600;
var rand = new Random(0);
for (int i = 0; i < nStudents; i++)
{
studentPoints.Add(new Dot { X = i, Y = nMaxPoints * 0.5 * (1 + rand.Next(0, 10)) });
}
ViewBag.studentPoints = studentPoints;
List<List<Dot>> lineSeriesDataList = new List<List<Dot>>() { };
double mean = FindMean(studentPoints);
double stdDev = FindStdDev(studentPoints, mean);
for (int i = -2; i <= 2; i++)
{
double y = mean + i * stdDev;
List<Dot> seriesData = new List<Dot>() { new Dot { X = 0, Y = y }, new Dot { X = nStudents - 1, Y = y } };
lineSeriesDataList.Add(seriesData);
}
ViewBag.lineSeriesDataList = lineSeriesDataList;
ViewBag.colors = new List<string>() {
"rgba(255,192,192,0.2)",
"rgba(55,328,228,0.5)",
"rgba(255,228,128,0.5)",
"rgba(128,255,128,0.5)",
"rgba(128,128,225,0.5)"
};
List<double> yDatas = new List<double>() { };
for (int i = 0; i < studentPoints.Count; i++)
{
yDatas.Add(studentPoints[i].Y);
}
yDatas.Sort();
List<double> zones = new List<double>() {
yDatas[GetBoundingIndex(yDatas, 0.05)],
yDatas[GetBoundingIndex(yDatas, 0.25)],
yDatas[GetBoundingIndex(yDatas, 0.75)],
yDatas[GetBoundingIndex(yDatas, 0.95)]
};
ViewBag.zones = zones;
return View();
}
private double FindMean(List<Dot> points)
{
double sum = 0;
for (var i = 0; i < points.Count; i++)
{
sum += points[i].Y;
}
return sum / points.Count;
}
private double FindStdDev(List<Dot> points, double mean)
{
double sum = 0;
for (var i = 0; i < points.Count; i++)
{
double d = points[i].Y - mean;
sum += d * d;
}
return Math.Sqrt(sum / points.Count);
}
private int GetBoundingIndex(List<double> points, double frac)
{
double n = points.Count;
int i = (int)Math.Ceiling(n * frac);
while (i > points[0] && points[i] == points[i+1])
i--;
return i;
}
}
}
Zones.cshtml
@using C1.Web.Mvc.Chart
@{
List<Dot> studentPoints = ViewBag.studentPoints;
List<List<Dot>> lineSeriesDataList = ViewBag.lineSeriesDataList;
List<string> colors = ViewBag.colors;
List<double> zones = ViewBag.zones;
}
@section Scripts{
<script type="text/javascript">
function drawAlarmZone(chart, engine, xmin, ymin, xmax, ymax, fill) {
var pt1 = chart.dataToPoint(new wijmo.Point(xmin, ymin));
var pt2 = chart.dataToPoint(new wijmo.Point(xmax, ymax));
engine.fill = fill;
engine.drawRect(Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y), Math.abs(pt2.x - pt1.x), Math.abs(pt2.y - pt1.y));
}
var zones = [
@zones[0],
@zones[1],
@zones[2],
@zones[3],
];
var chartRendering,
colors = ["rgba(255,192,192,0.2)",
"rgba(55,328,228,0.5)",
"rgba(255,228,128,0.5)",
"rgba(128,255,128,0.5)",
"rgba(128,128,225,0.5)"];
chartRendering = function (sender, e) {
for (var i = 0; i < 5; i++) {
var ymin = i == 0 ? sender.axisY.actualMin : zones[i - 1];
var ymax = i == 4 ? sender.axisY.actualMax : zones[i];
drawAlarmZone(sender, e.engine, sender.axisX.actualMin, ymin, sender.axisX.actualMax, ymax, colors[i]);
}
}
</script>
}
<div id="flexChart"></div>
@(Html.C1().FlexChart("#flexChart").Bind("X", studentPoints).ChartType(ChartType.Scatter).Series(sers =>
{
sers.Add().Binding("Y").Name("raw score").SymbolSize(6);
sers.Add().Bind("X", "Y", lineSeriesDataList[0]).ChartType(ChartType.Line).Name("m-2s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("2,2"));
sers.Add().Bind("X", "Y", lineSeriesDataList[1]).ChartType(ChartType.Line).Name("m-1s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("5,1"));
sers.Add().Bind("X", "Y", lineSeriesDataList[2]).ChartType(ChartType.Line).Name("mean").Style(s => s.Stroke("#202020").StrokeWidth(2));
sers.Add().Bind("X", "Y", lineSeriesDataList[3]).ChartType(ChartType.Line).Name("m+1s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("5,1"));
sers.Add().Bind("X", "Y", lineSeriesDataList[4]).ChartType(ChartType.Line).Name("m+2s").Style(s => s.Stroke("#202020").StrokeWidth(2).StrokeDasharray("2,2"));
sers.Add().ChartType(ChartType.Area).Name("A").Style(s => s.Fill(colors[4]).Stroke("transparent"));
sers.Add().ChartType(ChartType.Area).Name("B").Style(s => s.Fill(colors[3]).Stroke("transparent"));
sers.Add().ChartType(ChartType.Area).Name("C").Style(s => s.Fill(colors[2]).Stroke("transparent"));
sers.Add().ChartType(ChartType.Area).Name("D").Style(s => s.Fill(colors[1]).Stroke("transparent"));
sers.Add().ChartType(ChartType.Area).Name("E").Style(s => s.Fill(colors[0]).Stroke("transparent"));
}).OnClientRendering("chartRendering"))
@section Description{
<h3>
Zones
</h3>
<p>@Html.Raw(Resources.FlexChart.Zones_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Zones_Text1)</p>
}
Documentation