Rendering Highcharts using Angular js Directives

Question

I am new to Angular JS and trying to render my highcharts (Basic Line) by creating a directive. Please tell me the approach I should follow here. Any help would be appreciat

Answer 1

app.directive('hcChart', function () {
	return {
			restrict: 'A',
			template: '<div></div>',
			scope: {
					options: '='
				},
			link: function (scope , element, attribute) {
                Highcharts.chart('chart', {
                	 chartOptions: {
                         type: 'line'
                    },
                     
                     title: {
                        text: 'Temperature data'
                     },
                 series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                     }]
                });
			}
	}
			
});

<div id="chart" hc-chart>Placeholder for generic chart</div>

Make sure highchart lib is added in your index.html

Answer 2

Alternative implementation here: http://jsfiddle.net/pablojim/Cp73s/

This uses https://github.com/pablojim/highcharts-ng

This allows you to create a highchart with the below html:

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

In the above case chart.series is an array of javascript objects representing the series on the chart - these take standard Highcharts options. These are then watched by angularjs for any changes.

chart.options is the highcharts initalisation options - also watched for changes. Although changes to this recreate the entire chart.

chart.title is the highcharts title object - also watched for changes.

Answer 3

Example of pie chart:

http://jsfiddle.net/csTzc/

    function MyCtrl($scope, limitToFilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedIdeas = limitToFilter($scope.ideas, 2);
}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart(options);
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});