//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.addPoints = function () {
var seriesArray = $scope.chartConfig.series
var rndIdx = Math.floor(Math.random() * seriesArray.length);
seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
};
$scope.addSeries = function () {
var rnd = []
for (var i = 0; i < 10; i++) {
rnd.push(Math.floor(Math.random() * 20) + 1)
}
$scope.chartConfig.series.push({
data: rnd
})
}
$scope.removeRandomSeries = function () {
var seriesArray = $scope.chartConfig.series
var rndIdx = Math.floor(Math.random() * seriesArray.length);
seriesArray.splice(rndIdx, 1)
}
$scope.swapChartType = function () {
if (this.chartConfig.options.chart.type === 'line') {
this.chartConfig.options.chart.type = 'bar'
} else {
this.chartConfig.options.chart.type = 'line'
this.chartConfig.options.chart.zoomType = 'x'
}
}
$scope.toggleLoading = function () {
this.chartConfig.loading = !this.chartConfig.loading
}
$scope.chartConfig = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myctrl">
<div class="span12">
<input ng-model="chartConfig.title.text">
<button ng-click="addSeries()">Add Series</button>
<button ng-click="addPoints()">Add Points to Random Series</button>
<button ng-click="removeRandomSeries()">Remove Random Series</button>
<button ng-click="swapChartType()">Line/Bar</button>
<button ng-click="toggleLoading()">Loading?</button>
</div>
<div class="row">
<highchart id="chart1" config="chartConfig" class="span10"></highchart>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */