Xtykutl

I would like to create a grouped waterfall chart using AmCharts.
My data would have two dimensions for the category and 1 dimension for the value.
For example , say I have "Year" as my categoryPath and "Cost" to be my valuePath. I want the "Year" field to display as the total cost for that year. Then I have an extra field called "Items" that will be the increasing/decreasing values(floating columns). How would I go about in achieving this?

This is my data : https://api.myjson.com/bins/s6652;

I am using amCharts version 3. I have assigned the open and close values like so :

var dNest = d3.nest()

        .key(function (d) { return d["Year"]; })

        .entries(rawData);

      dNest.forEach(function (d) {

        d["Year"] = d.key;

        d.children = d.values;



        delete d["Year"];

        delete d.key;

        delete d.values;

      });

var totalValue = 0;

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

        dNest[i].children.forEach(function (d, j) {

          totalValue += d["Cost"];



          if (i == 0 && j == 0) {

            d.open = 0;



            d.close = d.open + d["Cost"];//parseFloat(d.open + totalValue).toFixed(2);

            d.balloonValue = parseFloat(d.close - d.open).toFixed(2);



          }

          else {

            d.open = dNest[i].children[j - 1].close;

            d.close = d.open + d["Cost"];



            d.balloonValue = parseFloat(d.close - d.open).toFixed(2);



          }

        })



      }

Amchart settings

 var settings = {

      type: "serial",

      theme: "light",

      dataProvider: transformedData,

      legend: {

        data: [{ title: "Increasing", color: "#54cb6a" }, { title: "Decreasing", color: "#cc4b48" }]

      },

      valueAxes: valueAxe,

      startDuration: 1,

      graphs: [

        {

          balloonText: "<span style='color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]]</b>",

          colorField: "color",

          fillAlphas: 0.8,

          labelText: "$[[balloonValue]]",

          lineColor: "#BBBBBB",

          openField: "open",

          type: "column",

          valueField: "close",

          adaptiveLabelPosition: true

        }

      ],

      trendLines: trendLines,

      columnWidth: 0.6,

      categoryField: xPath,

      categoryAxis: {

        gridPosition: "start",

        axisAlpha: 0,

        gridAlpha: 0.1,

        labelRotation: 45

      },

      export: {

        enabled: true

      }

    };

  }

First I nest it to group all of it together. Unfortunately AmCharts don't support nested JSON data. So how do I flatten all the children into its parent and obtain my expected output?

sample output is something like this :