Plot a multi-line graph from grouped JSON object using Charts.js

Question

I grouped a JSON object and now I'm trying to plot a multi-line graph from each lead source to compare on one main graph. Thank you in advance for any helpful suggestions.

Link to JSON object after grouped https://codepen.io/edwardgnt/post/json-object

var ctx = document.getElementById('leads_source_canvas').getContext('2d');
var dataset = {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'SOCIAL MEDIA OUTBOUND',
      backgroundColor: 'rgba(0, 149, 255, 0.70)',
      borderColor: 'rgba(0, 149, 255, 0.75)',
      hoverBackgroundColor: 'rgba(0, 149, 255, 1)',
      hoverBorderColor: 'rgba(0, 149, 255, 1)',
      data: []
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}


var getData = function(chartdata) {
  $.ajax({
    url: 'http://admin/chart/leads_source_chart',
    success: function(data) {
      console.log(data);

      data.forEach((el, i) => {
        chartdata.data.labels.push(el.CreatedDate);
        chartdata.data.datasets[0].data.push(el.NumLeads);
      });
      var myChart = new Chart(ctx, chartdata);

    }
  });
};
getData(dataset);

Code I currently have is from a non grouped json object.

Graph code link: codepen.io/edwardgnt/post/graph-code-for-single-line-graph — Eduardo Güereque
– Eduardo Güereque, Commented Aug 7, 2019 at 17:39

tuhin47 · Accepted Answer · 2019-08-08 05:01:55Z

Here is the solution.

var ctx = document.getElementById('myChart').getContext('2d');
var dataset = {
  type: 'line',
  data: {
    labels: [],
    datasets: []
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}

function getRandomRgb() {
  var num = Math.round(0xffffff * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}



var getData = function(chartdata) {
  $.ajax({
    url: 'https://api.myjson.com/bins/qw7np',
    //url:'https://api.myjson.com/bins/fadwx',
    success: function(data) {

      console.log(data);
      var dates = [];
      Object.keys(data).forEach((k, i) => {
        var obj = {};
        obj['label'] = k;
        obj['fill'] = false;
        obj['data'] = [];
        obj['borderColor'] = getRandomRgb();
        chartdata.data.datasets.push(obj);
        data[k].forEach(el => {
          dates.push(el.CreatedDate);
        });
      });
      dates = [...new Set(dates)].sort();
      chartdata.data.labels = dates;
      Object.keys(data).forEach((k, i) => {


        dates.forEach(d => {
          var mark = true;
          data[k].forEach(el => {
            if (el.CreatedDate === d) {
              mark = false;
              chartdata.data.datasets[i].data.push(el
                .NumLeads);
            }
          });
          if (mark)
            chartdata.data.datasets[i].data.push(0);

        });

      });
      console.log(chartdata);



      var myChart = new Chart(ctx, chartdata);

    }
  });
};
getData(dataset);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

Wow! You saved me. Greatly appreciated. Thank you. Works great!

Collectives™ on Stack Overflow

Plot a multi-line graph from grouped JSON object using Charts.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related