How to reference array results into Chartjs dataset in Javascript

Question

I have managed to get a count of items in list by status, but cant seem to figure out how to add the data into Chart.js. I have tried referencing my dataset from within the chart but that does not seem to work. Any assistance would be greatly appreciated. I have pieced together some code to try to get this to work but cant seem to get this last piece. ps. This code is being used in content editor in SharePoint.

Thank you,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button onclick="GetListItems();" type="button">Get All List Items</button>
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  function GetListItems() {
    var url = "https://contoso.sharepoint.com/sites/Mysite/_api/web/lists/getByTitle('Mylist')/items?$top=500";
    $.ajax({
      url: url,
      type: "GET",
      headers: {
        "accept": "application/json; odata=verbose"
      },
      success: onSuccess
    });
  }

  function onSuccess(data) {
    var items = data.d.results;
    const MyDataset = [];

    var NewItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "New";
    });
    var InProcItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "In Process";
    });
    var CompItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "Completed";
    });
    MyDataset.push(NewItems.length);
    MyDataset.push(InProcItems.length);
    MyDataset.push(CompItems.length);
    console.log(MyDataset);
  }

  const labels = ['New', 'Completed', 'Inproccess'];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [5, 5, 5, 2, 2, 30, 45],// use MyDataset here instead of random.
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {}
  };
</script>

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

You need to convert your dataset into the format chart js wants it: chartjs.org/docs/latest/general/data-structures.html — Pete
– Pete, Commented Aug 24, 2022 at 10:35

Camille · Accepted Answer · 2022-09-01 20:15:43Z

1

That should do what's you expect. I cannot test because data ajax call is not public.

<!-- External Lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- HTML / Template -->
<button onclick="GetListItems();" type="button">Get All List Items</button>
<div>
    <canvas id="myChart"></canvas>
</div>

<!-- Javascript -->
<script>
    function GetListItems() {
        var url = "https://contoso.sharepoint.com/sites/Mysite/_api/web/lists/getByTitle('Mylist')/items?$top=500";
        $.ajax({
          url: url,
          type: "GET",
          headers: {
            "accept": "application/json; odata=verbose"
          },
          success: onSuccess
        });
    }

    function onSuccess(data) {
        var items = data.d.results;
        var MyDataset = [];

        var NewItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "New";
        });
        var InProcItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "In Process";
        });
        var CompItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "Completed";
        });
        MyDataset.push(NewItems.length);
        MyDataset.push(InProcItems.length);
        MyDataset.push(CompItems.length);
        console.log(MyDataset);
        createChar(MyDataset);
    }

    function createChar(dataset) {
        const labels = ['New', 'Inproccess', 'Completed'];
        const data = {
            labels: labels,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data:dataset
            }]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {}
        };
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    }
</script>

edited Sep 1, 2022 at 20:15

answered Aug 26, 2022 at 14:23

Camille

2,5611 gold badge19 silver badges38 bronze badges

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

3 Comments

hime-da-bimes Over a year ago

I had originally tried this by using the reference of mydataset in dataset object. However, even after using your code I got the same result and the chart does not display. Also I get the error Mydataset is not defined.

hime-da-bimes Over a year ago

omg bahh I was so close. Thank you! this version worked.

Camille Over a year ago

Great! Glad to know. When a answer help you fix your issue, it's nice practice in StackOverflow community to 'reward' user who made it by clicking on gray tick to accept answer (between up/down arrows for voting).

Camille · Accepted Answer · 2022-08-24 19:33:44Z

0

You specify 3 labels and provide 7 element in data.

To resolve your problem, try with a simple config

const config = {
    type: 'bar',
    labels: labels // Your array of label
    data: {
        datasets: [{
          data: [1, 2, 3], // Random data
        }],
    }
};

When that display something, try to add complexity.

By guessing, I believe you want something like that

const config = {
    type: 'bar',
    labels: labels, // Your array of label
    data: {
        datasets: [{
            data: [
                {x:'New', y:1},{x:'Completed', y:10},{x:'Inproccess', y:100},
                {x:'New', y:2},{x:'Completed', y:20},{x:'Inproccess', y:200},
                {x:'New', y:3},{x:'Completed', y:30},{x:'Inproccess', y:300},
             ]
        }]
    }
};

It's hard to help you as you didn't specify what kind of result chart you want to see...

your code working (snippet)

  const labels = ['New', 'Completed', 'Inproccess'];

  const config = {
      type: 'bar',
      labels: labels,
      data: {
          datasets: [{
              label : 'Chart1',
              data: [
                  {x:'New', y:1},{x:'Completed', y:10},{x:'Inproccess', y:100},
                  {x:'New', y:2},{x:'Completed', y:20},{x:'Inproccess', y:200},
                  {x:'New', y:3},{x:'Completed', y:30},{x:'Inproccess', y:300},
              ]
          }]
      }
  };


  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

edited Aug 24, 2022 at 19:33

answered Aug 24, 2022 at 12:03

Camille

2,5611 gold badge19 silver badges38 bronze badges

2 Comments

hime-da-bimes Over a year ago

Is it possible to use mydataset array to display in the chart? That is ultimately what I am trying to achieve. Thank you.

Camille Over a year ago

On what label are link those data? 'New', 'Completed' or 'Inproccess'? Ether data represent values of only one of those label (so need other label's data), ether each of those 7 data (5, 5, 5, 2, 2, 30, 45) represent a value of different label (example : first 5 = 'New', second 5 = 'Completed', ...). If that's not clear try to draw an image (Excel or Paint) of results you want, that will be help for understand what's result you have in mind.

Collectives™ on Stack Overflow

How to reference array results into Chartjs dataset in Javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related