Pie Chart in SharePoint

How to create Pie Chart in SharePoint

Create a Page and add Script Editor web part to it and paste the below code.

Code:

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">


$(document).ready(function () {
GetListitemsitems();
});

function GetListitemsitems() {

        $.ajax({
           url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/GetByTitle('ProductSales')/items",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" }, // return data format
            success: function (data) {
               console.log(data.d.results);             
                var testdata=[];           
              $.each(data.d.results, function (key, value) {
                 testdata.push({y:Number(value.TotalSales),name:value.CarName});
       
               });
             
var options = {
exportEnabled: true,
animationEnabled: true,
title:{
text: "Car Sales"
},
legend:{
horizontalAlign: "right",
verticalAlign: "center"
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
indexLabel: "{name}",
legendText: "{name} (#percent%)",
indexLabelPlacement: "inside",
dataPoints: testdata
}]
};
                 $("#chartContainer").CanvasJSChart(options);
            },

            error: function (error) {
                alert(JSON.stringify(error));
            }
        });

    }



</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>