Pages

Saturday, October 16, 2010

Create a Dynamic Pie Chart in SharePoint using JQuery & Google Chart API


1.Look at the below blog, to see the images of how to create standard view and insert new Web Part.
Create a Dynamic Column Chart in SharePoint using JQuery & Google Chart API

2. On the list, create new a standard view. Select the columns to you want your chart.

3. Click 'Site Actions' -> Select 'Edit Page' -> Click 'Add a Web Part' -> Check 'Content Editor Web Part'  from Miscellaneous section and Press 'Add' button to insert the webpart.

4.Click edit -> select 'Modify Shared Web Part' -> Press 'Source Editor' button.

5.Apply the below code, that's it.

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
function drawVisualization()
{
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Test Region');
  data.addColumn('number', 'Total');
  data.addRows(3);
  data.setValue(0, 0, 'HHSC');
  data.setValue(0, 1, 334);
  data.setValue(1, 0, 'SIT');
  data.setValue(1, 1, 510);
  data.setValue(2, 0, 'UAT');
  data.setValue(2, 1, 143);
  new google.visualization.PieChart(document.getElementById('visualization')).
  draw(data, {title:"Total by Test Region",'is3D':true});
}

google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization" style="width: 600px; height: 400px;"></div>

3 comments:

Romeo Das said...

That was an interesting and quite an informative post man! Thanks for sharing :)

Btw, hope you enjoy reading my post - When love calls

Take care and keep blogging :)

Anonymous said...

Any way to get this to be totally localized instead of having it send out data to the Google servers?

Kavitha Rani said...

RGraph in asp, jquery draw barchart, piechart
Draw Pie Chart, Bar Chart and any type of chart using RGraph Plugin
Draw Pie Chart using RGraph
http://allinworld99.blogspot.com/2014/04/import-rgraph.html

Post a Comment