Update RPGs Average Cost chart to load data from JSON file

[sarinapadilla]

The RPGs Average Cost highchart currently hardcodes the data for the chart within the .js file. The javascript should load the data from a JSON file uploaded in the CMS.

Chart .js: https://github.com/NCIOCPL/cgov-digital-platform/blob/develop/docroot/profiles/custom/cgov_site/themes/custom/cgov/cgov_common/src/libraries/charts/library/rpg-cost-per-award.js

Parent Issue: #3008

Notes

Data:

{
    chart: {
      type: 'NCI_averageCost'
    },
    title: { text: 'RPGs Average Cost' },
    subtitle: { text: 'Fiscal Years 2011 - 2020' },
    plotOptions: {
      series: {
        pointStart: 2011
      }
    },
    series: [{
      name: 'No. Awards',
      type: 'column',
      yAxis: 0,
      data: [5019, 5021, 4816, 4814, 4767, 4666, 4663, 4780, 4984, 5070]
    }, {
      name: 'Total Funded (thousands)',
      type: 'column',
      yAxis: 1,
      data: [2088352, 2075295, 1924803, 1939623, 2019308, 2068869, 2195184, 2366530, 2456156, 2677206],
      tooltip: {
        valuePrefix: '$'
      }
    }],
    yAxis: [{
      id: 'awards',
      title: {
        text: 'No. Awards',
        style: { color: '#3FBFA2' }
      },
      min: 4000,
      max: 6000,
      labels: {
        formatter: function () {
          return Highcharts.numberFormat(this.value, 0)
        }, style: { color: '#3FBFA2' }
      }
    }, {
      id: 'funding',
      title: {
        text: 'Total Funded (thousands)',
        style: { color: '#984E9B' }
      },
      min: 1500000,
      max: 2250000,
      gridLineWidth: 0,
      labels: {
        formatter: function () {
          return '$' + Highcharts.numberFormat(this.value, 0)
        }, style: { color: '#984E9B' }
      }
    }, {
      id: 'average',
      title: {
        text: 'Average Cost (thousands)',
        style: { color: '#FB792F' }
      },
      min: 350,
      max: 500,
      gridLineWidth: 0,
      opposite: true,
      labels: {
        formatter: function () {
          return '$' + Highcharts.numberFormat(this.value, 0)
        }, style: { color: '#FB792F' }
      }
    }, {
      id: 'perAward',
      gridLineWidth: 0,
      title: {
        text: 'Average Cost (thousands)'
      },
      labels: {
        format: '${value}'
      },
      visible: false
    }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          yAxis: [{
            labels: {
              formatter: function () {
                return (this.value / 1000)
              },
              x: -5
            },
            title: {
              text: 'No. Awards',
              margin: 5
            }
          }, {
            labels: {
              formatter: function () {
                return '$' + (this.value / 1000000)
              },
              x: 5
            },
            title: {
              text: 'Total Funded (thousands)',
              margin: 0
            }
          }, {
            labels: {
              rotation: -60,
              x: 10
            },
            title: {
              margin: 0
            }
          }]
        }
      }]
    }
}

[sarinapadilla]

This task was completed with PR #3778, so closing this ticket!