0

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],
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);

}
| improve this answer | |
  • Thanks! It worked! You da man! – adams-j May 21 '19 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.