Load Data After Page is Loaded

[Raymond]

I have a chart that is only displayed once the user selects a checkbox.  Consequently I set the chart options and load the data once the checkbox is selected.

01.<div ng-controller="chtController">
02.    <fieldset>
03.        <legend>
04.            <span><input type="checkbox" ng-change="loadCostChart()" ng-model="display" /> Cost Chart</span>
05.        </legend>
06.
07.        <div ng-show="display">
08.            <div id="CostChart">
09.                <div class="k-content">
10.                    <div id="chtCost" kendo-chart="chtCost" k-options="costOptions" data-role="chart" class="k-chart"></div>
11.                    <!-- k-rebind="costData" -->
12.                </div>
13.            </div>
14.        </div>
15.    </fieldset>
16.</div>

The controller for the page is;

01.(function () {
02.    'use strict';
03.
04.    angular.module('reportFormsApp')
05.        .controller('chtController', ['$scope', 'DataService', chtController]);
06.
07.    function chtController($scope, DataService) {
08.        $scope.costData = [];
09.        $scope.display = false;
10.
11.        function activate() {
12.            console.log('Setting chart options...');
13.
14.            // Set the chart options...
15.            $scope.costOptions = {
16.                dataSource: {
17.                    data: $scope.costData
18.                },
19.                title: {
20.                    text: '(Evc) Cost and Schedule Variances',
21.                    font: '22px Trebuchet MS, Bold',
22.                    color: 'black'
23.                },
24.                legend: {
25.                    position: 'bottom'
26.                },
27.                seriesDefaults: {
28.                    type: "column",
29.                    stack: false
30.                },
31.                series: [{
32.                    name: 'Budget',
33.                    field: 'budget',
34.                    categoryField: 'date' //,
35.                    //color: 'blue'
36.                }, {
37.                    name: 'Run Budget',
38.                    field: 'runBudget',
39.                    categoryField: 'date' //,
40.                    //color: 'yellow'
41.                }, {
42.                    name: 'Earned',
43.                    field: 'earned',
44.                    categoryField: 'date' //,
45.                    //color: 'red'
46.                }],
47.                categoryAxis: {
48.                    baseUnit: 'years'
49.                },
50.                valueAxis: {
51.                    line: {
52.                        visible: true
53.                    }
54.                }
55.            }
56.        };
57.
58.        $scope.loadCostChart = function() {
59.            console.log('Loading Cost data...');
60.
61.            DataService.getCostChartData().then(
62.            // Success...
63.            function (results) {
64.                var data = results.data;
65.
66.                for (var i = 0; i < data.length; i++) {
67.                    data[i].date = new Date(data[i].date);
68.                }
69.
70.                $scope.costData = data;
71.
72.                console.log($scope.costData);
73.                console.log('Loaded Cost data...');
74.
75.                console.log('Updating chtCost...');
76.                var chtData = new kendo.data.DataSource($scope.costData);
77.                $scope.chtCost.dataSource.data = chtData;
78.                console.log('Updated chtCost...');
79.            },
80.            // Error...
81.            function (results) {
82.                var msg = "The following error was reported when attempting to retrieve the Cost Chart data;\n\n" + results.statusText;
83.                alert(msg);
84.            });
85.
86.        };
87.
88.        $(document).ready(function () {
89.            console.log('Document ready...')
90.            activate();
91.        });
92.    };
93.})();

Everything appears to work correctly - all of the "console.log" lines are executed, all of the data is written to the console on line 72, no errors are displayed.

I have also tried;

$scope.chtCost.dataSource.data = $scope.costData;

for line 77; all to no avail.

What am I doing wrong?

[T. Tsonev]

Hi,

You're currently setting the data source "data" field to a new data source instance.

Try the following code instead:
var chtData = new kendo.data.DataSource($scope.costData);
$scope.chtCost.setDataSource(chtData);

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Raymond]

Hi T.,

I ended up using;

$scope.chtCostData = new kendo.data.ObservableArray($scope.costData);

and 

<div id="chtCost" kendo-chart="chtCost" k-options="costOptions" k-data-source="chtCostData"></div>

which fixed the problem.

I also tried your solution but this still didn't display the data in the chart.

Thanks for your help.

Ray

[T. Tsonev]

Hello,

I see what I did there should be:
var chtData = new kendo.data.DataSource({ data: $scope.costData });
$scope.chtCost.setDataSource(chtData);

Your actual solution is much cleaner though.

Regards,
T. Tsonev
Telerik