Add multiple chart in SharePoint from SharePoint list using Jquery

In previous article we learned how we can add a chart in SharePoint using Jquery and HTML.

Now in this article we will try to add multiple chart one above another getting the data from the SharePoint list.

Remember our SharePoint list

chart_01
SharePoint List for Chart

Initially we displayed the number of employees in each Department (IT-10, IT-12,IT-13,IT-14, Total) which are OnBoard. Now we will try to add one more chart which displays the total number of employees for each department on top of the OnBoard employees.

Basically we want to see how many are recruited and how many are OnBoard for each Department.

Let’s see what do we need

  • Four new variables to store the total  recruited employee for each department.
  • New  data-set for new chart
    • {label:”Total Employees”,label:”Total Employees”,  type: ‘line’,     fill:false,             data:counterIT_T10,counterIT_T12,counterIT_T13,counterIT_T14,counterIT_T10+counterIT_T12+counterIT_T13+counterIT_T14],   borderWidth: 2,         backgroundColor: “#0072C6″,borderColor:”black”,}
  • Logic to put the data label value and distinguish the chart from earlier chart
    • Add different colors and different chart type: Line Chart

I am going to add the JavaScript only that was used. If you replace the JavaScript from the earlier  solution, you should get two chart as shown in below image.

[code language=”JavaScript”]

$(document).ready(function () {
$.ajax({url: “/_api/Web/lists/GetByTitle(‘Employee Summary’)/items?$top=2000&$orderby=Department”,
type: “GET”,
headers: {“Accept”: “application/json;odata=verbose”},
success: function(data){
var counterIT10=0;
var counterIT12=0;
var counterIT13=0;
var counterIT14=0;
//following are the new variables used for storing the number of employees hired in each department
var counterIT_T10=0;
var counterIT_T12=0;
var counterIT_T13=0;
var counterIT_T14=0;
$.each(data.d.results, function(index, item) {
if(item.Department==’IT-10′ && item.Status==’OnBoard’)
{ counterIT10++;}
if(item.Department==’IT-10′)
{ counterIT_T10++;}
if(item.Department==’IT-12′ && item.Status==’OnBoard’)
{counterIT12++;}
if(item.Department==’IT-12′)
{counterIT_T12++;}
                     if(item.Department==’IT-13′ && item.Status==’OnBoard’)
{counterIT13++;}
if(item.Department==’IT-13′)
{counterIT_T13++;}
                     if(item.Department==’IT-14′ && item.Status==’OnBoard’)
{ counterIT14++;}
if(item.Department==’IT-14′)
{counterIT_T14++;}
});
var canvas = document.getElementById(‘chart’);
var data = {
labels: [“IT10”, “IT12”, “IT13”, “IT14”, “TOTAL”],
datasets: [{
label: “Actual OnBoard Employee”,
borderWidth: 2,
hoverBackgroundColor: “rgba(255,99,132,0.4)”,
hoverBorderColor: “rgba(255,99,132,1)”,
data: [counterIT10,counterIT12,counterIT13,counterIT14,counterIT10+counterIT12+counterIT13+counterIT14],
backgroundColor:”rgba(255, 99, 132, 0.2)”,
borderColor:”rgba(255,99,132,1)”
},
//here is new chart dataset and the type line takes car of the chart
{
label:”Total Employees”,
type: ‘line’,
fill:false,
data:[counterIT_T10,counterIT_T12,counterIT_T13,counterIT_T14,counterIT_T10+counterIT_T12+counterIT_T13+counterIT_T14],
borderWidth: 2,
backgroundColor: “#0072C6″,
borderColor:”black”,
}
             ]};
var option = {
responsive: true,
scales: { xAxes: [{stacked: false,display: true,gridLines: {display:false},ticks: { min: 50,fontSize:10,fontWeight:900,barThickness : 0 }],
yAxes: [{stacked: false,gridLines: {display:false},ticks: { min: 0,fontSize:10,fontWeight:900,barThickness : 40 }
}],
},
tooltips: { enabled: false},legend:{display:false},
animation: {
onProgress: function () {
var ctx = this.chart.ctx;
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘bottom’;
this.data.datasets.forEach(function (dataset) {
//here we want to fill each text with different color so we use a condition to find the particular dataset
if(dataset.label==’Actual OnBoard Employee’)
{
ctx.fillStyle = “red”;
for (var i = 0; i < dataset.data.length; i++)
{
ctx.font = "bold 12px verdana, sans-serif ";
ctx.fillStyle="red";
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText("OnBoard-"+dataset.data[i], model.x, model.y +15);
}
}
}
else
{
ctx.fillStyle = "black";
for (var i = 0; i < dataset.data.length; i++)
{
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText("Total Hired-"+dataset.data[i], model.x, model.y -20);
}
}
}
});
}
   }
}
//we don't have to create a chart for line the one command does the job
var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = Chart.Bar(ctx,{
type: 'bar',   data: data,   options:option  });
}
});
});

[/code]

TwoChartTogether

As seen in above picture we are displaying two chart with data from a SharePoint list.

Line chart displays the number of employees hired in Each Department and Bar chart displays number of employees who are on-board.

 

Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *