angularjs & highcharts - setting up properties in directive

Question

I currently have this as my directive:

 app.directive('highchart', function () {
  return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    link: function(scope, element, attrs) {
        scope.$watch(function() { return attrs.chart; }, function() {
            if (!attrs.chart) return;
            var chart = JSON.parse(attrs.chart);
            $(element[0]).highcharts(chart);
        });
    }
};

})

And this is my controller:

function ProdSvcViewsCtrl($scope, $routeParams, $http, $location) {
$scope.example_chart = get_chart();

function get_chart() {
    return {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                name: 'Page Views',
                color:'#FFFFFF',
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            alert('Category: ' + this.category + ', value: ' + this.y);
                        }
                    }
                },
            }
        },

        chart: {
            renderTo: 'container',
            backgroundColor : {
                linearGradient : [0, 0, 0, 400],
                stops : [
                  [0, 'rgb(100, 100, 100)'],
                  [1, 'rgb(50, 50, 50)']
                ]
            },
            plotBackgroundColor: 'rgba(255, 255, 255, 0.1)',
            width: 775,
            height: 300,
        },
        title: {
            text: "Product Page Views",
            align: "center",
            y: 15,
            style: {
                color: "#ffffff",
                fontSize: "18px",
                fontWeight: 500,
                fontFamily:'Calibri,Helvetica,Arial'
            }
        },
        legend: {
            backgroundColor: 'transparent',
            color:'#FFFFFF',
            layout: 'horizontal',
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            x: 60,
            y: 1,
            shadow: false,
            border: 0,
            borderRadius: 0,
            borderWidth: 0
        },

        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]
        }]
    };
}

}

How would I migrate the properties over to the directive from my controller so they can be dynamic depending upon what attributes I apply to the respective directive, ie, color, width, etc?

Thanks for your attention to this matter Abilash, and I am sure I will get flack from someone, but not everything in this world requires a fiddle or plunker. But thx your for reply :) — aaa
– aaa, Commented May 1, 2013 at 13:17

Pablojim · Accepted Answer · 2014-02-15 19:10:31Z

1

In your directive you could add watches to the parts of the chart you want to be dynamic.

This is the approach taken by this directive: https://github.com/pablojim/highcharts-ng

answered Feb 15, 2014 at 19:10

Pablojim

8,5828 gold badges48 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

angularjs & highcharts - setting up properties in directive

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