This is a migrated thread and some comments may be shown as answers.

Chart with Angularjs and Typescript

3 Answers 121 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Imran
Top achievements
Rank 1
Imran asked on 08 Oct 2015, 08:15 PM

Hi,

I am in the process of evaluating the chart component for my company. We need to use Angularjs combined with Typescript in ASP.NET (C# MVC) to create our charts. After downloading the trial version, we looked at the angular.html page in the examples for line-charts. Just using this example works great.

 We are then trying to separate the controller from the html to a typescript file. The following is what we have done:

 index.html (part about the chart) :

    <link href="~/Content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="~/Content/styles/kendo.common.min.css" rel="stylesheet">
    <link href="~/Content/styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="~/Content/styles/kendo.default.min.css" rel="stylesheet">
    <link href="~/Content/styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="~/Content/styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="~/Scripts/kendo/jquery.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/kendo/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/console.js"></script>

<script src="~/App/ChartViewer/chartviewer-contracts.js"></script>

<script src="~/App/ChartViewer/chartviewer-datasvc.js"></script>
<script src="~/App/ChartViewer/chartviewer-ctrl.js"></script>
<script src="~/App/ChartViewer/chartviewer-app.js"></script>

<div ng-app="ChartViewerApp">

    <div class="appContainer">
        <div ng-controller="ChartViewerCtrl as ctrl" ng-init="ctrl.init('@Model.siteId')">
            <div>TESTOUTPUT of DATA: {{electricity}}</div>
            <div class="demo-section k-content wide">
                <div>
                    <h4>Hover some series</h4>
                    <div id="mychart" kendo-chart
                         k-legend="{ position: 'bottom' }"
                         k-series-defaults="{ type: 'line' }"
                         k-series="[
                                    { field: 'nuclear', name: 'Nuclear electricity' },
                                    { field: 'hydro', name: 'Hydro electricity' },
                                    { field: 'wind', name: 'Wind electricity' }
                                ]"
                         k-data-source="electricity"
                         k-series-hover=""
                         style="height: 250px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

We then have our typescript files.

chartviewer-app.ts

/// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../scripts/typings/kendo/kendo.all.d.ts" />

var chartviewerAppLoaded = true;
module Test.ChartViewer {
    // Defines the modules to be used
    var app = angular.module("ChartViewerApp", ['ngRoute','kendo.directives']);
    app.factory('ChartViewerDataSvc', ['$http', '$q', TestChartViewer.DataService.ChartViewerDataSvc.SubscriptionDataSvcFactory]);
    app.controller('ChartViewerCtrl', ['$rootScope', '$scope', 'ChartViewerDataSvc', ​Test.ChartViewer.Controller.ChartViewerCtrl]);
}​

chartviewer-contracts: (not important)

 

chartviewer-ctrl:

/// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../../scripts/typings/angularjs/angular-route.d.ts" />
/// <reference path="../../scripts/typings/kendo/kendo.all.d.ts" />

module ​Test.ChartViewer.Controller {

    export interface IChartViewerScope extends ng.IScope {
        chartview: ​Test.Models.ChartViewer;
        electricity: any;
    }

    export class ChartViewerCtrl {
        private $scope: IChartViewerScope;
        private $rootScope: ng.IRootScopeService;
        private _dataSvc: ​Test.ChartViewer.DataService.ChartViewerDataSvc;

        constructor($rootScope: ng.IRootScopeService, $scope: IChartViewerScope, clientviewerDataSvc: ​Test.ChartViewer.DataService.ChartViewerDataSvc) {
            this.$rootScope = $rootScope;
            this.$scope = $scope;
            this._dataSvc = clientviewerDataSvc;
            this.$scope.electricity = this.electricity();
            //this.electricity();
        }

        public init(siteId: string): void {
            this._siteID = siteId;
            this.initLoad();
        }

        private initLoad(): void {
            var self: ChartViewerCtrl = this;
            self._dataSvc.getData(this._siteID).then(function (data) {
                self.$scope.chartview = data;
            });
        }

        public electricity(): kendo.data.DataSource {
            return new kendo.data.DataSource({
                data: [
                    {
                        "country": "Spain",
                        "year": "2008",
                        "unit": "GWh",
                        "solar": 2578,
                        "hydro": 26112,
                        "wind": 32203,
                        "nuclear": 58973
                    },
                    {
                        "country": "Spain",
                        "year": "2007",
                        "unit": "GWh",
                        "solar": 508,
                        "hydro": 30522,
                        "wind": 27568,
                        "nuclear": 55103
                    }
                ],
                sort: {
                    field: "year",
                    dir: "asc"
                }
            });
        }

        public onSeriesHover(): void {
            //dont do anything
            console.log('test');
        }
    }
} ​

​chartviewer-datsvc.ts: (not important)

 

So, if I run the example as is with the above code, the chart is never drawn (which I would have expected)

If I then change the electricity function in the chartviewer-ctrl to

 

        public electricity(): void {
            var chartData = $("#mychart").kendoChart();
        }

 then it can draw a chart, but with no datasource. So far so good. If I then add

           var myDataSource = new kendo.data.DataSource({
                data: [
                    {
                        "country": "Spain",
                        "year": "2008",
                        "unit": "GWh",
                        "solar": 2578,
                        "hydro": 26112,
                        "wind": 32203,
                        "nuclear": 58973
                    },
                    {
                        "country": "Spain",
                        "year": "2007",
                        "unit": "GWh",
                        "solar": 508,
                        "hydro": 30522,
                        "wind": 27568,
                        "nuclear": 55103
                    }
                ],
                sort: {
                    field: "year",
                    dir: "asc"
                }
            });

            $("#mychart").kendoChart({
                dataSource: myDataSource
            });
            myDataSource.read();

 

then still no chart. I have used many hours and many different methods of trying to set the datasource from my ctrler (above is just one of the attempts), but with no luck. Is there an example that you can provide for this? Meaning using typescript and having the typescript files defined separately. 

 

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 13 Oct 2015, 10:50 AM
Hi,

The problem in the pasted code is that electricity is a function but is used as a field. You should use it like this (as with any other Angular directive):

   k-data-source="electricity()"

In addition we would recommend not to use a function in this case because of the way angular treats functions that return different result. 

Here is a demo showing how to bind a Kendo chart to a data source defined in an angular controller.

Regards,
Atanas Korchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Imran
Top achievements
Rank 1
answered on 13 Oct 2015, 08:35 PM

Hi Atanas,

As you can see in the example the in the chartviewer-ctrl.ts file, there is a variable named electricity:any which is set to this.electricity() function which gets the data and sets the electricity variable.

In the HTML if I write out the value of electricity {{electricity}} I can see that it contains the data which it is supposed to contain (and is also a valid JSON format). I would therefore assume that the data written to the datasource is also correct. It appears as if a "refresh" is missing. Could it be that if you change the datasource after it has been initialized (drawn) that it does not get updated? If this is the case, how would we go about updating it after the draw?

 Thank you.

Imran

0
Atanas Korchev
Telerik team
answered on 14 Oct 2015, 01:13 PM
Hello Imran,

Yes, changing the data source after the chart is initialized wouldn't be applied automatically. There are two ways to deal with this - use k-rebind="electricity" which will reinitialize the chart when the data source changes or use the data method of the data source to replace the data items:

$scope.electricity.data(someNewData).

Regards,
Atanas Korchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Imran
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Imran
Top achievements
Rank 1
Share this question
or