TypeError: this.scale undefinded when using Chart.js and Angularjs

Question

I am currently trying to create a dashboard of sorts where I have an array of sets of data that I would like represented in small charts all on one page. So far, I've done my work with Chart.js and AngularJS (I am using the bower angular-chart.js module). I have no issue charting my data when I only want one chart to appear but when I try for my dashboard layout, that's where I start running into issues.

My goal is to present the user with a title and loading spinner for each chart then load the chart when the REST request returns. Here is my Angularjs code:

angular.module('core').controller('TrafficDashboardController', ['$scope', '$http', '$log',
function($scope, $http, $log) {
    var hostIpAddress = '10.16.23.174';
    $scope.serviceTypes = [];
    $scope.graphs = [];

    var buildChartjsArray = function(data) {
        var yvalues = [];
        var xvalues = [];
        $.each(data, function(key, value) {
            yvalues.push(Math.ceil(value.total));
            xvalues.push((new Date(value.timestamp)).toLocaleString());
        });

        return {
            xvalues: xvalues,
            yvalues: yvalues
        }
    };

    var updateGraphWithData = function(serviceTypeStr, categoryStr, data) {
        $log.info('ServiceType: ' + serviceTypeStr + ', Category: ' + categoryStr);
        for (var i=0; i < $scope.graphs.length; i++) {
            if ((serviceTypeStr == $scope.graphs[i].serviceType._id) && (categoryStr == $scope.graphs[i].category._id)) {
                var chartjsDataPoints = buildChartjsArray(data);
                $scope.graphs[i].chartJsData = {
                    labels: chartjsDataPoints.xvalues,
                    data: chartjsDataPoints.yvalues,
                    options: {
                        'pointDotRadius': 4,
                        'pointHitDetectionRadius': 4,
                        'datasetFill': false
                    }
                };
                $scope.graphs[i].showSpinner = false;
                break;
            }
        }
    };

    // Get all service types
    $http.get('http://' + hostIpAddress + ':8080/stats/api/serviceTypes')
        .success(function(data) {
            $scope.serviceTypes = data;

            // Loop through all service types, getting all the categories for each
            angular.forEach($scope.serviceTypes, function(serviceType) {

                var url = 'http://' + hostIpAddress + ':8080/stats/api/categories?serviceType=' + serviceType._id;
                $http.get(url)
                    .success(function(categories) {
                        categories.sort();
                        for (var i=0; i < categories.length; i++) {
                            var category = categories[i];
                            var graph = {
                                serviceType: serviceType,
                                category: category,
                                showSpinner: true
                            };
                            $scope.graphs.push(graph);

                            var url = 'http://' + hostIpAddress + ':8080/stats/api?serviceType=' + serviceType._id + '&category=' + category._id + '&period=1hour';
                            $http.get(url)
                                .success(function(data) {
                                    updateGraphWithData(data.serviceType, data.category, data.data);
                                });
                        }
                    });
            });
        });
     }
]);

And here is my HTML:

<section data-ng-controller="TrafficDashboardController">
<div class="col-sm-6" ng-repeat="graph in graphs">
    <h6>{{graph.serviceType.name}}</h6>
    <h6>{{graph.category.name}}</h6>
    <fading-circle-spinner ng-show="graph.showSpinner"></fading-circle-spinner>

    <canvas ng-hide="graph.showSpinner" class="chart chart-line" data="graph.chartJsData.data" labels="graph.chartJsData.labels" options="graph.chartJsData.options"></canvas>
</div>
</section>

When I run my code, I get the title and spinner, as expected but then I get this error:

TypeError: this.scale is undefined http://10.16.23.174:3000/lib/Chart.js/Chart.min.js Line 11

Any help or suggestions would be greatly appreciated.

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

In your updateGraphWithData function

data: chartjsDataPoints.yvalues,

should be

data: [ chartjsDataPoints.yvalues ],

You might also want to try swapping your $scope.graphs[i].showSpinner = false; and your $scope.graphs[i].chartJsData = {

Credit : Chart.js line 2686 Error

edited May 23 '17 at 10:34

Community

1
1

answered Jun 19 '15 at 12:02

potatopeelings

38,000
6
80
108

I'm don't think this is the only problem btw (I get a different error with this). Would you mind trying out with the above change and a non-minified version of Chart.js? And perhaps with static data (better still would be a fiddle :-))? – potatopeelings Jun 19 '15 at 12:03

score 0 · Answer 2 · answered Jun 19 '15 at 15:15

0

Putting the square brackets around my yvalues was the answer. I am now rendering graphs without any issues.

Thank you!

answered Jun 19 '15 at 15:15

Justin Flammia

113
3
6

TypeError: this.scale undefinded when using Chart.js and Angularjs

2 Answers2