Display SharePoint list data as a chart with a DVWP and FLOTjs

There are several solutions out there for displaying data with charts. It is not a elementary process but it is worth while. To keep it as simple as possible I used a Data View Web Part and a jQuery plug-in. As I considered the different solutions I looked for one that worked in all browsers and was flexible enough to allow users to modify it to their needs. Since all of the necessary files can be placed on your own site this solution will work on intranet sites and organizations with strict security policies.
This is an demo of the plug-in creating nice pie-charts ( in this sample the data is not in a SharePoint list):
View Demo | View Code
FLOT is a jQuery plug-in that will draw charts as a CANVAS elements. CANVAS elements work in all modern browsers, and in IE with the assistance of the ExplorerCanvas (excanvas) JavaScript file.
Here are several examples of FLOT plug-in options that you can choose.
Here are other types of charts that you can create with the FLOT plug-in.
All the FLOT plug-in needs to do it’s magic is numeric values in a JavaScript array like this:

var data = [
{label:'Cell Phone',data:15},
{label:'Gadget',data:9},
{label:'Laptop',data:18},
{label:'mp3 Player',data:26},
{label:'Tablet',data:20}
];

So we can prepare the numbers from the SP list for FLOT with XSL code in the Data View Web Part (DVWP). The XSL will write them as the JavaScript array the FLOT plug-in will do the rest. I think of it as putting the FLOT code around the XSL in the DVWP. At any rate, the DVWP combines the list data and a chart is created.
The situation: For this example we have a “Sales log” list to track the number of items sold. As items are sold they are added as a new list item. When an item is added to the list the product name is selected from a drop down and the number of items sold are typed in.
Here are the steps to making this happen on a SharePoint site:

1. Acquire or create the List. Save and upload this list template fileto a SharePoint list template gallery and then create a new list using that template. It will contain the sample data shown in the image. Or you can create this list from scratch. You will just want to make sure that the DVWP uses the list and columns that you create. For this example I have named the list Sales Log and the columns are Name and Number Sold (a number field type). The Name column can be a CHOICE or a LOOKUP column so there is a drop-down list of products to choose from when an item is added to the list. The names of the products for this example are Cell Phone, Gadget, Laptop, mp3 Player, and Tablet.
2. Put the CSS and a conditional comment,with a link to the excanvas file, in the HEAD of the master-page or in a Content Editor Web Part (the CEWP must be above the chart web-part) like this:<style type="text/css">
.graph{height:300px; width:400px; border:1px dotted silver; margin:9px;}
.pieLabel div{text-align:center;padding:2px; font-family:sans-serif; font-size:9pt}
</style>
<!--[if IE]>
<script src="https://flot.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]—>

3. Acquire or create the web-part. If the Sales Log list and the JS files exist this web-part will just work. If you have titled your list something other than Sales Log you can configure the web-part property to point the web-part to the list of your choice.
4. Change the web-part to point to the GUID of your list. The GUID that SharePoint has selected for your list will be different than it choose for my list.
   1. Find the GUID of your list by clicking on “Audience targeting settings” on the settings page of your list. Once there you can copy the GUID from the URL, its the letters, numbers, and hyphens between the brackets.
   2. Next switch it with the GUID in the Parameters of the web-part. Back on the web-part page click “Modify Shared Web Part” from the web-part drop-down list. Then to change parameters, click Parameters Editor. Paste your GUID in place of the one that is in the first line for the “ListID.”

Note: The above steps worked for me in SharePoint 2007.
FYI: Here are links to the three JS files that are linked from within the web-part:
https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
https://flot.googlecode.com/svn/trunk/jquery.flot.js
https://flot.googlecode.com/svn/trunk/jquery.flot.pie.js