Target Vs Actual Chart

[Satish Yadav]

Hi All,

Please help me to make a Chart using google charts.

I want to display the data in Target and Actual achievement format (Please check attachment).

I want to implement this in my angular project.

Please give me some suggestions or solutions for the same.

Thanks 

Satish Yadav

[Steven Lovell]

Hi Satish,

I would take a look at the Diff Charts here. https://developers.google.com/chart/interactive/docs/gallery/diffchart#diff-bar-and-column-charts

Here is an example of something similar, it will need some extra work to get it to match exactly what you want.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
   
  function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Period', 'Targets'],
      ['Q1', 12],
      ['Q2', 4],
      ['Q3', 10],
      ['Q4', 3]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Period', 'Targets'],
      ['Q1', 3],
      ['Q2', 17],
      ['Q3', 18],
      ['Q4', 4]
    ]);


    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));


    var options = {
    legend: { position: 'top' } ,
    diff: { newData: { widthFactor: 0.5 } }
     
    };

    var diffData = colChartDiff.computeDiff(newData, oldData);
    colChartDiff.draw(diffData, options);

  }

Regards,

Steve.