1

How to implement a bar graph or pie chart for a custom list in SharePoint 2013?

I have a custom list with the field:

months

I want to have a graph/chart to show the usage of the services.

1 Answer 1

2

I'm using the Chart.js, jquery-1.8.3.min.js and my custom .js to display a list in bar, pie, polar and much more. Please take a look here: http://www.chartjs.org/docs/

The custom .js for pie, doughnut and polararea looks in my case like this:

// Declare the variables.
var sitesProductSalesChart = sitesProductSalesChart || {};
// Array with colors for the pie chart.
sitesProductSalesChart.ColorsILike = ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360', '#E6771B8', '#F09609', '#1BA1E2', '#E51400', '#339933'];
sitesProductSalesChart.Items = [];
sitesProductSalesChart.Desc = '';

// Override the rendering.
sitesProductSalesChart.FieldRenderSetup = function () {

        var override = {};
        override.Templates = {};
        override.Templates.Header = sitesProductSalesChart.CustomHeader;
        override.Templates.Item = sitesProductSalesChart.CustomItem;
        override.Templates.Footer = sitesProductSalesChart.CustomFooter;

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(override);
};

// Header, add the canvas for the chart and the placeholder for the description.
sitesProductSalesChart.CustomHeader = function (ctx) {
    return '<canvas id="pieChart" width="300" height="300" style="float:left;margin-right:20px;"></canvas><div id="pieDesc"></div>';
}

// Override item. Add all the values to the array to feed the pie chart.
sitesProductSalesChart.CustomItem = function (ctx) {

    var itemColor = sitesProductSalesChart.ColorsILike[sitesProductSalesChart.Items.length];
    sitesProductSalesChart.Items.push({
        value: parseInt(ctx.CurrentItem.Anzahl),
        color: itemColor
    });

    // Add the label (title).
    sitesProductSalesChart.Desc += '<p><h2><span style="font-family:Segoe UI;color:' + itemColor + ';font-weight:bold;">' + '<a href=http://sp13/teams/partnermanagementinfo/Lists/Partner/' + ctx.CurrentItem.Title + '.aspx>' + ctx.CurrentItem.Title +'</a>' + ' (' +ctx.CurrentItem.Anzahl + ')</span></h2></p>';

    return '';
}

// Override the footer, generate the pie chart.
sitesProductSalesChart.CustomFooter = function () {

    var options = {
    };

    var pie = $("#pieChart").get(0).getContext("2d");
    new Chart(pie).Doughnut(sitesProductSalesChart.Items, options);
//  new Chart(pie).Pie(sitesProductSalesChart.Items, options);
//  new Chart(pie).PolarArea(sitesProductSalesChart.Items, options);

    // Add the description for all the values.  
    $('#pieDesc').html(sitesProductSalesChart.Desc);

    return '';
}

// Go go go! 
$(document).ready(sitesProductSalesChart.FieldRenderSetup());

Save those three .js (Chart.js, jquery-1.8.3.min.js and the above script) to your masterpage gallery and add those three to the webpart of your choice, e.g. like this:

~sitecollection/_catalogs/masterpage/display templates/Chart.js|~sitecollection/_catalogs/masterpage/display templates/jquery-1.8.3.min.js|~sitecollection/_catalogs/masterpage/display templates/<name>.js<p>


My result looks like:

enter image description here

I also got a sample for bar & line chart if you need one. Hope this helps!

3
  • Thanks Patrick for the solution.Is it necessary to upload these files to master page gallery, can't I save it to any of the document library? Jun 19, 2015 at 14:05
  • I added those three js file using script editor web part but it didn't work for me. I saved all three js file in document library and added JavaScript display template as type and then linked them using below code in script editor web part .<SharePoint:ScriptLink ID="ScriptLink1" Name="~sitecollection/Scripts/Chart.js" runat="server" /> let me know if I am dong something wrong Jun 19, 2015 at 15:16
  • Link isn't working..Please check and thanks for the help Jun 22, 2015 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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