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 appreciated.

Here is my script for the highcharts:

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


    </script>

you can check this work github.com/rootux/angular-highcharts-directive — plus-
– plus-, Commented Apr 9, 2013 at 14:33

Sebastian Bochan · Accepted Answer · 2013-04-10 11:58:22Z

50

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);

    }
  }
});

answered Apr 10, 2013 at 11:58

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

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

4 Comments

jbenowitz Over a year ago

This is great, but what if you are constantly adding and removing series? Do you have to rewrite them using the HighCharts API and insert and remove series from the chart by hand within the $watch function?

jwimmer Over a year ago

It's almost perfect. Only thing I am running into is the rederTo Id part, which makes this directive unreusable. Is there a way to pass an id in from the controller that it could bind to the template? I've been fighting with it for an hour now..

Sebastian Bochan Over a year ago

@jwimmer in general you have a template which return div with this id, but if you get rid of it, you can use something like this: jsfiddle.net/csTzc/310

Sebastian Bochan Over a year ago

THe problem is with controller, because simple demo works well. jsfiddle.net/csTzc/533

Pablojim · Accepted Answer · 2013-06-25 10:45:29Z

30

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.

answered Jun 25, 2013 at 10:45

Pablojim

8,5828 gold badges48 silver badges69 bronze badges

5 Comments

TalentTuner Over a year ago

everythis is fine but jsfiddle example was not working due to the missing config , it took me a while to figure this out. correct usgae is below <highchart id="chart1" series="chart.series" title="chart.title" options="chart.options" config="chart"></highchart>

Prashobh Over a year ago

HI , how to covert this angular highchart to binary image ,can u please help ,i am getting some error stackoverflow.com/questions/19245398/…

user393219 Over a year ago

highcharts-ng is great, but I'm using highmaps and it looks like it's currently unsupported... :(

user909694 Over a year ago

@ShawnStrickland, a quick look at highcharts-ng forks revealed two users that have added Highmaps support.. Check here and here for more info.

Pablojim Over a year ago

Highmaps are now supported!

Puja Singh · Accepted Answer · 2016-05-26 05:23:16Z

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

Collectives™ on Stack Overflow

Rendering Highcharts using Angular js Directives

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related