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

  • Share your code and what kind of google chart you are using? – Negi Rox Mar 2 '18 at 6:29
  • the code that i am working on is not that good. I want to use a bar chart. could you tell me a step by step guide on how to go about it because i have no clue from where to start! – jayant khushalani Mar 2 '18 at 8:29

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

Read data from a list:

function ReadData(){

             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(){

     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


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">
        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"] });
            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 });
<div id="chart_div"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.