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