serving the solutions day and night

Pages

Saturday, October 16, 2010

Create a Dynamic Bar 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">

var FAreaValue = new Array();
var FAreaName = new Array();
var FHeader = new Array();
var tablevalue ='';


$("document").ready(function()
{
  var areaname= new Array();
  var areavalue= new Array();
  var headervalue= new Array();


  var arrayList=$("th.ms-vh2:contains('')");
  $.each(arrayList, function(i,e)
  {
    headervalue[i]=$(e).text();
  });

  var arrayList=$("td.ms-vb-title:contains('')");
  $.each(arrayList, function(i,e)
  {
    areaname[i]=$(e).text();
  });

  var arrayList1=$("td.ms-vb2:contains('')");
  $.each(arrayList1, function(i,e)
  {
    areavalue[i]=$(e).text();
  });
  FAreaName = areaname;
  FAreaValue = areavalue;
  FHeader = headervalue;
});


google.load('visualization', '1',{'packages': ['corechart']});
google.setOnLoadCallback(draw);

function draw()
{
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Severity');
  data.addColumn('number', 'HHSC');
  data.addColumn('number', 'SIT');
  data.addColumn('number', 'ACS');

  data.addRows(FAreaName.length+1)
  for (i=0; i<FAreaName.length; i++)
  {

    data.setCell(i, 0, FAreaName[i]);
    k= (i*2)+i;
    col =1;
    for (j=k; j<(k+3); j++)
    {
      if (FAreaValue[j].length>0)
        rowvalue = parseFloat(FAreaValue[j]);
      else
        rowvalue = 0;
      data.setCell(i, col++ , rowvalue);
    }
  }

  var chart = new google.visualization.BarChart(
  document.getElementById('chart_div'));
  chart.draw(data, {'isStacked': true,'legend': 'bottom',
    title: 'Severity by Test Region'});
}


</script>
<div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>

4 comments:

FNF said...

where should i give my list view anem and the column name?

FNF said...

where to put the list view name and column names?

Daynight said...

please read the previous blob, you will get the answer.

Suresh Kumar 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