I need to create a chart based on items from a list dynamically in a webpart...

  • Can you clarify why you need to do this programmatically rather than using the out of the box chart web part?
    – Tom Resing
    Commented Feb 14, 2012 at 19:23
  • I need to create an application page... which will have data at the top ... and charts below based on the available data on the page
    – Strider
    Commented Feb 15, 2012 at 4:43

6 Answers 6


If you can use scripts instead of code, you could use the Google Visualization API. I have done it for minor stuff, and have to say it does the job.


I'll give you an example you could build on just in case its a valid option to use in your scenario:

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

<script type="text/javascript">

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

ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
function Initialize()
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle("KPI Master");
var camlQuery = new SP.CamlQuery();
var q = '<View></View>';
this.listItems = list.getItems(camlQuery);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), Function.createDelegate(this, this.onQueryFailed));
function onListItemsLoadSuccess(sender, args) {

    var dataNC = new google.visualization.DataTable();
    dataNC.addColumn('string', 'CPI');
    dataNC.addColumn('number', 'Count');

    var options = {'title':'A title',

    var listEnumerator = this.listItems.get_count();

    for (x = 0; x < listEnumerator; x++)
    var item = this.listItems.itemAt(x);
    var title = item.get_item('Title');

    dataNC.addRow([title, listEnumerator]);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(dataNC, options);


function onQueryFailed(sender, args) {
    alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());


<div id="chart_div" style="width:400; height:300;"></div>

Google Chart Tools allows also to visualize hierarchical data (org charts).

For more details see my blog post Visualizing organizational charts in SharePoint with Google Chart Tools

enter image description here


It's not programmatically, but a good start is using the chart webpart that is delivered with SharePoint 2010. For a guide on how to use it:


If that isn't enough, you can use some of the following options

  • Reporting services
  • BI stuff from sharepoint
  • implement asp.net charting controls yourself in a custom webpart.

There are many ways to include charts in SharePoint. To get more specific answers you would need to provide more details.

To get you started, here is a lightweight solution that builds pie, bar and column charts:


It is based on the Google visualization API, like the solution posted by Anders Aune. There are many other similar charting tools you can use: YUI, HighCharts (fee), etc.

In MSS, you have a chart Web Part (Bas Lijten's answer). The charts look nice but are limited in practice (no aggregation for example). You could also consider Excel Services: push your list data to Excel, build the charts, then display them on a SharePoint page.

If you need more advanced analysis, consider SSRS. The upcoming version (2012) is said to have great integration with SharePoint.

  • 2012 version of SSRS will be interesting indeed. And I want to say that the tools for generating scripts on your site are very good, easy and fast. And does the what they say :) Commented Feb 11, 2012 at 23:06
  • Christophe, nice toolkit, didn't know it existed! going to check out, seems to be a nice (temporary) fit for SP2007 solutions.
    – Bas Lijten
    Commented Feb 12, 2012 at 10:44

I would evaluate an easy-to-setup, JavaScript/jQuery based solution from Alexander Bautz: http://sharepointjavascript.wordpress.com/2012/02/03/spjs-charts-for-sharepoint-v3-x/. The solution uses Google visualization API (but apparently no data gets sent to Google).

Also using the visualization API directly (as Anders Aune proposed) might be a valid alternative.

Using MS Chart Controls in a custom web part might require lots of work as the API does not directly support SP lists and the API may overall feel a bit complex. Also some web.config modifications would be needed. But with this approach you definitely can end up with good looking (png) charts.


Javascript InfoViz tool kit is a GREAT opensource tool. Takes a while to wrap your head around implementation but it is fully javascript enabled. Mine is being run with code in a content editor webpart with html links to the needed javascript/css files.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.