FlexChart allows you to customize the appearance of the data points based on their values using ItemFormatter property of the FlexChart class. The ItemFormatter property lets you customize the UI of the control using a JavaScript function.
The image below shows the how the chart appears on customization.
To accomplish this, follow these steps:
Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see Configuring your MVC Application topic.
Back to TopDot.cs
). See Adding controls to know how to add a new model.FlexChartController
).Add a View for the Controller
FlexChartController
to open it.Index()
method.cshtml |
Copy Code
|
---|---|
@using ItemFormatter.Models; @{ List<Dot> cos = new List<Dot>(); for (int i = 0; i < 300; i++) { cos.Add(new Dot { X = 0.16 * i, Y = Math.Cos(0.12 * i) }); } } <script type="text/javascript"> var itemFormatter = function (engine, hitTestInfo, defaultFormat) { if (hitTestInfo.chartElement === wijmo.chart.ChartElement.SeriesSymbol) { var y = hitTestInfo.y; var r = y >= 0 ? 255 : (255 * (1 + y)).toFixed(); var b = y < 0 ? 255 : (255 * (1 - y)).toFixed(); var g = ((1 - Math.abs(y)) * 255).toFixed(); engine.fill = 'rgb(' + r + ',' + g + ',' + b + ')'; defaultFormat(); } }; </script> @(Html.C1().FlexChart() .ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols) .Series(sers => { sers.Add().Bind(cos) .BindingX("X") .Binding("Y") .Name("cos(x)") .TooltipContent("<b>{name}</b> : {value}");}) .Legend(C1.Web.Mvc.Chart.Position.None).ItemFormatter("itemFormatter")) |