How to reference array results into Chartjs dataset in Javascript - Jquery

himedabimes
August 24, 2022
215 views
0 votes
2 Answers

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>

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to reference array results into Chartjs dataset in Javascript – Jquery

Answers