CODEWITHSUNDEEP
angularjsangularjs-directivehighchartsangularjs-controller
Puja Singh
Puja Singh

Reputation: 87

How to put multiple HighChart in a page having different series value in different chart

app.controller("myCtrl", function($scope) {
	
$scope.perspectives = [{
     title : 'Depression Remission at 12 Months CMS159v4',
     graphData: [34,2,5,5,2,1,10]
  },
  {
    title : 'Comprehensive Diabetes Care: HbA1c Poor Control (>9.0%)',
    graphData: [2,7,9,25,55,20]
   },
  {
   title : 'Screening for Clinical Depression and follow-up',
    graphData: [2,7,9,25,55,20]
  },
   {
  title : 'Tobacco Assessment and Counseling',
    graphData: [2,7,9,25,55,20]
  },
   {
    title : 'Alcohal AND Drug Misuse(SBIRT)',
    graphData4: [2,7,9,25,55,20]
  }];
  



 
  $scope.processed = $scope.perspectives[0].graphData.map(function(elem,i){
	
	return [i,elem];
	  
  });

  
 
})
This is My controller from where i am passing array for title and value for different linechart. i have directive where i have Highchart.chart constructor where i putting all chart object.
<div ng-repeat="perspective in perspectives">
          <highcharts-pie class="hc-pie" items="processed" title="perspective.title"></highcharts-pie>
      </div>

this is my html page processed is my function name and it have hardcoaded parameter so that i m getting only first array object in all line chart .I want graphData array can put into different linechart.

Advance Thanks

Upvotes: 0

Views: 240

Answers (2)

Puja Singh
Puja Singh

Reputation: 87

No need to make function getItems(),

items="perspective.graphData" //In body.html this also work

Upvotes: 0

Rambler
Rambler

Reputation: 5482

The "processed" object is defined over the zeroth element of the "perspectives" object.

$scope.perspectives[0]

You should create a function and pass the index/perspectives object to that function and get the item list specific to that.

Function in your controller :

$scope.getItems=function(perspective){
   return perspective.graphData.map(function(elem,i){
      return [i,elem];
     });
}

And in you view : 

<div ng-repeat="perspective in perspectives">
      <highcharts-pie class="hc-pie" items="getItems(perspective)" title="perspective.title"></highcharts-pie>
</div>

Also make sure the binding for items in you directive 'highcharts-pie' is '=' .

Upvotes: 2

Related Questions