[Chartjs]-How to reference array results into Chartjs dataset in Javascript

by

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>

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>

Leave a comment