MVVM - Multiple Series with category axis

[Matt]

I have a chart with multiple series (See attached).
I want to list the dates from the series available in the same data.
The problem im experiencing is selecting a category axis value. Setting it on any of the series causes all of the series to not show, but the dates do for all rows.

Json data:

01.[{
02."InStore":{"OrderCount":0,"Sales":0,"Canceled":null},
03."Collection":{"OrderCount":31,"Sales":28290,"Canceled":null},
04."Delivery":{"OrderCount":10,"Sales":15883,"Canceled":null},
05."Combined":{"OrderCount":41,"Sales":44173,"Canceled":1},
06."Date":"\/Date(1381964400000)\/"},
07.{"InStore":{"OrderCount":0,"Sales":0,"Canceled":null},"Collection":{"OrderCount":49,"Sales":31990,"Canceled":null},
08."Delivery":{"OrderCount":18,"Sales":36463,"Canceled":null}
09.…
10.}]

Within this data the chart has 4 series:
Combined.OrderCount;
Collection.OrderCount;
Delivery.OrderCount;
Combined: Sales

for those series I want to use the 'Date' field.
The HTML looks like this:

01.<div class="chart-wrapper" data-role="chart"
02.                data-title="Order Details"
03.                data-theme="bootstrap"
04.                data-legend="{ position: 'bottom' }"
05.                data-series-defaults="{ type: 'line' }"
06.@*                data-category-axis="{
07.                    field: 'Date',
08.                    baseUnit: 'day',
09.                    type: 'date',
10.                    labels: {
11.                        rotation: -90
12.                    },
13.                    majorGridLines: {
14.                        visible: false
15.                    }
16.                }"*@
17.@*                data-category-axis="{
18.                    categories: [1,2,3,4,5,6,7]
19.                }"*@
20.                data-category-axis="{
21.                    labels: { rotation: -90, template: 'Hello' }
22.                }"
23.                data-value-axis="[
24.                    { name: 'orderCount', title: { text: 'Orders' } },
25.                    { name: 'sales', title: { text:'Sales' } }
26.                ]"
27.                data-tooltip="{
28.                    visible: true,
29.                    template: '<div>#: kendo.toString(dataItem.Date, \'dddd\') # #: kendo.toString(dataItem.Date, \'d\')#</div><div>Order Count:#: value #</div>'
30.                }"
31.                data-group="{field:Date}"
32.                data-series="[
33.                    { 'name': 'OrderCount', 'field': 'Combined.OrderCount', 'axis': 'orderCount' },
34.                    { 'name': 'Delivery', 'field': 'Delivery.OrderCount', 'axis':'orderCount', 'type': 'column', 'stack': 'true' },
35.                    { 'name': 'Collection', 'field': 'Collection.OrderCount', 'axis': 'orderCount', 'type': 'column', 'stack': 'true' },
36.                    { 'name': 'Sales', 'field': 'Combined.Sales', 'axis': 'sales', 'type': 'area' }
37.                ]"
38.                data-bind="source: dataSource">
39.            </div>

Any ideas? Setting the categories manually works but I don't want to do it this way as it will be more to maintain and more effort over more charts.

Additionally - why does the legend disappear after the chart gets its data?

Thanks, Matt

[Alexander Popov]

Hi Matthew,

I am not sure I understand what exactly you want to achieve, however using the first category axis configuration displays the dates on the x axis, as seen in this example.
If this is not what you want, please provide more details on your scenario and a runnable project with sample data.

Regards,
Alexander Popov
Telerik

[Matt]

Hi Alex
Your sample works exactly how I would like it :) thank you. Changing the example to version 2013.2.716 (the version im using) it breaks the series. Its good to know a newer version seems to work. Now i just need to work out what is causing the exception on a variable called 'p' (when i update my work version). I'll grab a internal build and double check with the source.

Thanks,
Matt

[Matt]

Here is the more upto date version of the demo here: http://jsbin.com/enAmOYU/5 which is almost exactly what i want :)

And I've discovered the problem i described with the undefined variable 'p'...
The line my local version is failing on is:
for (i = 0; i < srcData.length; i++) {
^ srcData is undefined line 71592 - kendo.all.js (Kendo UI Complete v2013.2.1024 (http://kendoui.com))

Im not sure why this is occurring on my development code (only with more recent kendo versions past 2013.2.716). I have a few regions that are bound with different mvvm models. They do not overlap. But it seems to hit as soon as any of the models are ready to bind. To get around it I've had to bind the model early without data. The data is returned later and may be updated with signalr... but i cant get the JS Bin to reproduce the same problem so i cant replicate it outside the application as of yet.

For now i have my workaround, chart with expected series, legends, and category labels.

Cool, thanks.
Matt