FlexChart ItemFormatter
The FlexChart's itemFormatter property allows you to specify a callback invoked when chart items are rendered. The callback may customize the item or add new ones using the chart engine's properties and methods.
In this example, the itemFormatter is used to add line segments over periods when the data is increasing:
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 | // This file locates: "Scripts/Lesson/C1FlexChart/ItemFormatter.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); theChart.itemFormatter = function (engine, hitTestInfo, defaultFormat) { var ht = hitTestInfo, binding = 'Downloads' ; // check that this is the right series/element if (ht.series.binding == binding && ht.pointIndex > 0 && ht.chartElement == wijmo.chart.ChartElement.SeriesSymbol) { // get current and previous values var chart = ht.series.chart, items = chart.collectionView.items, valNow = items[ht.pointIndex][binding], valPrev = items[ht.pointIndex - 1][binding]; // add line if value is increasing if (valNow > valPrev) { var pt1 = chart.dataToPoint(ht.pointIndex, valNow), pt2 = chart.dataToPoint(ht.pointIndex - 1, valPrev); engine.drawLine(pt1.x, pt1.y, pt2.x, pt2.y, null , { stroke: 'gold' , strokeWidth: 6, }); } } // render element as usual defaultFormat(); } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: ItemFormatter public ActionResult ItemFormatter() { return View(Models.FlexChartData.GetSales2()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @using LearnMvcClient.Models @model IEnumerable< FlexChartData.Sale > < h1 > @Html .Raw(Resources.C1FlexChart.ItemFormatter_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.ItemFormatter_Text1) </ p > < p > @Html .Raw(Resources.C1FlexChart.ItemFormatter_Text2) </ p > @ (Html.C1().FlexChart< FlexChartData.Sale >().Id( "theChart" ) .Bind( "Country" , Model) .Series(sb => { sb.Add().Binding( "Sales" ).Name( "Sales" ); sb.Add().Binding( "Expenses" ).Name( "Expenses" ); sb.Add().Binding( "Downloads" ).Name( "Downloads" ).ChartType(C1.Web.Mvc.Chart.ChartType.Line); }) ) |