[Chartjs]-Need help adding Chart.js chart to a Modal window (I'm Using AngularJS)

by

1👍

✅

With my answer I assume the modal is open correctly.

We need to have 2 controllers:

  1. Hold the $modal service and control on opening the modal (We’ll use your with rename)
app.controller('myCtrl', function ($scope, $modal) {
    $scope.open = function (device) {
        $scope.device = device;
        var modalInstance = $modal.open({
            templateUrl: 'add_modal.html',
            controller: 'myCtrl'
            windowClass: 'app-modal-window',
        });

        modalInstance.result.then(function () {
            console.log('you can check user selections here');
        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });

    };
});
  1. A controller who control’s the modal DOM when it opens
app.controller('modalCtrl', function($scope) {
      
      $scope.myData = [/*your data array*/];
      $scope.myLabels = [/*your labels array*/];      
      
});

And your canvas whitin the modal is defined using the $scope’s vars

<canvas class="chart chart-line" data="myData" labels="myLabels"></canvas>

P.S – please pay attention to where I ‘open’ the modal I declare a controller for it

1👍

it will be in your best interest to create a directive for this chart, and that way you can also use it anywhere you like.

https://github.com/miganga/angularMeetupTwo/tree/master/app

I did something similar above.

Leave a comment