Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by user1572526

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <div class="span12">
            <button ng-click="update()">click to update chart</button>
            <div class="row">
                <highchart id="chart1" config="chartConfig" class="span10"></highchart>
            </div>
            
<h3><a href="https://github.com/pablojim/highcharts-ng">See Highcharts-ng on github</a></h3>

JavaScript

//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.factory('Chart', function () {
    var chartConfig = {
        options: {
            chart: {
                type: 'column'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }],
        xAxis: [{
            categories: ['old bar title', 'old bar title 2 ']
        }],
        title: {
            text: 'Hello'
        },

        loading: false
    }
    return chartConfig;
});


myapp.controller('myctrl', function ($scope, Chart) {
    $scope.chartConfig = Chart;
   

    $scope.update = function () {
         $scope.chartConfig.title.text = "Setting new title"; //Works    
        $scope.chartConfig.series = [{ //Works
            "name": "Updated data",
                "data": [1, 2, 4, 7, 3]
        }];
        $scope.chartConfig.xAxis = [{ //NOT WORKING
            categories: ['new bar title', 'new bar title2']
        }]
        console.log($scope.chartConfig);
    }

});