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:

// 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();
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: ItemFormatter
        public ActionResult ItemFormatter()
        {
            return View(Models.FlexChartData.GetSales2());
        }
    }
}

@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);
    })
)