<body ng-app="myApp">
<div ng-controller="MainController">
<div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="520px"></div>
<div id="controls">
<label>Fetch new data</label>
<button ng-click="fetchData()">Fetch</button>
</div>
</div>
</body>*{
box-sizing: border-box;
font-family : "verdana"
}
html,body{
margin: 0px;
}
#controls{
height: 48px;
width: 700px;
background-color : #5F7E87;
color : white;
padding: 15px;
}
zingchart.THEME = "dark";
var app = angular.module('myApp',['zingchart-angularjs']);
app.controller('MainController', function($scope, $http){
$scope.myJson = {
type : 'line',
series : [{
values : [1,3,5,6,7,3,2]
}]
}
$scope.fetchData = function(){
$http({
method: 'GET',
url: 'https://codepen.io/zingchart/pen/Vvpzjb.js'
})
.then(function successCallback(response) {
$scope.myJson.series[0].values = $scope.myJson.series[0].values.concat(response.data.values);
}, function errorCallback(response) {
console.log("error recieving data");
});
}
});
External CSS
This Pen doesn't use any external CSS resources.