Create a Dynamic Table in SharePoint using JQuery & Javascript

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>
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;
});

function WriteContent()
{
  tablevalue += "<tr>";
  for (i=0; i<FHeader.length; i++)
  {
    tablevalue += "<td><b>"+FHeader[i]+"</b></td>";
  }
  tablevalue += "<td><b>TOTAL</b><td></tr>";
  for (i=0; i<FAreaName.length; i++)
  {
    rowtotal=0;
    tablevalue += "<tr><td>"+FAreaName[i]+"</td>";
    k= (i*4)+i;
    for (j=k; j<(k+5); j++)
    {
      tablevalue += "<td align='right'> "+FAreaValue[j]+"</td>";
      if (FAreaValue[j].length>0)
        rowtotal+=parseFloat(FAreaValue[j]);
    }
    tablevalue += "<td align='right'><b> "+rowtotal+"</b></td>";
    tablevalue += "</tr>";
  }
  tablevalue += "<tr><td align='center'><b>TOTAL</b></td>";
  functionaltotal=0;
  for (i=1; i<FHeader.length; i++)
  {
    coltotal= 0;
    k=(i-1)+(FAreaName.length*5);
    for (j=(i-1); j<k; j+=5)
    {
      if (FAreaValue[j].length>0)
      {
        coltotal+=parseFloat(FAreaValue[j]);
        functionaltotal+=coltotal;
      }
    }
    tablevalue += "<td align='right'><b> "+coltotal+"</b></td>";
  }
  tablevalue += "<td align='right'><b> "+functionaltotal+"</b></td>";
  tablevalue += "</tr>";
  document.getElementById('chart_div').innerHTML = "<table border='1' width='100%' rules='all'>"+tablevalue+"</table>";
}
window.onload =WriteContent;
</script>
<div id="chart_div" align="center"></div>