Kendo UI Charts with Angular JS

3 posts, 0 answers
  1. John
    John avatar
    17 posts
    Member since:
    Jul 2014

    Posted 01 Jan 2015 Link to this post

    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.}]
  2. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 05 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. John
    John avatar
    17 posts
    Member since:
    Jul 2014

    Posted 05 Jan 2015 in reply to Daniel Link to this post

    Thank you Daniel.  That worked perfectly.  Just what I needed.
Back to Top