CODEWITHSUNDEEP
javascriptangularjschart.js
chuckieDub
chuckieDub

Reputation: 1835

Use AngularJS $scope var in on-page script

I'm implementing Chart.js into my AngularJS app, and I'm loading the chart data from server API into $scope.chartData that is an array of numbers.

I need to access this variable from Chart.js, and using the script example on their website, I'm not sure how to access the variable. Trying something like:

home.html: 

<!-- A bunch of HTML, then -->

<canvas id="myChart" width="400" height="400"></canvas>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Balance',
            data: {{chartData}}, //this is where I need to access the variable
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

What would be the best way (not a work around) to accomplish loading this data into the chart script?

Upvotes: 0

Views: 48

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222682

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>

Upvotes: 3

Related Questions