FlexChart
FlexChart
Scatter
The sample shows a scatter chart with large data which uses high performance WebGL rendering.
Features
Sample
Settings
Description
The sample shows a scatter chart with large data which uses high performance WebGL rendering.
Source
ScatterController.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; using C1.Web.Mvc.Chart; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { private readonly ControlOptions _options = new ControlOptions { Options = new OptionDictionary { {"Items",new OptionItem{Values = new List<string> {"1000", "10000", "100000", "200000", "500000"},CurrentValue = "100000"}}, {"RenderEngine", new OptionItem {Values = new List<string> {"Svg", "WebGL"}, CurrentValue = "WebGL"}}, } }; public ActionResult Scatter(FormCollection collection) { IValueProvider data = collection; _options.LoadPostData(data); ViewBag.DemoOptions = _options; Random ran = new Random(); var model = Dot.GetData(ran.NextDouble() - 0.5, ran.NextDouble() - 0.5, Convert.ToInt32(_options.Options["items"].CurrentValue), 0.5); return View(model); } } }
Scatter.cshtml
@using C1.Web.Mvc.Chart @model List<Dot> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } <div> @(Html.C1().FlexChart().Id("theChart") .Bind(Model) .ChartType(ChartType.Scatter) .BindingX("X") .Binding("Y") .AxisX(x => { x.Min(-2); x.Max(2); }) .AxisY(y => { y.Min(-2); y.Max(2); y.AxisLine(true); y.MajorGrid(false); }) .RenderEngine((RenderEngine)Enum.Parse(typeof(RenderEngine), optionsModel.Options["RenderEngine"].CurrentValue)) .Series(sers => sers.Add() .Name("Ser 1") .SymbolStyle(x => x.StrokeWidth(0)) .SymbolMarker(Marker.Dot) ) .SupportGestures(cgb => cgb .InteractiveAxes(InteractiveAxes.XY) .MouseAction(MouseAction.Zoom) .ScaleY(1) .PosY(0.5f) .ScaleX(1) .PosX(0.5f)) ) </div> @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) } @section Summary{ @(Html.Raw(Resources.FlexChart.RenderEngine_Description_Text0)) } @section Description{ @(Html.Raw(Resources.FlexChart.RenderEngine_Description_Text0)) }
Documentation