Google Chart for a List

Question

I am trying to deploy Google Charts on my share Point Page and it is based on the list in my site. I am new to Google Charts and i am not aware of how to get the data from the list and show it in the Charts.

Could anyone help me out and guide me in the right direction. Thank you

Answer 1

You can use JQuery and SPServices code to achieve your requirement as below:

Read data from a list:

function ReadData(){

     $().SPServices({
             operation: "GetListItems",
             async: false,
             listName: "Phone",
             CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='People_x0020_using' /></ViewFields>",            
             completefunc: function (xData, Status) {
                 $(xData.responseXML).SPFilterNode("z:row").each(function () {

                     var title = $(this).attr("ows_Title");
                     var people = $(this).attr("ows_People_x0020_using");

                     //Converting decimal number to whole number, for example ->3.000 to 3
                     people = Math.floor(people);

                     //creating json Object to save the values
                     var jsonObj_Values = {};

                     jsonObj_Values["Title"] = title;    
                     jsonObj_Values["People"] = people;

                     //Adding jsonObj_Values to main json
                     jsonObj_Chart[title] = jsonObj_Values;                   
             })
             }
         });
 }

Generate the Chart:

function GenerateChart(){

google.charts.setOnLoadCallback(drawChart);
     function drawChart() {

           var data = google.visualization.arrayToDataTable([
             ["Phone", "No. of ppl"],
             ["iPhone", 100],
             ["Samsung", 150],
             ["BlackBerry", 50],
             ["mi", 130]
           ]);

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Phone');
       data.addColumn('number', 'No. of ppl');

       $.each(jsonObj_Chart, function(key, value) {
         data.addRow([value.Title, value.People]);
       }); 

         var options = {
           chart: {
             title: 'Phone',
             subtitle: 'No. of ppl usage',
           }
         };

       var chart = new google.charts.Bar(document.getElementById("Barchart_Phone"));
       chart.draw(data, options);
   }

 }

Detailed information check the post: Google Charts in SharePoint

Answer 2

You need to just use this

<script type="text/javascript" src="../SiteAssets/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var dataURL = _spPageContextInfo.webAbsoluteUrl + "/_api/Lists/getbyTitle('" + ListNamr + "')/Items?$top=5000&$select=Product,Quantity&$orderby Created desc";
        $.getJSON(dataURL, function (data) {
            var dataFromSharepointList = data.value;

            drawChart(dataFromSharepointList, "chart_div")
        });
        function drawChart(ChartData, DivID) {
            google.load("visualization", "1.0", { packages: ["bar"] });
            google.charts.setOnLoadCallback(draw);
            function draw() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Product');
                data.addColumn('string', 'Quantity');
                $.each(ChartData, function (key, value) {
                    data.addRow([value.Product, value.Quantity]);
                });
                var chart = new google.visualization.Bar(document.getElementById(DivID));
                chart.draw(data, { allowHtml: true });
            }
        }
    });
</script>
<div id="chart_div"></div>