skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search