[Chartjs]-Chartjs dynamic chart return both x & y axis undefined

by

2👍

✅

Your chartdata object doesn’t contain valid ChartJS options

This should work:

    var data = [{"FiscalPeriod":"01","Sold":"357508.03"},{"FiscalPeriod":"02","Sold":"393790.14"},{"FiscalPeriod":"03","Sold":"407346.07"},{"FiscalPeriod":"04","Sold":"557704.12"},{"FiscalPeriod":"05","Sold":"555916.68"},{"FiscalPeriod":"06","Sold":"422659.26"},{"FiscalPeriod":"07","Sold":"297766.49"},{"FiscalPeriod":"08","Sold":"448256.07"},{"FiscalPeriod":"09","Sold":"510020.86"},{"FiscalPeriod":"10","Sold":"325525.30"},{"FiscalPeriod":"11","Sold":"89214.27"}];
    var month = [];
    var sold = [];

    for (var i in data) {
      month.push(data[i].FiscalPeriod);
      sold.push(data[i].Sold);
    }

    var chartdata = {
      type: 'line',
      data: {
        labels: month,
        datasets: [
          {
            label: '2017',
            data: sold,
            backgroundColor: '#26B99A',
          }
        ]
      },
    }
    var ctx = document.getElementById('chartJSContainer').getContext('2d');
    new Chart(ctx, chartdata);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment