Create Charts using SharePoint List data, JavaScript and Google charts

• Create a custom list name as Bar Chart List
• Create a list columns (Month, Actual, Cummulative, Cummulative Goal)
• Using SharePoint REST call we will fetch data from list and bind to temp array variable
• pass that variable to google chart function
• chat will be created
• We have two files HTML and JS

HTML File

script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript" src="/SiteAssets/LMS/JS/EmcoreBarchart.js"></script> <!--  Update JS path -->

<div id="chart_div" style="width: 700px; height: 500px;"></div>

<script type="text/javascript">

    // Load the Visualization API and the piechart package.

    google.charts.load('current', { 'packages': ['corechart'] });

</script>

JS File

var asiaData = [];

var Header = ['Month', 'Actual', 'Cummulative', 'Cummulative Goal'];

(function ($) {

    $(document).ready(function () {

        // Ensure that the SP.js file is loaded before the custom code runs.

        SP.SOD.executeOrDelayUntilScriptLoaded(CreateBarChart, 'SP.js');

    });

    function CreateBarChart() {

        var listName = "Bar Chat List";

        jQuery.ajax({

            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/Items?$orderby=Modified desc&",

            type: "GET",

            headers: { Accept: "application/json;odata=verbose" },

            success: function (data) {

                $("#mainPlantandOfficeTable").html();

                if (data.d.results.length > 0) {

                    var results = data.d.results;

                    asiaData.push(Header);

                    $.each(results, function (index, dataPlants) {

                        var temp = [];

                        var PlantID = dataPlants.Id;

                        var barMonth = dataPlants.Month;

                        var barActual = dataPlants.Actual;

                        var barCummulative = dataPlants.Cummulative;

                        var barCummulativeGoal = dataPlants.CummulativeGoal;

                        temp.push(barMonth);

                        temp.push(parseFloat(barActual));                        

                        temp.push(parseFloat(barCummulative));

                        temp.push(parseFloat(barCummulativeGoal));

                        asiaData.push(temp);

                    });

                    //function for bar chart

                    google.charts.setOnLoadCallback(drawVisualization);

                }

            },

            error: function (jqXHR, textStatus, errorThrown) {

                Console.log("EmcoreBarchat.js:CreateBarChart:: " + textStatus);

            }

        });

    }

})(jQuery);

function drawVisualization() {

   

    var data = google.visualization.arrayToDataTable(asiaData);

    var options = {

        title: 'Lean Training',

        //vAxis: { title: 'Cups' },

        //hAxis: { title: 'Month' },

        seriesType: 'bars',

        pointSize: 10,

        series: { 1: { type: 'line', pointShape: 'circle' }, 2: { type: 'line' } }

    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(data, options);

}



Ref Link: https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#example