FlexChart
FlexChart
Scatter
The sample shows a scatter chart with large data which uses high performance WebGL rendering.
Features
Settings
Description
The sample shows a scatter chart with large data which uses high performance WebGL rendering.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | using System; using System.Collections.Generic; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; 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(IFormCollection collection) { _options.LoadPostData(collection); 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); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | @using C1.Web.Mvc.Chart @model List<Dot> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } <c1-flex-chart id="theChart" chart-type="Scatter" binding-x="X" binding="Y" render-engine="@((RenderEngine)Enum.Parse(typeof(RenderEngine), optionsModel.Options["RenderEngine"].CurrentValue))"> <c1-flex-chart-axis c1-property="AxisX" min="-2" max="2"></c1-flex-chart-axis> <c1-flex-chart-axis c1-property="AxisY" min="-2" max="2" axis-line="true" major-grid="false"></c1-flex-chart-axis> <c1-flex-chart-series name="Ser 1" symbol-marker="Dot"></c1-flex-chart-series> <c1-items-source source-collection="Model"></c1-items-source> <c1-chart-gestures mouse-action="Zoom" interactive-axes="XY" scale-x="1" scale-y="1" pos-x="0.5f" pos-y="0.5f"></c1-chart-gestures> </c1-flex-chart> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary{ @(Html.Raw(FlexChartRes.RenderEngine_Description_Text0)) } @section Description{ @(Html.Raw(FlexChartRes.RenderEngine_Description_Text0)) } |