Bar chart with possible empty series values

[Terry]

Hello

 

I'm currently developing a bar chart with the time on the X-axis and series which can contain empty values for that date. I'm filling the bar chart with data from a database which has a date field for the x-axis, value field for the y-axis and multiple fields for the x-axis depending on the selected series option.

 

Now I've encountered the following problem when working with series: (to get a view on my database open the Data.png attachment)

When I don't have an effective date for a serie (type in my case) in a month the chart will show the data incorrectly. Instead of not displaying the serie on Sep '14 the chart will still show it there (as you see in the Barchart.png indicated with the arrows). As you can see the row for type 'Procurement' for Dec '14 is also not showing.

 

My datasource for my bar chart looks like this:

var dataSource = new kendo.data.DataSource({
            data: rows,
            group: [{
                field: xAxis
            }],
            sort: {
                field: "EffectiveDate",
                dir: "asc"
            },
            schema: {
                model: {
                    fields: {
                        EffectiveDate: {
                            type: "date"
                        },
                        Value: {
                            type: "number"
                        }
                    }
                }
            }
        });

My chart configuration looks like this:

overview = $("#overview").kendoChart({
        theme: "metro",
        dataSource: {
        },
        title: {
            text: "Contract " + selectvalueYaxis + " per " + selectvalueXaxis
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
            field: "Value"
        }],
        valueAxis: {
            labels: {
                format: "{0}",
            }
        },
        categoryAxis: {
            field: "EffectiveDate",
            baseUnit: ""
        },
        tooltip: {
            visible: true,
            format: "{0}",
            color: "white"
        },
        render: function (e) {
            // Clear up the loading indicator for this chart
            kendo.ui.progress($("#overview"), false);
        },
        chartArea: {
            background: "transparent"
        }
    });

How do I configure my datasource to skip these series on the x-axis. Is this not possible in the current version or is my datasource configured wrong?

 

Thanks.

 

 

 

[Iliana Dyankova]

Hello Terry,

The observed outcome is due to the following: 
- By design the categorical charts require a matching set of data points;
- The categories in a grouped chart are created depending on the first series.

In order to achieve the expected result in the current case, you should use series.categoryField instead of categoryAxis.field. I.e.: 

//....
series: [{
   field: "Value",
   categoryAxis: "EffectiveDate"
}],
//....
categoryAxis: {
   baseUnit: ""
},

Regards,
Iliana Nikolova
Telerik

 

 

[Terry]

Using series.categoryField instead of categoryAxis.field fixed my problem. Thanks!