Using Count values in another function for my Chart.js Pie Chart

Question

Using Chart.js to display a Pie Chart.

However, I'm hard coding the data values.

Below is the entire code:

$(function(){

//Start Data Pull

//End Data Pull
  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
//alert("after the JQuery " + countPie);
  //pie chart data
  var data1 = {
    labels: ["Dog", "Cats", "Fish"],
    datasets: [
      {
        label: "Pets",
        data: [5, 4, 5],
        backgroundColor: [
          "#DEB887",
          "#A9A9A9",
          "#DC143C",

        ],
        borderColor: [
          "#CDA776",
          "#989898",
          "#CB252B",

        ],
        borderWidth: [1, 1, 1]
      }
    ]
  };

  //options
  var options = {
    responsive: true,
    /*title: {
      display: true,
      position: "top",
      text: "Pets",
      fontSize: 18,
      fontColor: "#111"
    },*/
    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: "#333",
        fontSize: 10
      }
    }
  };

  //create Chart class object
  var chart1 = new Chart(ctx1, {
    type: "pie",
    data: data1,
    options: options
  });

});

It works great. However, I don't want to hard code the data values

data: [5, 4, 5],

Now I am using a count function on another feature on my SharePoint site. It is coming up with the 3 values I want to use on the chart. Here's the code for that

<script type="text/javascript">

    //alert("test");
    var clientContext = null;
    var web = null;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
    function Initialize()
    {
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        var list = web.get_lists().getByTitle("Animals");
        var camlQuery = new SP.CamlQuery();
        var camlQueryCa = new SP.CamlQuery();
        var camlQueryCo = new SP.CamlQuery();
        var camlQueryT = new SP.CamlQuery();
        var q = "<View><Query><Where><Eq><FieldRef Name='Pets' /><Value Type='Text'>Dog</Value></Eq></Where></Query><RowLimit>0</RowLimit></View>";
        var ca = "<View><Query><Where><Eq><FieldRef Name='Pets' /><Value Type='Text'>Cat</Value></Eq></Where></Query><RowLimit>0</RowLimit></View>";
        var co = "<View><Query><Where><Eq><FieldRef Name='Pets' /><Value Type='Text'>Lizard</Value></Eq></Where></Query><RowLimit>0</RowLimit></View>";     
        var t = "<View><RowLimit>0</RowLimit></View>";      
        camlQuery.set_viewXml(q);
        camlQueryCa.set_viewXml(ca);
        camlQueryCo.set_viewXml(co);
        camlQueryT.set_viewXml(t);
        this.listItems = list.getItems(camlQuery);
        this.listItemsCa = list.getItems(camlQueryCa);
        this.listItemsCo = list.getItems(camlQueryCo);  
        this.listItemsT = list.getItems(camlQueryT);        
        clientContext.load(listItems, 'Include(ID)');
        clientContext.load(listItemsCa, 'Include(ID)');
        clientContext.load(listItemsCo, 'Include(ID)');     
        clientContext.load(listItemsT, 'Include(ID)');  
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), 
        Function.createDelegate(this, this.onQueryFailed));
    }
    function onListItemsLoadSuccess(sender, args) {

        var count = this.listItems.get_count();
        var countCa = this.listItemsCa.get_count();
        var countCo = this.listItemsCo.get_count();

    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }

</script>

Is there a way I can add the value count, countCa and CountCo in the data labels? In other words

data: [count, countCa, CountCo],

Answer 1

Yes, just move all the chart code (everything after your //End Data Pull comment) to be inside your onListItemsLoadSuccess function, after the three lines you already have there.

Then you will be able to do

data: [count, countCa, countCo],

Or, for better readability, put all your chart code into another function named, for instance, "drawChart" that takes the three values as parameters, like

function drawChart(count, countCa, countCo) {

    // all your code after the End Data Pull comment up to where you set the data

    data: [count, countCa, countCo],

    // and then all the rest
}

and then call that function from your success callback like

function onListItemsLoadSuccess(sender, args) {

    var count = this.listItems.get_count();
    var countCa = this.listItemsCa.get_count();
    var countCo = this.listItemsCo.get_count();

    drawChart(count, countCa, countCo);

}