Chartjs-JS import updated JSON file for use with ChartJS

I have answered my own question by properly looking into what XMLHttpRequest() & JSON.parse() does.

If someone is looking to hook a JSON file into https://www.chartjs.org/ charts then the below might help.

The JSON file

"comms_by_month":[
  {
   "name": "July",
   "month":7,
   "count":0
  },
  {
   "name": "August",
   "month":8,
   "count":1652
  },
  {
   "name": "September",
   "month":9,
   "count":600
  },
  {
   "name": "October",
   "month":10,
   "count":0
 },
  {
   "name": "November",
   "month":11,
   "count":0
 },
  {
   "name": "December",
   "month":12,
   "count":0
  }
]

Get the JSON file into a var

<script>
  // Set the var for the json file located on the web server 
  var jsonFile_dash_comms_by_month = 'http://hostname/portal/js/export_json/dash-comms-by-month.json';
  var request = new XMLHttpRequest();
  request.open("GET",jsonFile_dash_comms_by_month,false);
  request.send(null)
  var jsonObj_dash_comms_by_month = JSON.parse(request.responseText);
</script>

A div where the chart will be displayed

<div class="ca-comms-by-month"></div>

Functions to get the labels and datasets into a var

<script>
    var labels = jsonObj_dash_comms_by_month.comms_by_month.map(function(e) {
      return e.name;
    });
    var data = jsonObj_dash_comms_by_month.comms_by_month.map(function(e) {
      return e.count;
    });
</script>

Function to create the CharJS config

See (http://www.chartjs.org/docs/latest/configuration/) for more about ChartJs config.

<script>
  function createConfig(details, data) {
    return {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Comms count by month',
                steppedLine: details.steppedLine,
                data: data,
                borderColor: details.color,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            title: {
                display: false,
                text: details.label,
            },
            tooltips: {
                enabled:true, // Disable this for custom tool tips || http://www.chartjs.org/docs/latest/configuration/tooltip.html
                mode: 'index',
                intersect: false,
                cornerRadius:0
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Count'
          },
          ticks: {
              beginAtZero:true
            }
        }]
      },
      legend: {
        display: false, // False to hide the legdend dataset tile
        labels: {
          fontColor: 'rgb(255, 99, 132)'
        }
      }
        }
    };
}<script>

On load function to display the chart

<script>
    window.onload = function()
    {
        var container = document.querySelector('.ca-comms-by-month');
        var steppedLineSettings = [{
            steppedLine:false,
            label: '',
            color: window.chartColors.purple
        }];
        steppedLineSettings.forEach(function(details) {
            var div = document.createElement('div');
            div.classList.add('chart-container');
            var canvas = document.createElement('canvas');
            div.appendChild(canvas);
            container.appendChild(div);
            var ctx = canvas.getContext('2d');
            var config = createConfig(details, data);
            new Chart(ctx, config);
        });
    };
</script>

This gave me the below chart

I would be keen to hear from anyone who can point out any improvements on the above. I am expecting to have 10+ charts on a dashboard type page.

Thanks

edwoli