Chartjs-Use AngularJS $scope var in on-page script

by

3👍

✅

You should use the library angular-chart.js inorder to use with angularjs.

You can assign the data part to the options config.

DEMO

angular.module("app", ["chart.js"])


.controller("ChartCtrl", function($scope) {
  $scope.labelsPercent = ['Equipment 1', 'Equipment 2', 'Equipment 3', 'Equipment 4'];
  $scope.chartOptionsPercent = {
    title: {
      display: true,
      text: "Downtime Percentage of Equipment",
      fontSize: 20
    },
    legend: {
      text: "Hello"
    },
    tooltips: {
      enabled: false
    },
   
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        position: 'left',
        ticks: {
          min: 0,
          max: 100
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Name of Equipment'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Percentage of Downtime (%)'
        },
        gridLines: {
          color: "rgba(0, 0, 0, 0)",
        }
      }]
    }
  }
  $scope.dataPercent = [5, 6, 7, 12];


});
<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="dataPercent" chart-labels="labelsPercent" chart-options="chartOptionsPercent"  ></canvas>
  </div>
 </body>
</html>

Leave a comment