How to plot object to charts.js

Question

In the past I have plotted json objects inside an array but I'm wondering how I can plot these array of objects inside an array. I think I'm writing this correctly or it might be starring me in the face. Trying to plot using charts.js Thank you in advance for any helpful suggestions.

OBJECT Example:

{ "SOCIAL MEDIA OUTBOUND": [{ "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-06-21", "NumLeads": "4" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-26", "NumLeads": "26" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-27", "NumLeads": "28" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-28", "NumLeads": "36" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-29", "NumLeads": "27" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-30", "NumLeads": "29" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-07-31", "NumLeads": "21" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-01", "NumLeads": "38" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-02", "NumLeads": "26" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-03", "NumLeads": "27" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-04", "NumLeads": "19" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-05", "NumLeads": "24" }, { "LeadSource": "SOCIAL MEDIA OUTBOUND", "CreatedDate": "2019-08-06", "NumLeads": "17" }]

tuhin47 · Accepted Answer · 2019-08-07 08:02:55Z

0

You can build a bar chart like this. I export your JSON data here and make an ajax request to fetch the data and using it in charts.

var ctx = document.getElementById('myChart').getContext('2d');
  var dataset = {
    type: 'bar',
    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: 'https://api.myjson.com/bins/fadwx',
      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);

<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="400" height="400"></canvas>

answered Aug 7, 2019 at 8:02

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eduardo Güereque Over a year ago

thank you so much!!! Works great! I have another quick related question. I can also post in a new post as well. I have done a group by on a json object since I was needing to make a multi-line graph for each lead source. Here's my json object:

Eduardo Güereque Over a year ago

Here's my json object link: codepen.io/edwardgnt/post/json-object

Eduardo Güereque Over a year ago

Here's my JSON object group code: codepen.io/edwardgnt/post/json-object-groupby

tuhin47 Over a year ago

welcome. I don't get your new question. you can open a new question with some elaboration. moreover, If this answer is correct for the current question, you can make it accepted. It will be helpful. Thanks in advance

Eduardo Güereque Over a year ago

Ok, sounds good. I'll make another post. I greatly appreciate your time and code. Accepted

|

Collectives™ on Stack Overflow

How to plot object to charts.js

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related