Exploring Amcharts using detailed JSON data

[{"SUM_PTS":{"datatype":"INTEGER","length":"8","value":"29903727","obfuscated":"false"},"SUM_TOTAL":{"datatype":"INTEGER","length":"10","value":"1644704985","obfuscated":"false"},"MID":{"datatype":"ALPHANUMERIC","length":"27","value":"Vendor 1","obfuscated":"false"}},{"SUM_PTS":{"datatype":"INTEGER","length":"7","value":"3283570","obfuscated":"false"},"SUM_TOTAL":{"datatype":"INTEGER","length":"9","value":"180596350","obfuscated":"false"},"MID":{"datatype":"ALPHANUMERIC","length":"23","value":"Vendor 2","obfuscated":"false"}}]

How can I define the valueField and titleField based on the complex JSON structure provided above?

I am facing difficulties with assigning SUM_PTS and MID as the valueField and titleField, probably due to the verbosity of my JSON compared to the examples. While I am unable to modify the JSON format, I seek a solution using Amcharts Javascript.

javascriptjsonamcharts

Answer №1

If we consider that SUM_PTS holds the value and MID contains the title, converting it to a simple dataProvider format is quite easy:

//assuming rawJson has the data mentioned above:

var dataProvider = rawJson.map(function(jsonObj) {
  return {
    "title": jsonObj.MID.value,
    "value": jsonObj.SUM_PTS.value
  }
});

Now, let's represent this remapped data in the form of a pie chart for demonstration purposes:

var rawJson = [{
"SUM_PTS": {
"datatype": "INTEGER",
"length": "8",
"value": "29903727",
"obfuscated": "false"
},
"SUM_TOTAL": {
"datatype": "INTEGER",
"length": "10",
"value": "1644704985",
"obfuscated": "false"
},
"MID": {
"datatype": "ALPHANUMERIC",
"length": "27",
"value": "Vendor 1",
"obfuscated": "false"
}
}, {
"SUM_PTS": {
"datatype": "INTEGER",
"length": "7",
"value": "3283570",
"obfuscated": "false"
},
"SUM_TOTAL": {
"datatype": "INTEGER",
"length": "9",
"value": "180596350",
"obfuscated": "false"
},
"MID": {
"datatype": "ALPHANUMERIC",
"length": "23",
"value": "Vendor 2",
"obfuscated": "false"
}
}]

var dataProvider = rawJson.map(function(jsonObj) {
  return {
    "title": jsonObj.MID.value,
    "value": jsonObj.SUM_PTS.value
  }
});

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "titleField": "title",
  "valueField": "value",
  "dataProvider": dataProvider
})
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>

<div id="chartdiv" style="width: 100%; height: 300px"></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

Discovering how to query for indexed information using SOLRJ is an essential skill for effectively utilizing

Upon navigating to the administration page of my SOLR server, I discovered a specific request being made: http://localhost:8983/solr/documents/admin/luke?wt=json&show=index&numTerms=0 This request retrieves essential information about the index ...

jsonsolrsolrj

Can one attempt to change the data type while working with Rust's serde JSON?

I am currently facing an issue with using rust serde json to deserialize a JSON string. Due to limitations in front-end JavaScript handling of the i64 data type, the server side is converting the i64 to a string by default. This default action causes the R ...

jsonrust

Using Javascript within a PHP file to generate JSON output

Can you integrate Javascript code within a PHP file that utilizes header('Content-Type: application/json'); to produce output in JSON format? UPDATE: I'm attempting to modify the color of a CSS class when $est = 'Crest', but the J ...

javascriptphpjson

Why is the startsWith function not returning the expected result in my code? What could be causing this issue?

I have a code snippet that sorts a list based on user input, but it fails if the user's input contains spaces. How can I modify the code to handle inputs with spaces without removing the spaces between characters? For example, if the user input is &ap ...

javascriptjsonsortingcomparestring-comparison

Execute a middleware prior to running the Nest Js ServeStaticModule command

Is there a way to execute middleware before Nest JS serves my React application through the ServeStatic Module? I've attempted using both a Nest middleware and Global middleware, but they only seem to work for static routes such as '/'. mai ...

javascriptnode.jsexpressnestjsmiddleware

Guide to fetching and returning data from AJAX using a function

In my JavaScript file, I have a function that retrieves a value asynchronously from the server: function retrieveValue(userId) { $.ajax({ type: "POST", url: "http://localhost/bghitn/web/app_dev.php/get_number_of_articles", data ...

javascriptphpjqueryajaxsymfony

Webpage video stalling due to buffering

Currently, I am developing personalized video controls and have integrated a @progress event to monitor the video buffering progress and adjust the width of a progress bar div: <video @progress="videoBuffer($event)"> videoBuffer(e) { if ...

javascripthtmlvue.js

Parsing JSON arrays within another array without a key in Android can be done in a

I'm a newcomer to JSON and I've encountered some challenges with parsing a JSON array named "genres". Currently, it is functioning as an object but the display is not ideal. My goal is to have the "genres" display as Drama, Musical instead of [" ...

androidarraysjson

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

Encountered difficulty parsing json data using cUrl in a PHP script

This is my first time encountering a web service. The JSON data from the .NET server is received and encoded to base64 by the PHP server. The issue I am facing currently is the inability to access each attribute within the data: Array ( [JSONDataResult] ...

phpjsoncurl

Mall magnitude miscalculation

I am currently experiencing an issue with Galleria and the Flickr plugin. Some images are displaying correctly, while others appear scaled and parts of them are cut off. How can I fix this problem? Below is the HTML code for the Galleria gallery on my web ...

javascriptjqueryhtmldrupalgalleria

Inserting Random Data into MySQL Tables using Node.js

I am currently working on developing a game bot for Discord similar to Town of Salem, Wolvesville, Feign, and others. Within my database, I have a table called "joinedplayer" which stores users who have used the "join" command: gamerid discordid 1 ...

javascriptmysqlnode.js

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

utilizing asp.net core 2 MVC to showcase JSON data from controller in view through AJAX requests

When I click a button, an ajax function is called within a modal that triggers a Controller action and passes a parameter to the controller. The aim is to return strings as Json data back to the view and display them in the same Modal. Strangely, this setu ...

c#jsonmodel-view-controller

Utilizing memcache in conjunction with PHP and Node.js

Can JavaScript objects and PHP associative arrays be shared with memcache? Alternatively, is it necessary to convert the data into a string before sharing them? ...

phpjavascriptnode.jsmemcached

Having trouble with Selenium WebDriverJS on both FireFox and Internet Explorer

Having developed multiple JavaScript tests using chromedriver to run them in Chrome, I am now facing the challenge of running these same tests in FireFox and IE. The test below is functional in Chrome: var assert = require('assert'), test = requ ...

javascriptinternet-explorerfirefoxseleniumselenium-webdriver

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

javascriptjqueryhtmlcss

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

javascriptreactjstypescripttypes

extraction of information from an object within an array

I am working with an array of objects containing certain keys and values. My goal is to organize these objects by key and then display all the values associated with each key together. [ { '18': 'x' }, { '17': 'y' ...

javascriptnode.js