Rebuild JSON after $http.get with AngularJS -
update
following link provide working demo highchart-ng , json rebuild solution. if try use json data splunk in highchart, save day :)
http://plnkr.co/edit/nl47hz5cnj1jvut3dtbt?p=preview
--
i trying json response splunk fit highchart, im having real problems formating data right.
i`m big fan of angularjs, have trubble wrapping head around it, , hope bright minds can me.
i have been trying loops build data, no luck. if cant provide whole solution, please point me in correct direction ? :)
original data $http.get:
[ { "time": "2015-03-20 20:45:00", "output": { "80": 34, "443": 234, "993": 311, "8080": 434 } }, { "time": "2015-03-20 20:40:00", "output": { "80": 0, "443": 204, "993": 38, "8080": 546 } }, { "time": "2015-03-20 20:35:00", "output": { "80": 0, "443": 0, "993": 90, "8080": 10 } } ] what need data like:
[ { "name": "80", "data": [34, 0, 0] }, { "name": "443", "data": [234, 204, 0] }, { "name": "993", "data": [311, 38, 90] }, { "name": "8080", "data": [434, 546, 10] } ] the script keep coming without luck:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- javascripts --> <script src="//code.angularjs.org/1.3.14/angular.min.js"></script> <script src="//code.angularjs.org/1.3.14/angular-animate.min.js"></script> <script src="//code.highcharts.com/adapters/standalone-framework.js"></script> <script src="//code.highcharts.com/highcharts.src.js"></script> <script src="//rawgit.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script> <!-- css --> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head> <script> var appname = angular.module('appname', ["highcharts-ng"]); appname.controller('appctrl', ['$scope', '$http', function($scope,$http) { $http.get("example1.json") .success(function(data) { process(data); }); function process(data) { } $scope.chartconfig = { options: { chart: { type: 'line' } }, series: [{ data: [] },{ data: [] }], title: { text: 'hello' }, loading: false } } ]); </script> <body> <div class="container"> <div class="content"> <div ng-app="appname" ng-controller="appctrl"> <highchart id="chart1" config="chartconfig"></highchart> </div> </div><!-- /.content --> </div><!-- /.container --> </body> </html>
var data = [ { "time": "2015-03-20 20:45:00", "output": { "80": 34, "443": 234, "993": 311, "8080": 434 } }, { "time": "2015-03-20 20:40:00", "output": { "80": 0, "443": 204, "993": 38, "8080": 546 } }, { "time": "2015-03-20 20:35:00", "output": { "80": 0, "443": 0, "993": 90, "8080": 10 } } ]; function process(data) { var arroutputkeys = object.getownpropertynames(data[0].output), outputarray = []; arroutputkeys.foreach(function (keyname) { var propdata = this.map(function (val) { return val.output[keyname]; }, keyname); outputarray.push({"name": keyname, "data": propdata}); }, data); return outputarray; } console.log(process(data));
Comments
Post a Comment