Kendo UI Charts with Angular JS

[John]

I am trying to create a stacked column chart with Kendo UI and I am also using Angular JS.  I can get most of it working, but am having trouble with a couple of items.

1. I can't seem to get the category labels along the x axis to display.  I am not clear on what syntax to use if I am using Angular JS.  In my case I want to show the 'month' field from the metricsdata data source underneath each bar.

2. I can't get a plot band to display.

Below I am attaching an image of the chart I have now, along with code snippets of my controller and my index.html.  Thanks for your help.

index.html

01.<kendo-mobile-view id="metrics" k-transition="'slide'" k-title="'My View'" k-layout="'default'" ng-controller="MetricsController" k-on-show="setCurrentItem(kendoEvent)">
02.    <kendo-mobile-header>
03.       <kendo-mobile-nav-bar>
04.             <kendo-mobile-back-button k-align="'left'">Back</kendo-mobile-back-button>
05.             <kendo-view-title>My View</kendo-view-title>
06.       </kendo-mobile-nav-bar>
07.      </kendo-mobile-header>
08.<kendo-mobile-content>
09.
10.<div style="margin-left:5px;">
11.    <div kendo-chart class="chart-halfwidth chart-left-top"
12.        k-title="{ text: 'My Chart' }"
13.        k-legend="{ position: 'bottom' }"
14.        k-series-defaults="{ type: 'column', stack: true}"
15.        k-series="[
16.            { field: 'myavg', name: 'Avg', color: 'green' },
17.            { field: 'miss', name: 'Miss', color: 'red' }
18.         ]"
19.         k-value-axis="{ min:0, max:10}"
20.         k-category-axis="{ labels:{ visible:true } }"
21.         k-data-source="metricsdata">
22.    </div>
23.</div>
24.</kendo-mobile-content>

metrics.js - MetricsController

01.myApp.controller('MetricsController', ['$scope', 'myData',
02.    function($scope, myData) {
03.
04.        $scope.myData = myData;
05.        $scope.setCurrentItem = function(kendoEvent) {
06.            var id = parseInt(kendoEvent.view.params.id);
07.            myData.setCurrentItem(id);
08.        };
09.
10.        // Chart Data - Client Experience Metric - Transaction
11.        $scope.metricsdata = new kendo.data.DataSource({
12.            transport: {
13.                read: {
14.                    url: "metrics1.json",
15.                    dataType: "json"
16.                }
17.            }
18.        });
19.
20.
21.
22.    }
23.]);

metrics1.json - Sample Data

01.[{
02.    "month": "Feb",
03.    "year": "2014",
04.    "myavg": 8.10,
05.    "miss": 1.90
06.},{
07.    "month": "Mar",
08.    "year": "2014",
09.    "myavg": 8.01,
10.    "miss": 1.99
11.}]

[Daniel]

Hello John,

In order for the labels to be displayed you should specify the category field by using the categoryAxis field:

k-category-axis="{ labels:{ visible:true }, field: 'month' }"

or the series categoryField options:

k-series-defaults="{ type: 'column', stack: true, categoryField: 'month'}"

I am not sure if I understand the issue with the plot bands but basically you should use the same syntax as the one demonstrated in the demos and the documentation e.g.

k-value-axis="{
   min:0,
   max:10,
   plotBands: [{ from: 1, to: 2, color: 'red' }]
}"

Regards,
Daniel
Telerik

 

 

[John]

Thank you Daniel.  That worked perfectly.  Just what I needed.