Load Data After Page is Loaded

4 posts, 0 answers
  1. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 29 Jan 2015 Link to this post

    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?

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 02 Feb 2015 Link to this post

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

    Posted 02 Feb 2015 in reply to T. Tsonev Link to this post

    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
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 04 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top