Grouped Data doesn't display as expected

[Doug]

I have data that looks like this coming out of SQL Server and being returned to my UI via JSON

 

OrderCount | SubmittedDate | OrderStatus

5                  | 05/01/2018       | Hold

1                  | 05/02/2018       | In Process

1                  | 05/02/2018       | Pending

 

What I am trying to achieve is to have a chart that displays the order status count by day so

• along the X-Axis I want to see 05/01/2018 and 05/02/2018 (SubmittedDate)
• along the Y-Axis I want to see Order Counts
• and the values for each bin would be the various statuses 

So with my example data I would expect to have a bin for 05/01/2018 that shows a column that represents my hold status that indicates a count of 5.  On 05/02/2018 I would expect the bin to have 2 columns: a column with a count of 1 for In Process and a column with a count of 1 for Pending.  I haven't been able to figure out how to configure the chart to make this work properly and, something else that is weird, the chart only displays one of the data points for 05/02 regardless of how I manipulate the code. 

var ds = new kendo.data.DataSource({
    data: data,
    group: {
        field: "SubmittedDate"
    },
    schema: {
        model: {
            fields: {
                SubmittedDate: {
                    type: "date"
                },
                OrderCount: {
                    type: "number"
                },
                OrderStatus: {
                    type: "string"
                }
            }
        }
    }
});
$("#columnChart").kendoChart({
    dataSource: ds,
    legend: {
        position: "bottom"
    },
    series: [{
        type: "column",
        field: "OrderCount",
        categoryField: "OrderStatus"
    }]
});

 

If it matters the date field is represented as MM/dd/yyyy in the JSON object. Any help would be greatly appreciated!  

 

 

[Doug]

The above issue had to do with my underlying data not returning what I expected, however I am still facing an issue.  The following code gives me the output that I want:

 

var ds = new kendo.data.DataSource({
    data: data,
    group: {
        field: "OrderStatus"
    },
    schema: {
        model: {
            fields: {
                SubmittedDate: {
                    type: "date"
                },
                OrderCount: {
                    type: "number"
                },
                OrderStatus: {
                    type: "string"
                }
            }
        }
    }
});
$("#columnChart").kendoChart({
    dataSource: ds,
    legend: {
        position: "bottom"
    },
    series: [{
        type: "column",
        field: "OrderCount",
        categoryField: "SubmittedDate"
    }]
});

 

Except that in my real data, my dates aren't sequential like shown above, they look like this:

 

OrderCount | SubmittedDate | OrderStatus
5                  | 05/01/2018       | Hold
1                  | 05/04/2018       | In Process
1                  | 05/04/2018       | Pending

 

When my chart gets displayed the dataSource now contains entries for 05/02 and 05/03 despite the fact that there isn't data in the data set to represent that.  Is there anyway to prevent that behavior? 

[Tsvetina]

Hello Doug,

Do you mean that there are actual values displayed for the missing dates or that there are categories in the Chart, representing the months with missing values that do not have series drawn in them? If it is the latter, this is expected behavior in a Date category axis.

If your category data contains Date objects, the Chart automatically switches to a date category axis, meaning that it draws continuous date categories that cover the period of time included in your data. You can prevent this behavior by explicitly setting the categoryAxis.type property to "category". With this settings applied, the Chart will treat your dates as discrete category values.

Regards,
Tsvetina
Progress Telerik