prettycode · August 29, 2015 14:10
diff --git a/highcharts-and-highstock-angular-wrapper.htm b/highcharts-and-highstock-angular-wrapper.htm
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Sandbox</title>
    <script src="//code.jquery.com/jquery-2.1.1.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
    <script src="//code.highcharts.com/stock/highstock.src.js"></script>
 </head>
 <body ng-app="app">
    <div ng-controller="chartController as chart">
        <chart data-chart-config="chart.chartConfig" data-chart-type="chart.chartType"></chart>
        <button type="button" ng-click="chart.toggleStockView()">
            Toggle Stock View (chartType = {{ chart.chartType }})
        </button>
    </div>
    <script>
        angular
            .module('app', [])
            .constant('isDebug', true)
            .service('chartData', function ($http, $q) {
                return function fetch(stock) {
                    var url = 'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSON_CALLBACK',
                        deferred = $q.defer(),
                        promise = deferred.promise;

                    $http.jsonp(url).success(function (data) {
                        deferred.resolve({
                            rangeSelector: {
                                selected: 1
                            },
                            title: {
                                text: stock + ' Price'
                            },
                            series: [{
                                name: stock,
                                data: data,
                                tooltip: {
                                    valueDecimals: 2
                                }
                            }]
                        });
                    });

                    return promise;
                };
            })
            .controller('chartController', function ($scope, chartData) {
                var chart = this;

                chart.chartType = 'StockChart';

                chart.init = (function () {
                    chartData('AAPL').then(function (data) {
                        chart.chartConfig = data;
                    });
                })();

                chart.toggleStockView = function () {
                    chart.chartType = chart.chartType ? '' : 'StockChart';
                };
            })
            .directive('chart', [
                /* 
                    Originally by Chris O., github.com/prettycode, prettycode.org
                    MIT license
                */
                '$log',
                '$window',
                'isDebug',
                function ($log, $window, isDebug) {
                    var highcharts = $window.Highcharts;
        
                    if (!highcharts) {
                        var errorMsg = 'Highcharts script library is not loaded.';
                        $log.error(errorMsg);
                        return !isDebug ? {} : {
                            template: 'Error: ' + errorMsg
                        };
                    }
        
                    return {
                        restrict: 'E',
                        replace: true,
                        scope: {
                            chartConfig: '=',
                            chartType: '='
                        },
                        template: '<div></div>',
                        link: function (scope, element, attrs) {
                            scope.createChart = function (config, type) {
                                // Create a copy because Highcharts modifies config (http://forum.highcharts.com/highcharts-usage/bug-cannot-create-two-charts-from-same-config-object-t31590/)
                                var options = angular.copy(config);
        
                                if (scope.chart) {
                                    $log.warn('Destroying and recreating chart.');
                                    scope.chart.destroy();
                                }
        
                                if (type) {
                                    if (!highcharts[type]) {
                                        var errorMsg = 'Highcharts chart type "' + type + '" is not defined.';
                                        $log.error(errorMsg);
                                        if (isDebug) {
                                            element.text('Error: ' + errorMsg);
                                        }
                                        return;
                                    }
                                    
                                    element.highcharts(type, options);
                                }
                                else {
                                    element.highcharts(options);
                                }
        
                                scope.chart = element.highcharts();
                            };
        
                            scope.$watch('chartConfig', function (config) {
                                scope.createChart(config, scope.chartType);
                            });
        
                            scope.$watch('chartType', function (type) {
                                scope.createChart(scope.chartConfig, type);
                            });
                        }
                    };
                }
            ]);
    </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sandbox</title>
	<script src="//code.jquery.com/jquery-2.1.1.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js"></script>
	<script src="//code.highcharts.com/stock/highstock.src.js"></script>
	</head>
	<body ng-app="app">
	<div ng-controller="chartController as chart">
	<chart data-chart-config="chart.chartConfig" data-chart-type="chart.chartType"></chart>
	<button type="button" ng-click="chart.toggleStockView()">
	Toggle Stock View (chartType = {{ chart.chartType }})
	</button>
	</div>
	<script>
	angular
	.module('app', [])
	.constant('isDebug', true)
	.service('chartData', function ($http, $q) {
	return function fetch(stock) {
	var url = 'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSON_CALLBACK',
	deferred = $q.defer(),
	promise = deferred.promise;

	$http.jsonp(url).success(function (data) {
	deferred.resolve({
	rangeSelector: {
	selected: 1
	},
	title: {
	text: stock + ' Price'
	},
	series: [{
	name: stock,
	data: data,
	tooltip: {
	valueDecimals: 2
	}
	}]
	});
	});

	return promise;
	};
	})
	.controller('chartController', function ($scope, chartData) {
	var chart = this;

	chart.chartType = 'StockChart';

	chart.init = (function () {
	chartData('AAPL').then(function (data) {
	chart.chartConfig = data;
	});
	})();

	chart.toggleStockView = function () {
	chart.chartType = chart.chartType ? '' : 'StockChart';
	};
	})
	.directive('chart', [
	/*
	Originally by Chris O., github.com/prettycode, prettycode.org
	MIT license
	*/
	'$log',
	'$window',
	'isDebug',
	function ($log, $window, isDebug) {
	var highcharts = $window.Highcharts;

	if (!highcharts) {
	var errorMsg = 'Highcharts script library is not loaded.';
	$log.error(errorMsg);
	return !isDebug ? {} : {
	template: 'Error: ' + errorMsg
	};
	}

	return {
	restrict: 'E',
	replace: true,
	scope: {
	chartConfig: '=',
	chartType: '='
	},
	template: '<div></div>',
	link: function (scope, element, attrs) {
	scope.createChart = function (config, type) {
	// Create a copy because Highcharts modifies config (http://forum.highcharts.com/highcharts-usage/bug-cannot-create-two-charts-from-same-config-object-t31590/)
	var options = angular.copy(config);

	if (scope.chart) {
	$log.warn('Destroying and recreating chart.');
	scope.chart.destroy();
	}

	if (type) {
	if (!highcharts[type]) {
	var errorMsg = 'Highcharts chart type "' + type + '" is not defined.';
	$log.error(errorMsg);
	if (isDebug) {
	element.text('Error: ' + errorMsg);
	}
	return;
	}

	element.highcharts(type, options);
	}
	else {
	element.highcharts(options);
	}

	scope.chart = element.highcharts();
	};

	scope.$watch('chartConfig', function (config) {
	scope.createChart(config, scope.chartType);
	});

	scope.$watch('chartType', function (type) {
	scope.createChart(scope.chartConfig, type);
	});
	}
	};
	}
	]);
	</script>
	</body>
	</html>