Geek Answers Handbook

Angular-chartjs line chart TypeError: t.merge is not a function

I am trying to use the line chart example @ http://jtblin.imtqy.com/angular-chart.js/ . I get the following error. Can someone provide me some pointers?

error in console

Here is my code. I tried moving the html from ui-view to see if there is a problem with angular, but also does not work on the layout page. To a large extent, the copy pasted the sample code from the website.

angular.module('app').controller(controllerId, [ '$scope', function ($scope) { //Line Chart $scope.lineLabels = ["January", "February", "March", "April", "May", "June", "July"]; $scope.lineSeries = ['Series A', 'Series B']; $scope.lineData = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; $scope.lineDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; $scope.lineOptions = { scales: { yAxes: [ { id: 'y-axis-1', type: 'linear', display: true, position: 'left' }, { id: 'y-axis-2', type: 'linear', display: true, position: 'right' } ] } }; } ]); 
 <div class="box box-info"> <div class="box-header with-border"> <h3 class="box-title">Line Chart</h3> <div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"> <i class="fa fa-minus"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div> </div> <div class="box-body"> <div class="chart"> <canvas id="line" class="chart chart-line" chart-data="lineData" chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions" chart-dataset-override="lineDatasetOverride"></canvas> </div> </div> <!-- /.box-body --> </div>
+5
source share
1 answer

Check out the angular version ... I think you are using version 1.2.X, and it does not yet have a merge function, and angular -chart.js uses this function.

What you can do is use this code, put it after loading angular and before loading the chart ...

 if (!angular.merge) { angular.merge = (function mergePollyfill() { function setHashKey(obj, h) { if (h) { obj.$$hashKey = h; } else { delete obj.$$hashKey; } } function baseExtend(dst, objs, deep) { var h = dst.$$hashKey; for (var i = 0, ii = objs.length; i < ii; ++i) { var obj = objs[i]; if (!angular.isObject(obj) && !angular.isFunction(obj)) continue; var keys = Object.keys(obj); for (var j = 0, jj = keys.length; j < jj; j++) { var key = keys[j]; var src = obj[key]; if (deep && angular.isObject(src)) { if (angular.isDate(src)) { dst[key] = new Date(src.valueOf()); } else { if (!angular.isObject(dst[key])) dst[key] = angular.isArray(src) ? [] : {}; baseExtend(dst[key], [src], true); } } else { dst[key] = src; } } } setHashKey(dst, h); return dst; } return function merge(dst) { return baseExtend(dst, [].slice.call(arguments, 1), true); } })(); }

I took it from here: deep merge objects with AngularJS

+2
source

More articles:


All Articles