1

I'm trying to use Google Chart API in SharePoint 2013.

My list name is Utilization and I want to retrieve columns Title and Portal for making the 3D pie chart.

Here is my code :

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/scripts/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart); 
     var data = new google.visualization.DataTable();  
    data.addColumn('string', 'Resource'); 
        data.addColumn('number', 'Portal');  
             function  GetMyData() {
          $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "utilization",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='portal' /><FieldRef Name='content' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
          var listtitle=$(this).attr("ows_Title");
          var listportal=parseFloat($(this).attr("ows_portal"));
        data.addRow(["'"+ listtitle +"'",listportal]);

      });
    }
  });
}   

      function drawChart() {
     GetMyData();
        var data = google.visualization(data);
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script> 
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>

I have placed the script in a Script Editor and the <div> in a Content Editor.

I'm lost here, can someone please help me on this?

1

Hope this may help you

<html>  
<head>  
<script src="/sites/ABCD/SiteAssets/jquery.min.js" type="text/javascript"></script>  
<script src="/sites/ABCD/SiteAssets/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>  

    <script type="text/javascript"  
          src="https://www.google.com/jsapi?autoload={  
            'modules':[{  
              'name':'visualization',  
              'version':'1',  
              'packages':['corechart']  
            }]  
          }"></script>  

    <script type="text/javascript">  
      google.setOnLoadCallback(drawChart);  
      function drawChart() {  
            var SalesData = GetMySalesData();  
            var optionsSalesData   = {  
            title: 'Number of sales',  
            vAxis: {  
                    viewWindow: {min: -1},  
                    title: "Number of Incidents",  
                    displayAnnotations: true  
                    },  
             hAxis: {  
                    title: "Years"                
            },  
            pointSize: 5,  

            legend: { position: 'right' }  
            };  

            var chartSales = new google.visualization.LineChart(document.getElementById('SalesChart'));  
            chartSales.draw(SalesData, optionsSalesData);     
      }  

function  GetMySalesData()  
{  
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'Year');  
    data.addColumn('number', 'Swift');  
    data.addColumn({type: 'string', role: 'annotation'});  
    data.addColumn('number', 'I 20');  
    data.addColumn({type: 'string', role: 'annotation'});  
    data.addColumn('number', 'Skoda Rapid');  
    data.addColumn({type: 'string', role: 'annotation'});  



    $().SPServices({  
    operation: "GetListItems",  
    async: false,  
    listName: "Sales",  
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Swift' /><FieldRef Name='_x0049_20' /><FieldRef Name='Skoda_x0020_Rapid' /></ViewFields>",  
    completefunc: function (xData, Status) {  
    var itemCount = $(xData.responseXML).find("[nodeName=rs:data]").attr("ItemCount");  
    alert('itemCount - ' + itemCount );  
    var count = 0;  
      $(xData.responseXML).find("[nodeName='z:row']").each(function()   
      {  
        count = count + 1;   
        var Year =  $(this).attr("ows_Title");  
        var SwiftSalesCount =  $(this).attr("ows_Swift");  
        var I20SalesCount =  $(this).attr("ows__x0049_20");  
        alert (I20SalesCount);  
        var SkodaSalesCount =  $(this).attr("ows_Skoda_x0020_Rapid");  
        data.addRow(["'"+ Year +"'", parseFloat(SwiftSalesCount),"'"+parseFloat(SwiftSalesCount)+"'", parseFloat(I20SalesCount),"'"+parseFloat(I20SalesCount)+"'",parseFloat(SkodaSalesCount),"'"+parseFloat(SkodaSalesCount)+"'"]);  

      });  
    }  
  });  
return  data;  
}  


    </script>  
  </head>  
  <body>  

  <div>  
    <div id="SalesChart" style="width:700px;height: 500px;float:left ;margin:0 auto;display:block"></div>  

</div>  

  </body>  
</html>  

Source: Display SharePoint List Data in Charts Using Google API and SharePoint Services

  • i tried even this no use i still can't see the chart – Steffi B Aug 31 '15 at 10:51
  • i tried this again: – Steffi B Aug 31 '15 at 10:54
  • please check console if it shows any error – Pranav Patel Aug 31 '15 at 11:09
  • yes in console i'm getting this error: Object doesn't support property or method 'SPServices' – Steffi B Aug 31 '15 at 11:21
  • can you please check "jquery.SPServices" script is added on page ? <script type="text/javascript" src="../Shared Documents/jquery.SPServices-2014.01.min.js"></script> – Pranav Patel Aug 31 '15 at 11:44

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.