Conditionally Load Data in WijBarChart

DESCRIPTION

All the chart widgets which are offered by Wijmo have their own unique style and are flexible enough to fit in different scenarios. When we talk about a chart, it cannot be just restricted to data which is being displayed on the chart. A user may want to switch between data so that he can analyze different sets of information quickly. In this blog article we are taking the example of WijBarChart. The implementation idea is pretty simple which is to switch between different sets of data when user demands it. As we know, if we wish to display some data in a chart, we need to create a series that holds all the data points which represents one set of information. So this implementation relies on the idea of switching between different chart series using a WijComboBox. The series names are added to the WijComboBox and the user may select the series to be displayed on the chart. Here is a quick view of the functionality which we will end up achieving at the end of the blog post:

IMPLEMENTATION

The first and obvious thing is to define the chart markup and convert it to WijBarChart. I am skipping this code here as it is similar to what the common practice is for creating a WijBarChart. So basically we are defining all the series and data here. The only catch here is that we are setting the initial visibility for all the series to false so that they do not load initially. Also we need to ensure that the "hint" property is disabled, else it will be displayed even with an empty chart. Our point of interest is how we can switch between different chart series and since we are using WijComboBox, the "selectedIndexChanging" event is the most appropriate to handle this. We will set the chart series names as the WijComboBox data so that user can easily select the series to be displayed. In addition to this, we will also ensure that each series has a different style when the selection is made. Here is how the code looks like:

    var staticSeries = [];  
    var count = 0;  
    $("#tagsinput").wijcombobox(  
    {  
        showingAnimation: { effect: "blind" },  
        hidingAnimation: { effect: "blind" },  
        selectedIndex: -1,  
        data: [  
                {  
                    label: 'West',  
                    value: 'West'  
                },  
                {  
                    label: 'Central',  
                    value: 'Central'  
                },  
                {  
                    label: 'East',  
                    value: 'East'  
                }  
            ],  
        selectedIndexChanging: function (e, args) {  
            var color;  
            switch (args.newIndex) {  
                case 0: color = "Red"  
                    break;  
                case 1: color = "Blue"  
                    break;  
                case 2: color = "Orange"  
            };  
            count++;  
            var series = $("#wijbarchart").wijbarchart('option', 'seriesList')  
            if (count === 1) {  
                staticSeries = series;  
            }  
            staticSeries[args.newIndex].visible = true;  
            staticSeries[args.newIndex].legendEntry = true;  
            $("#wijbarchart").wijbarchart('option', 'seriesList', [staticSeries[args.newIndex]]);  
            $("#wijbarchart").wijbarchart({  
                hint: {  
                    enable: true  
                },  
                seriesStyles: [{  
                    fill: color, stroke: color  
                }]  
            });  
            $("#wijbarchart").wijbarchart('redraw');  
        }  
    });

That is all we need. To get a better idea of the implementation, a working sample application can be downloaded from the link provided below: Download Sample