This is a migrated thread and some comments may be shown as answers.

Bar chart with possible empty series values

2 Answers 461 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 15 Oct 2015, 02:16 PM

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.

 

 

 

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 19 Oct 2015, 11:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Terry
Top achievements
Rank 1
answered on 26 Oct 2015, 10:51 AM
Using series.categoryField instead of categoryAxis.field fixed my problem. Thanks!
Tags
Charts
Asked by
Terry
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Terry
Top achievements
Rank 1
Share this question
or