FlexChart
FlexChart
Series Customization
This view demonstrates how you can customize specific series of FlexChart.
Features
Description
This view demonstrates how you can customize specific series of FlexChart.
The first series (Cos(x)) uses default setting to draw.
The second series (Sin(x)):
- Uses ItemFormater property of series as a function to customize the appearance of the data points calcutated based on their values being plotted.
- Uses TooltipContent property of series to customize the content of tooltip showing when move mouse on it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult SeriesCustomization() { return View(); } } } |
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | @{ List<Dot> data1 = new List<Dot>(); List<Dot> data2 = new List<Dot>(); for (int i = 0; i < 300; i++) { data1.Add(new Dot { X = 0.2 * i, Y = Math.Cos(0.1 * i) }); data2.Add(new Dot { X = 0.3 * i, Y = Math.Sin(0.15 * i) }); } } @section Scripts{ <script type="text/javascript"> var seriesItemFormatter = function (engine, hitTestInfo, defaultFormat) { if (hitTestInfo.chartElement == wijmo.chart.ChartElement.SeriesSymbol) { var y = hitTestInfo.y; var g = y >= 0 ? 255 : (255 * (1 + y)).toFixed(); var b = y < 0 ? 255 : (255 * (1 - y)).toFixed(); var r = ((1 - Math.abs(y)) * 255).toFixed(); engine.fill = 'rgb(' + r + ',' + g + ',' + b + ')'; engine.stroke = 'rgb(' + (255 - r) + ',' + (255 - g) + ',' + (255 - b) + ')'; engine.strokeWidth = 1; defaultFormat(); } }; </script>} <c1-flex-chart id="chartDemo" chart-type="Bubble" legend-position="None" height="400px"> <c1-flex-chart-series binding-x="X" binding="Y" name="cos(x)"> <c1-items-source source-collection="data1"></c1-items-source> </c1-flex-chart-series> <c1-flex-chart-series binding-x="X" binding="Y" name="sin(x)" item-formatter="seriesItemFormatter" tooltip-content="<b>Sin(x)</b>:<i><br>Item formatter,<br>Custom tooltip content</i>"> <c1-items-source source-collection="data2"></c1-items-source> </c1-flex-chart-series> </c1-flex-chart> @section Description{ <p>@Html.Raw(FlexChartRes.SeriesCustomization_Text0)</p> <p>@Html.Raw(FlexChartRes.SeriesCustomization_Text1)</p> <p>@Html.Raw(FlexChartRes.SeriesCustomization_Text2)</p> <ul> <li>@Html.Raw(FlexChartRes.SeriesCustomization_Text3)</li> <li>@Html.Raw(FlexChartRes.SeriesCustomization_Text4)</li> </ul> } |