transforming JSON information within an angularJS framework into an array and displaying it visually with a C3 chart

Looking to create an x-y plot using AngularJS with a JSON data feed. The JSON data displays EQ magnitude VS time. How do I convert this data into an array format and plot it in a c3 chart? (similar to the one in this link )

Appreciate any assistance you can provide.

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>

Answer №1

It appears that this question has been asked before. Simply extract the data and set 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"
                }
            }
        }
    });

In your html, all you need to do is display your chart.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Placing a new item following each occurrence of 'X' in React components

Currently, I am working with a React component that uses Bootstrap's col col-md-4 styles to render a list of items in three columns. However, I am facing an issue where I need to add a clearfix div after every third element to ensure proper display of ...

How to set a default option in a dropdown menu using Angular 4

Many questions have been raised about this particular issue, with varying answers that do not fully address the question at hand. So here we go again: In my case, setting the default value of a dropdown select by its value is not working. Why is that so? ...

issue with scrolling using the ideal scrollbar

Can someone help me figure out how to integrate the 'perfectScrollbar('update')' function with my Angular.js code? $http.get('demo/json/test.json'). success(function(data, status, headers, config) { $scope.items = d ...

Disregard the significance of radio buttons - iCheck

I have been attempting to retrieve values from radio buttons (using iCheck), but I am consistently only getting the value from the first radio button, while ignoring the rest. Despite following what seems to be correct code theory, the output is not as exp ...

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling

Is there a way to only enable scrolling through a webpage using the mouse wheel or touch scrolling on mobile devices, while disabling browser scroll bars? This would allow users to navigate up and down through div elements. Here is the concept: HTML: &l ...

What is the best method for deleting the 'records per page' label text from datatables?

I'm trying to customize my jQuery datatables by removing the label "Records per page." I already know that "oLanguage": { "sSearch": "" } can be used to remove the search label, but is there a similar option for hiding the results per page label? ...

Exploring a one-dimensional nested array in order to make updates to the higher level nodes

I have a 1D nested array: nestedArr: [ { id: 1, parentId: null, taskCode: '12', taskName: 'Parent', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []}, { id: 2, parentId: 1, taskCo ...

Encapsulating JSON responses using a structured approach in PHP with the Laravel framework

I am currently developing a REST API that will generate diverse JSON responses based on the type of User making the request. A unique endpoint: example.com/api/v1/collect is utilized, employing Laravel's API authentication to fetch the User model wit ...

Combining JS and PHP for secure function escaping

Looking for a solution to properly escape quotes in generated PHP Javascript code. Here is an example of the current output: foreach ($array as $element) { echo '<a onClick="myFunctionTakesPHPValues('.$element[0].','.$element[1] ...

Unable to dynamically append items to Owl Carousel using JavaScript

I am currently working on adding items dynamically to an Owl carousel. This is how I am approaching it: HTML <div id="avatar-carousel" class="owl-carousel lesson-carousel"> <div class="item item-logo"& ...

Transform JSON dictionary into a row within a Pandas DataFrame

I have retrieved JSON data from a URL, resulting in a dictionary. How can I restructure this dictionary so that each key becomes a column and the timestamp acts as the row index for each entry gathered from the URL? Below is the raw data obtained: with u ...

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

Arrangement of components within an entity

I have an instance (let's refer to it as myObject) that is structured like this (when you log it to the console): >Object {info1: Object, info2: Object, info3: Object, info4: Object,…} >info1: Object >info2: Object Id: 53 ...

Organize data by month using angularjs

I'm working on an HTML page that displays a categorized list of data for each month. Here's a snippet of how the page looks: July, 2014: Monday 7th Data 7 Data 6 Friday 4th Data 5 Data 4 May, 2014: Sunday 15th Data 3 Thursday 8th Data ...

choosing a date from the UICalendar

Recently, I've started exploring Angular and I'm trying to incorporate a calendar feature using ui-calendar. So far, I've managed to display a basic calendar with some events on it. Now, my goal is to allow users to click on a specific day ...

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

How can one include a URL as a "URL parameter" when using Express?

In my Node.js application, I've set up a router to listen for requests at api/shorten/: router.get('api/shorten/:longUrl', function(req, res, next) { console.log(req.params.longUrl); } When I enter something like: http://l ...

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...