Difficulties to show grouped data in an area chart

[Sam]

Hello,

I'm using Kendo UI ver. Q1 2013 and jQuery 1.9.1.
I have some difficulties to show the graph in area chart when I use grouped data. The problem is that, it doesn't paint the graph in Chrome. The graph is painted in Firefox but it is completely wrong and when I move my mouse over legends, Firebug tells "TypeError: u is null". I've reproduce the code on http://jsfiddle.net/saes/7EWRU/1/ so you can see the graph is not painted (in Chrome).

Something that is strange for me is that when I use Kendo UI ver. Q2 2013 (not Q1) as library in jsfiddle, it shows the graph but it's completely wrong (exactly the same like I use Firefox in my dev. environment). You can see it on http://jsfiddle.net/saes/XvRfn/14/
If you click on legends and choose one of them, you can see the grouped data is wrong. 

I wonder what's wrong in my code?

Thank you in advance,
Sam


Code:

var chartData = [{"PathCategory":"Angel","ScanTime":"/Date(1377295627880)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377295627880)/","Usage":473316311218},{"PathCategory":"Angel","ScanTime":"/Date(1377374709233)/","Usage":309296486838},{"PathCategory":"Development","ScanTime":"/Date(1377374709233)/","Usage":473316307895},{"PathCategory":"Angel","ScanTime":"/Date(1377806709363)/","Usage":315658122119},{"PathCategory":"Development","ScanTime":"/Date(1377806709363)/","Usage":473148678025},{"PathCategory":"Angel","ScanTime":"/Date(1377893108347)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377893108347)/","Usage":473653756198},{"PathCategory":"Angel","ScanTime":"/Date(1377979510767)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1377979510767)/","Usage":473653763520},{"PathCategory":"Angel","ScanTime":"/Date(1378065909570)/","Usage":316018638606},{"PathCategory":"Development","ScanTime":"/Date(1378065909570)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378152311203)/","Usage":316113243171},{"PathCategory":"Development","ScanTime":"/Date(1378152311203)/","Usage":473653764026},{"PathCategory":"Angel","ScanTime":"/Date(1378238716937)/","Usage":316876500733},{"PathCategory":"Development","ScanTime":"/Date(1378238716937)/","Usage":473685197791},{"PathCategory":"Angel","ScanTime":"/Date(1378325112323)/","Usage":318792603246},{"PathCategory":"Development","ScanTime":"/Date(1378325112323)/","Usage":473685191889},{"PathCategory":"Angel","ScanTime":"/Date(1378411511853)/","Usage":318802654704},{"PathCategory":"Development","ScanTime":"/Date(1378411511853)/","Usage":474014244961}];

$("#dataGrowthOverviewPerCategoryChart").kendoChart({
            theme: $(document).data("kendoSkin") || "metro",
            dataSource: {
                group: {
                    field: "PathCategory"
                },
                data: chartData,
                schema: {
                    model: {
                        fields: {
                            ScanTime: {
                                type: "date"
                            }
                        }
                    }
                }
            },
            series: [
                {
                    type: "area",
                    field: "Usage",
                    missingValues: "interpolate"
                }
            ],
            legend: {
                position: "bottom"
            },
            categoryAxis: {
                field: "ScanTime",
                baseUnitStep: "auto",
                labels: {
                    format: "MM/dd"
                },
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            chartArea: {
                height: 250,
                background: "transparent"
            }
        });

[Iliana Dyankova]

Hi Sam,

In order to achieve the expected result you should sort the dataSource:

$("#dataGrowthOverviewPerCategoryChart").kendoChart({
  //....
  dataSource: {
     group: {
        field: "PathCategory"
     },
     sort: {
        field: "ScanTime",
        dir: "asc"
     },
     //....
  }
});

On a side note, it is recommended using the latest version of the framework as it contains a lot of features and bug fixes. 

Regards,
Iliana Nikolova
Telerik

[Sam]

Hello Iliana,

First of all thanks for your response. Unfortunately using sort according to your reply doesn't help in Q2 (let's just talk about ver Q2).
The graph is still wrong according to the data. If you click on legends and choose one of them, then you easily find that when using grouped data (both Angel and Development in legend must be selected), the graph has no increase and decrease but if you choose one of them then you'll see a different shape.
Also tooltip doesn't work as it is expected. It just shows Development (not Angel at all).

I have updated the code according to your reply and you can find it here.

Best regards,
Sam

[Iliana Dyankova]

Hi Sam,

Thank you for the updated example. Actually the observed behaviour is expected - by design the Chart automatically scales the valueAxis depending on the data. Hence when some of series are hidden the Chart will re-render. In case you would like to keep the shapes of each series you should manually set valueAxis min / max values in the legendItemClick event.

Regarding the tooltip - this is also expected. As a possible workaround I can suggest you using a shared tooltip. For your convenience here is the updated jsFiddle example.

Regards,
Iliana Nikolova
Telerik