converting json data in angularjs module into array and plot using c3 chart

Question

I would like to generate an x-y plot based on a JSON data feed using angularjs. The JSON data is shown in the code below (EQ magnitude VS time). How can I convert this data into an array format and plot it in c3 chart (such as one in this link http://c3js.org/samples/data_json.html)?

Thank you very much for your help.

var array1 = [];    
var app = angular.module('myApp',[]);
app.controller('eqfeed',function($scope,$http){
    $http.get("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson").then(function(response) {
        $scope.eq=response.data.features;
        });
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    
<body>
<div ng-app="myApp" ng-controller="eqfeed">
<table>
    <tr ng-repeat="x in eq">
        <td>{{x.properties.time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{x.properties.mag}}</td>
    </tr>
</table>    
</div>     
    
</body>    
</html>

Community · Accepted Answer · 2017-05-23 12:09:17Z

1

This seems to be a duplicate. You just have to get the data and define your x-axis as a timeseries.

var chart = c3.generate({
        data: {
            x: "time",
            json: {
                time: eq.properties.time,
                data: eq.properties.mag
            }
        },
        axis:{
            x:{
                type: "timeseries",
                tick:{
                    format:"%Y-%m-%d %H:%M:%S"
                }
            }
        }
    });

And in your html you only have to get your chart.

<div id="chart"></div>

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Dec 22, 2016 at 12:12

Akoya

1,08012 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

converting json data in angularjs module into array and plot using c3 chart

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related