Spotfire JsViz Clustered Bar Chart with sub-categories using AmCharts 4 library

[Mohd faizal Adris]

I have managed to develop a comparison chart using Amcharts 4 library (https://www.amcharts.com/demos/layered-column-chart/) in Spotfire X and it'sworked perfectly.

Now, I am thinking to improve the chart appearance based on this examplehttps://jsfiddle.net/api/post/library/pure/(with minor modification on the column series). In order to draw the chart, it's required to pass JSON data according to the belowformat which I have no idea how to achieve in Spotfire.

var data =

{

"Provider1":{

"item 1": 10,

"item 2": 35,

"item 3": 5,

"item 4": 20,

"quantity":430

},

"Provider 2": {

"item 1": 15,

"item 3": 21,

"quantity":210

},

"Provider 3": {

"item 2": 25,

"item 3": 11,

"item 4": 17,

"quantity":265

},

"Provider 4": {

"item 3": 12,

"item 4": 15,

"quantity":98

}

}

To preventeveryone from getting confused, here is the code snippet I have used to generate JSON data for the existing chart:

 

var chartdata2 = new Array();

for (var i = 0; i < chartdata.length; i++) {

var category = new Object();

 

category.category = chartdata.items[0];

category.site = chartdata.items[1];

category.goal = chartdata.items[2];

category.actual = chartdata.items[3];

chartdata2.push(category);

 

wait(sfdata.wait, sfdata.static);

}

Here is the output from Spotfire;

Array(3)

0:

actual: 96397632

category: "A"

goal: 96000000

site: "MY"

__proto__: Object

1:

actual: 118172574

category: "B"

goal: 100000000

site: "CN"

__proto__: Object

2:

actual: 85588540

category: "C"

goal: 130000000

site: "SG"

__proto__: Object

length: 3

__proto__: Array(0)

Any help is much appreciated!