Visualizing data in Angular js using JSON Object

I am currently working on implementing chart representation in AngularJS.

While I have successfully implemented simple charts, I now need assistance with converting the below JSON data into arrays for chart representation:

[{"value": {"DE":2,"NP":20,"BD":28,"TW":1},
  "end_time":"2016-07-05T07:00:00+0000"},
 {"value":{"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2},
  "end_time":"2016-07-06T07:00:00+0000"},
 {"value":{"DE":5,"NP":24,"BD":29},
  "end_time":"2016-07-07T07:00:00+0000"}]

I aim to convert this JSON data into the following format:

$scope.labels = ["January", "February", "March", "April", "May", "June","July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];

My main challenge lies in dealing with different labels in each JSON object while maintaining count order. Any recommendations on how I can achieve this effectively using other libraries or chart options in AngularJS would be greatly appreciated.

javascriptangularjsjsonangular-chartchart.js

Answer №1

Have you made an attempt at solving the problem? You haven't provided any solution yet. Nevertheless, here is a potential approach:

var source = [
  {"value": {"DE":2,"NP":20,"BD":28,"TW":1},
  "end_time":"2016-07-05T07:00:00+0000"},
  {"value":{"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2},
  "end_time":"2016-07-06T07:00:00+0000"},
  {"value":{"DE":5,"NP":24,"BD":29},
  "end_time":"2016-07-07T07:00:00+0000"}
]
var $scope = {};
$scope.labels = [];
$scope.data = [];
$scope.series = [];


source.forEach(function(item){
  $scope.series.push(item.end_time)

  var values = []
  Object.keys(item.value).forEach(function(key) {
    if ($scope.labels.indexOf(key) === -1) {
     $scope.labels.push(key)
    }
    values.push(item.value[key])
  })
  $scope.data.push(values)
})
console.log($scope)

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

Send information to MongoDB following a GET request in Node.js

When it comes to transferring data from Node's http.get() to mongoDB using mongoose, I'm encountering some challenges. I'm unsure of how to integrate the GET result into mongoose's methods. Here are a few queries regarding the process: ...

javascriptnode.jsmongodbrest

The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...

javascriptcss

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

Tips for changing an angular variable string before sending it to a PHP function

When working with AngularJS, I can access form variables within my function like this (for example: s1 = Joe Smith). However, I have a need to update the Indata variable by replacing the a_searchvalue1 with the value stored in s1 but wrapped in quotes. O ...

javascriptangularjs

Obtain Information from an Ajax GET Request

My question is fairly straightforward. I have this Ajax function: function fillProductLine(obj) { $.ajax({type: "POST", url: '/orderOnline/index.php/Orders/searchProductLine', async: false, data: { cd_cpl ...

javascriptphpjqueryajax

Ways to deactivate an HTML anchor tag when the page loads

My website contains an <a> element styled as a button that I need to be disabled when the site loads. However, once a checkbox is checked, I want this a link to become clickable. While I have successfully implemented this functionality using an inpu ...

javascripthtmljquery

When accessing the `.children()` method on a JQuery object derived from a DOM node object, the `innerHtml

function gatherTaskDetails(element) { var info = {}; info.name = $(element).children(".nameHere").text(); info.date = $(element).children(".dateHere").text(); info.class = $(element).children(".classhere").text(); co ...

javascriptjqueryhtml

"Implementing a monorepo with turborepo for seamless deployment on Vercel: A step-by-step

There has been recent news about Turborepo being acquired by Vercel, sparking my interest to dive into it. To start, I initiated a turbo repo project with the following command: pnpx create-turbo Afterwards, I attempted to deploy it on Vercel by referring ...

javascriptnode.jsnext.jsvercelmonorepo

What steps can be taken to ensure that an ObjectID does not transition into a primitive form

Is there a way to avoid an ObjectID from being converted into a primitive data type when transferring in and out of Redis? Would converting it to a JSON string be a possible solution? Thanks! ...

javascriptnode.jsredis

How to assign values to an object within an array in React?

In React, I am currently working on creating a swipeable card that consists of 4 slides. The data displayed within the card is entirely dependent on user input. To start off, I define a sample object like so: const initialState = { id: '', title ...

javascriptarraysreactjsreact-hooksstate

How can one conceal all li elements except for one during a loop on Vue.js version 2.6.11?

To provide a better understanding of the problem, I have included screenshots of the layout. Static Layout Layout when question was clicked There are multiple questions that will be displayed through a loop. Each question is contained within an li tag. ...

javascripthtmlvue.jsvuejs2bootstrap-5

Mastering the art of passing props in VueJS

My setup in the App is quite straightforward, with two main components: The HelloWorld component and a dialog component. The dialog component receives props from the HelloWorld component. The data in the HelloWorld component is rendered by looping over an ...

javascriptvue.jsvuexvuetify.js

Issues with JavaScript Content Loading in epub.js on a Website

Hey there, I'm currently experimenting with the epub.js library and trying to set up the basics. However, I'm encountering an issue where the ebook is not showing up in my browser: <!DOCTYPE html> <html lang="en"> <head&g ...

javascriptnode.js

Creating an Angular loading component using the route parameter

When a user clicks on a link in the home component, I want to load a different component based on the URL parameter. For example, if the user is at "/home" and sees a list of links: Link 1 Link 2 Clicking on Link 1 should load the details component with ...

javascriptangularangular2-routing

Increase the spacing between the column label and the x-axis label in a c3 chart

Take a look at the chart below, I'm attempting to create some additional spacing between the column labels and the x-axis label. https://i.sstatic.net/R7zqN.png I experimented with adding this CSS style: text.c3-axis-x-label { margin-top: 10 ...

javascriptc3.js

Adjusting the location of circles generated by d3 using a time interval

As a newbie to d3 and JavaScript, I'm facing an error that is beyond my current knowledge. I have successfully generated 6 circles using a 2D array and implemented a function to increment their x and y positions by 1 in each call of a timer. However, ...

javascriptasp.net-mvcd3.js

Retrieve the JSON data stored in a varchar column by specifying it as JSON

In my table, there are multiple columns and one column (referred to as EXIF) is of type varchar containing a valid JSON string. I would like to retrieve the data from the table using FOR JSON and include the JSON content from the EXIF column in the result ...

jsonsql-servert-sqlsql-server-2016

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

What is the best way to avoid having identical entries in a row when using jQuery's multiple select feature?

I am facing the challenge of working with multiple rows containing select boxes that have similar content. Each row has several select boxes and each item in a row can only be used once due to specific classifications assigned to each column. I want the se ...

javascriptjqueryselectcheckbox

Tips on concealing Bootstrap 5 modal through button press

I've created a Bootstrap 5 modal that allows users to download a file by clicking a button. Everything works as expected, but I'm facing an issue with hiding the modal after the download button is clicked. I've been trying to use jQuery to ...

javascripthtmljquerybootstrap-modalbootstrap-5