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

SharePoint List data bind to Drop down control using JavaScript

I create a list in Sharepoint which has 3 columns Title,Label and SiteUrl as per business requirement label want to show text and Url will be the value using javascript.

Need add this HTML into file
<div id="divVariationLabel">
    <select id="drpVariationlbl" id="drpVariationlbl" onchange="redirectSite()" />
</div>

Create JS file add this below script into it then add this file reference into the HTML file.

/***************************************************************************
* Name : CreateDrodown.js                                                                                                          *
* Descritption : This is the javascript file for creatig dropdown using List data                           *
***************************************************************************/
var countryData = [];
(function ($) {
    $(document).ready(function () {
        // Ensure that the SP.js file is loaded before the custom code runs.
        SP.SOD.executeOrDelayUntilScriptLoaded(CreateDropdown, 'SP.js');

    });

    /***************************************************************
    * Function : CreateDropdown                                                                             *
    * Descritption : This function is used to fill the Dropdown                                *
    ***************************************************************
    function CreateDropdown() {
        var listName = "Variation Label";
        jQuery.ajax({
            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/Items",
            type: "GET",
            headers: { Accept: "application/json;odata=verbose" },
            success: function (data) {
                if (data.d.results.length > 0) {
                    var results = data.d.results;
                    $.each(results, function (index, dataLabels) {
                        var temp = [];
                        var PlantID = dataLabels.Id;
                        var countryName = dataLabels.Title;
                        var countryLabel = dataLabels.Label;
                        var countrySiteUrl = dataLabels.SiteUrl;

                        //temp.push('<div class="maptitle">' + dataPlants.Title + '</div>' + plantOfficeAddress);
                        temp.push(countryName);
                        temp.push(countryLabel);
                        temp.push(countrySiteUrl);
                        countryData.push(temp);
                    });
                    for (var subArr in countryData) {                      
                            $('<option />', { value: countryData[subArr][2].Url, text: countryData[subArr][0], variationlabel: countryData[subArr][1] }).appendTo('#drpVariationlbl');
                       
                    }
                }
            }
        });
    }


})(jQuery);