Conditional Styling in FlexChart

FlexChart has an itemFormatter property that gives you control over the look of your chart and how data is displayed in it. You can use JavaScript to customize, validate and categorize data points in a chart.

The following image shows how the FlexChart appears after using itemFormatter property to categorize Cos X values bound to Y axis. This displays values that are less than 0 in blue; and more than 0 in red. The example uses ApplicationData.Maths data from a local database file ApplicationData.mdf.

To write code in JavaScript:

JavaScript	Copy Code
myapp.ChartConditionalStyling.FlexChart_render = function (element, contentItem) { var chart = new c1.cba.FlexChart($(element), contentItem); var collectionView = new c1.cba.LightSwitchCollectionView(contentItem); chart.wjControl.itemsSource = collectionView; chart.wjControl.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(); } }; };

JavaScript

Copy Code

myapp.ChartConditionalStyling.FlexChart_render = function (element, contentItem) {
        var chart = new c1.cba.FlexChart($(element), contentItem);
        var collectionView = new c1.cba.LightSwitchCollectionView(contentItem);
        chart.wjControl.itemsSource = collectionView;
        chart.wjControl.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();
                }
        };
};