Post
Ask Question

Build A Chart On SharePoint List Data Using ChartJS Library

In this article, I have explained how to build custom charts based on the Sharepoint list using chartJs library.

Now I am going to create a simple task list in SharePoint, then I am going to build a doughnut/Pie chart based on list data.

Let’s get started, I have a task list with some information already entered.

New task

After that now I'm going to download the chartjs library from their CDN.

https://cdnjs.com/libraries/Chart.js

You can download it from the above link.

Create an HTML file in your SharePoint site assets folder and paste the below HTML snippet.

<canvas id="myChart"></canvas>

Now create a function named GetChartData(); then query the task list using REST API or using SharePoint PNP JS Library and Process the data to render the chart inside your content editor or script editor web part.

function GetChartData() {
    $pnp.sp.web.lists.getByTitle('My Tasks').items.get().then(function(response) {
        var label = []; // Holds the chart label information
        var count = []; // Holds the total count value based on each status
        // Using lodash library to count data based on "Status" column
        var data = _.map(_.countBy(response, "Status"), function(val, key) {
            return (label.push(key), count.push(val))
        });
        // Initialize the chart   
        var context = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(context, {
            type: 'doughnut', // type of chart doughnet or pie
            // The data for our dataset
            data: {
                labels: label, // label array collection
                datasets: [{
                    data: count, // count array collection
                    backgroundColor: [
                        'rgb(244, 244, 66)',
                        'rgb(95, 239, 59)',
                        'rgb(219, 40, 13)',
                        'rgb(234, 148, 63)',
                        'rgb(211, 45, 229)',
                    ],
                }]
            },
        });
    })
}

_.countBy helps you to calculate the number of items counted based on the “Status” Column.

Here we go -- finally we can see the chart has been successfully rendered.

In progress

I have made some changes to control the width and height of the chart.

Full code

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="myChart" style="height:200px; max-width:400px; margin: 0px auto;"></canvas>
    <script type="text/javascript">
        $(document).ready(function() {
            GetChartData()
        })
        function GetChartData() {
            $pnp.sp.web.lists.getByTitle('My Tasks').items.get().then(function(response) {
                console.log(response)
                var label = [];
                var count = [];
                var data = _.map(_.countBy(response, "Status"), function(val, key) {
                    return (label.push(key), count.push(val))
                });
                console.log("data", data);
                var context = document.getElementById("myChart").getContext("2d");
                var myChart = new Chart(context, {
                    type: 'doughnut',
                    // The data for our dataset
                    data: {
                        labels: label,
                        datasets: [{
                            data: count,
                            backgroundColor: [
                                'rgb(244, 244, 66)',
                                'rgb(95, 239, 59)',
                                'rgb(219, 40, 13)',
                                'rgb(234, 148, 63)',
                                'rgb(211, 45, 229)',
                            ],
                        }]
                    },
                });
            })
        }
    </script>
</body>

Happy Coding!


Similar Articles