How to create a grouped waterfall chart in amchart?

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 "Population" as my categoryPath and "Value" to be my valuePath. I want the "Population" field to display as the total value for that year. Then I have an another field called "State" that will be the increasing/decreasing values(floating columns). How would I go about in achieving this?

This is my data : `{

"Population 1":[
      {
         "waterfallData.PopulationName":"Population 1",
         "waterfallData.Value":-2333,
         "waterfallData.State":"State 2"
      },
      {
         "waterfallData.PopulationName":"Population 1",
         "waterfallData.Value":8786,
         "waterfallData.State":"State 1"
      }
   ],
   "Population 2":[
      {
         "waterfallData.PopulationName":"Population 2",
         "waterfallData.Value":-1000,
         "waterfallData.State":"State 2"
      },
      {
         "waterfallData.PopulationName":"Population 2",
         "waterfallData.Value":5000,
         "waterfallData.State":"State 1"
      }
   ],
   "Population 3":[
      {
         "waterfallData.PopulationName":"Population 3",
         "waterfallData.Value":-2000,
         "waterfallData.State":"State 2"
      },
      {
         "waterfallData.PopulationName":"Population 3",
         "waterfallData.Value":3000,
         "waterfallData.State":"State 1"
      }
   ]
}

I am using amCharts version 3. 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: xPath ? trendLines : [{
        "dashLength": 3,
        "finalCategory": "Income B",
        "finalValue": 11.13,
        "initialCategory": "Income A",
        "initialValue": 11.13,
        "lineColor": "#888888"
      }, {
        "dashLength": 3,
        "finalCategory": "Expenses A",
        "finalValue": 15.81,
        "initialCategory": "Income B",
        "initialValue": 15.81,
        "lineColor": "#888888"
      }, {
        "dashLength": 3,
        "finalCategory": "Expenses B",
        "finalValue": 12.92,
        "initialCategory": "Expenses A",
        "initialValue": 12.92,
        "lineColor": "#888888"
      }, {
        "dashLength": 3,
        "finalCategory": "Revenue",
        "finalValue": 8.64,
        "initialCategory": "Expenses B",
        "initialValue": 8.64,
        "lineColor": "#888888"
      }],
      columnWidth: 0.6,
      categoryField: xPath,
      categoryAxis: {
        gridPosition: "start",
        axisAlpha: 0,
        gridAlpha: 0.1,
        title: categoryLabel,
        labelRotation: 45
      },
      export: {
        enabled: true
      }
    };

So from this grouped data. How do I assign the open and close values to match the expected output?


sample output is something like this :

enter image description here