How to display multiple charts in the same controller using Chart.js in angular js

Question

I want to display two different charts with different values with help of chart.js in the same controller, But I am unable to do. Because am unaware of how to do. Can anyone please help me how to do, Thankyou in advance.

Html

<div id="chart_block">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">Bar chart</h4>
                </div>
                <div class="panel-body">
                    <canvas id="bar" class="chart chart-bar"chart-data="data" chart-labels="labels"
                            chart-series="series" barChart></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">Line chart</h4>
                </div>
                <div class="panel-body">
                    <canvas id="line" class="chart chart-line" chart-data="data"
                            chart-labels="labels" chart-series="series" chart-options="options"
                            chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
                </div>
            </div>
        </div>

    </div>
</div>

Controller

(function () {
"use:strict";
angular.module("myApp").controller("chartsCtrl", ["$scope", chartsCtrl]);

function chartsCtrl($scope) {
//For First Chart
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];
    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
}

//For Second Chart
 $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $scope.options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };

})();

define chart with different id's and pass data individually in the controller. — Sahil Dhir
– Sahil Dhir, Commented Apr 6, 2017 at 11:16
I have tried but the variable of charts are same so it's taking the first variable value for both charts — Vivek Kannan
– Vivek Kannan, Commented Apr 6, 2017 at 11:17

Mansi Parekh · Accepted Answer · 2017-04-06 11:40:33Z

2

Use different variables.

HTML Code:

<canvas id="bar" class="chart chart-bar" chart-data="data1" chart-labels="labels1" chart-series="series1" barChart></canvas>

<canvas id="line" class="chart chart-line" chart-data="data2" chart-labels="labels2" chart-series="series2" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>

Controller Code:

$scope.labels1 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series1 = ['Series A', 'Series B'];
$scope.data1 = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]];


$scope.labels2 = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series2 = ['Series A', 'Series B'];
$scope.data2 = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]];

answered Apr 6, 2017 at 11:40

Mansi Parekh

5192 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display multiple charts in the same controller using Chart.js in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related