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
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
Rank 1
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
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