posted by 네코냥이 2014. 1. 8. 14:40

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>


'메모' 카테고리의 다른 글

Server.Execute  (0) 2014.01.20
말줄임표  (0) 2014.01.20
IIS Session Timeout vs ASP.NET Session Timeout  (0) 2014.01.06
[MS-SQL] SET NOCOUNT ON eliminate @@ROWCOUNT values after table inserts?  (0) 2014.01.03
[MS-SQL] Group By 없이 Count() 쓰기  (0) 2013.12.30