How to draw the change value of two values in amcharts version 3

I have array of three values:

Estimated value
Actual value
Difference between them

I am drawing the smooth line chart using amcharts version 3 library. I want to draw the change value between the two lines.

For example:

If estimated value is 3 and the actual value is 5 then the change is -2 so i want to draw the difference as green. And red in other condition.

The pic is attached as my desired output .

I saw all the available demos of amcharts but didn't find my match. Kindly if someone help me to get the clues, so provide me using the demo data.

Solution

I'm not all that familiar with amcharts, so the styling isn't great.
but in order to add columns in between the lines...

first, the lines will need to be on the same value axis.
otherwise, the column will not be the correct size due to the two different scales.

next, the data. we will need three stacked columns series.
one for the bottom, transparent portion.
another for the red, and the other green.

here, I save the data in a separate variable.

var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];

then use the map method to calculate the difference, or values for the three columns.

'dataProvider': chartData.map(function (row) {
  if (row.ActualValue >= row.EstimatedValue) {
    row.difference0 = row.EstimatedValue;
    row.difference1 = row.ActualValue - row.EstimatedValue;
    row.difference2 = 0;
  } else {
    row.difference0 = row.ActualValue;
    row.difference1 = 0;
    row.difference2 = row.EstimatedValue - row.ActualValue;
  }
  return row;
}),

see following working snippet...

$(document).ready(function() {
  var chartData = [{"EstimatedValue":2612.200000,"ActualValue":2515.983000,"FiscalPeriod":"2018-Q3"},{"EstimatedValue":2423.916666,"ActualValue":2474.223000,"FiscalPeriod":"2018-Q2"},{"EstimatedValue":2462.016666,"ActualValue":2306.282000,"FiscalPeriod":"2018-Q1"},{"EstimatedValue":2325.870000,"ActualValue":2452.967000,"FiscalPeriod":"2017-Q4"},{"EstimatedValue":2203.903750,"ActualValue":2265.209000,"FiscalPeriod":"2017-Q3"},{"EstimatedValue":2225.790000,"ActualValue":2181.652000,"FiscalPeriod":"2017-Q2"},{"EstimatedValue":2136.214285,"ActualValue":2220.898000,"FiscalPeriod":"2017-Q1"},{"EstimatedValue":2069.312500,"ActualValue":2047.270000,"FiscalPeriod":"2016-Q4"},{"EstimatedValue":2017.975000,"ActualValue":2009.491000,"FiscalPeriod":"2016-Q3"},{"EstimatedValue":2072.475000,"ActualValue":2051.932000,"FiscalPeriod":"2016-Q2"},{"EstimatedValue":1810.825000,"ActualValue":2017.268000,"FiscalPeriod":"2016-Q1"},{"EstimatedValue":1694.642857,"ActualValue":1948.765000,"FiscalPeriod":"2015-Q4"},{"EstimatedValue":1722.475000,"ActualValue":1721.400000,"FiscalPeriod":"2015-Q3"}];

  var AverageAnalystEstimatesChart;
  AverageAnalystEstimatesChartgraphCounter = 2;
  AverageAnalystEstimatesChart = AmCharts.makeChart('AverageAnalystEstimatesChart', {
    'type': 'serial',
    'dataProvider': chartData.map(function (row) {
      if (row.ActualValue >= row.EstimatedValue) {
        row.difference0 = row.EstimatedValue;
        row.difference1 = row.ActualValue - row.EstimatedValue;
        row.difference2 = 0;
      } else {
        row.difference0 = row.ActualValue;
        row.difference1 = 0;
        row.difference2 = row.EstimatedValue - row.ActualValue;
      }
      return row;
    }),
    'valueAxes': [{
      'id':'v1',
      'position': 'left',
      'inside':false,
      'autoGridCount' :false,
      'labelOffset': 15,
      'minHorizontalGap' : 100,
      'gridCount' : 8,
      'minimum': 0
    },{
      'id':'v6',
      'position': 'right',
      'inside':false,
      'autoGridCount' :false,
      'labelOffset': 15,
      'minHorizontalGap' : 100,
      'gridCount' : 8,
    },{
      'id':'v5',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridThickness': 0,
    },{
      'id':'v3',
      'position': 'left',
      'inside':true,
      'labelOffset' : 15,
      'minHorizontalGap' : 120,
      'minVerticalGap' : 50,
      'autoGridCount' :false,
      'gridThickness': 0,
      'showFirstLabel' : false
    },{
      'id':'v4',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridCount' : 8,
      'minimum': 0
    },{
      'id':'v7',
      'position': 'left',
      'inside':false,
      'labelOffset': 15,
      'autoGridCount' :false,
      'gridCount' : 8,
      'minimum': 0,
      'stackType': 'regular'
    }],
    'numberFormatter': {
      'precision': 2,
      'decimalSeparator': '.',
      'thousandsSeparator': ''
    },
    'categoryField': 'FiscalPeriod',
    'graphs': [{
      'id': 'g0',
      'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
      'bullet': 'round',
      'bulletSize': 0,
      'lineColor': '#7CB5EC',
      'lineThickness': 3,
      'negativeLineColor': '#7CB5EC',
      'type': 'smoothedLine',
      'valueField': 'ActualValue',
      'title': 'Actual Value',
      'valueAxis': 'v4'
    },{
      'id': 'g1',
      'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
      'bullet': 'round',
      'bulletSize': 0,
      'lineColor': '#EE7B0A',
      'lineThickness': 3,
      'negativeLineColor': '#EE7B0A',
      'type': 'smoothedLine',
      'valueField': 'EstimatedValue',
      'title': 'Estimated Value',
      'valueAxis': 'v4'
    },{
      'id': 'g2',
      'balloonText': '',
      'fillAlphas': 0,
      'lineThickness': 0,
      'type': 'column',
      'valueField': 'difference0',
      'title': '',
      'valueAxis': 'v7'
    },{
      'id': 'g3',
      'balloonText': '',
      'lineColor': 'green',
      'fillAlphas': 1,
      'type': 'column',
      'valueField': 'difference1',
      'title': 'Difference',
      'valueAxis': 'v7'
    },{
      'id': 'g4',
      'balloonText': '',
      'lineColor': 'red',
      'fillAlphas': 1,
      'type': 'column',
      'valueField': 'difference2',
      'title': 'Difference',
      'valueAxis': 'v7'
    }],
    'chartCursor': {
      'categoryBalloonDateFormat': 'DD-MM-YYYY',
      'cursorAlpha': 0,
      'valueLineEnabled': true,
      'valueLineBalloonEnabled': true,
      'valueLineAlpha': 0.5,
      'categoryBalloonColor': '#E2EEF6',
      'color': '#000'
    },
    'categoryAxis': {
      'parseDates': false,
      'minHorizontalGap':110,
      'axisColor': '#fff','labelRotation': 45,'minorGridEnabled': true,'autoGridCount': false,'gridCount':8 , 'labelOffset' : 10
    },
    'legend': {
      'position': 'bottom',
      'equalWidths': false,
      'useGraphSettings': true,
      'valueAlign': 'middle',
      'valueWidth': 300
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>

<div id="AverageAnalystEstimatesChart" style="width: 100%; height: 362px;"></div>