Building Charts in SharePoint with Google Charts API

Looking for a quick way to build Charts & Graphs from SharePoint list data? Here is the quickest way to create charts on SharePoint with Google Chart API!
  1. Go to: Building Charts in SharePoint with Google Charts API
  2. Provide "Edit view " URL in the given Text box. E.g. I've a List "Q1Summary" in Finance site collection. Edit view URL is:
  3. Specify other optional parameters such as Chart Type (Pie Chart, Bar, Column), Width, Chart title to generate chart code. Place the generated Chart code in Content editor web part
The code generated would look like:
<div id="spChart"></div>
<script src="//" type="text/javascript"></script>
<script type="text/javascript">

/* 2012 * Christophe Humbert * */

var options={
chartType: "Bar",
title:"Chart title",

var o=options,URL=o.url+"&_ts="+(new Date()).getTime(),c=document.getElementById("spChart");"";google.load('visualization','1.0',{'packages':['corechart']});var x=new XMLHttpRequest();x.onreadystatechange=function(){if (x.readyState==4){if (x.status==200){var xml=x.responseXML,r=(xml.getElementsByTagNameNS)?xml.getElementsByTagNameNS("*","row"):xml.getElementsByTagName("z\:row");google.setOnLoadCallback(dC(r));}}};"GET",URL,true);x.send(null);function dC(r) {var d=new google.visualization.DataTable(),a=r[0].attributes,aC=a.length;for (var i=aC-1;i>=0;i--) {if (a[i].name.indexOf("Title")>=0) {var tA=a[i].name;} else {var vA=a[i].name;}}d.addColumn('string',tA.replace(/ows_/,""));d.addColumn('number',vA.replace(/ows_/,""));var rC=r.length,rs=[];for (var i=0;i<rC;i++) {(function(){var arr=[];arr[0]=r[i].getAttribute(tA);var n=r[i].getAttribute(vA).split("#");arr[1]=parseFloat(n[1]||n[0]);rs.push(arr);})();}d.addRows(rs);var chart=(o.chartType=="Pie")?new google.visualization.PieChart(c):(o.chartType=="Bar")?new google.visualization.BarChart(c):new google.visualization.ColumnChart(c);chart.draw(d,options);}})();

That's it! See the result in action: Here is an SharePoint Google chart example
google chart sharepoint 2007
Google charts in SharePoint 2007
Building Charts in SharePoint with Google Charts API Building Charts in SharePoint with Google Charts API Reviewed by Salaudeen Rajack on June 26, 2013 Rating: 5

1 comment:

  1. Hi i tried inputting all the parameters in this page...

    however it wont generate the script.


Please Login and comment to get your questions answered!

Powered by Blogger.