14.09.2010 Small update to the code to fix the “Initial state” in motion charts, as well as some minor bug fixes. I have moved the files to my home server for you to download. This provides a better solution then manually highlighting and saving 2000+ lines of code. Please note that the file now come in three different “versions”. Read more in the “download section” below.
09.09.2010 Small update to the description regarding update from v2.0 to v2.5. I forgot to mention another field required to be added to the Chart configuration list: ListBaseUrl. This in addition to the already mentioned “ChartFormatters”. I have also removed an alert that was left in the code (line 40).
Christophe notified me of a problem with the 2010 compatibility in sub-site “homepage” – which is a wiki page. The CEWP HTML handling in SP2010 is a bit “different” than in SP2007. When editing the HTML source code, it actually pulls the contents generated by the script into the edit dialog and does not use the content that was originally saved to the CEWP… This is a bit of a headache!. A workaround for the wiki-pages is to use the “Content Link” property for the CEWP and link to a .txt file with the CEWP code placed in a document library (alongside the other scripts).
06.09.2010 Updated the script “ChartUsingGoogleVisualizationAPI.js” and the CEWP code. The version number is notched up to 2.5 and the changes are:
- Added the ability to chart data from all ascending parent sites and all first level subwebs of current site
- Added a few formatter options in the UI – refer the linked resources for instructions (thanks to Paulo for the tip).
- Added new “action” for formatting as % (value*100).
- The solution is now SharePoint 2010 compatible
- Enhanced the UI for editing charts – all options and columns are now directly editable.
- No more need to specify the “userListGuid” and the “userListBaseUrl” in the CEWP code.
- The naming of the charts in the Chart Configuration list is enhanced – it now prefixes the chartId with “location.pathname” to prevent overwriting an existing chart when reusing the CEWP code in another page (thanks to Christophe for the tip).
- Edit chart is now done in the standard “Browse mode” and not in “EditPage mode”. The edit button is found in the top left corner of the chart. The button is only visible for users with “Edit page rights” and does not show on printouts.
- And more…
Note: This update introduces a new column in the configuration list (GoogleVisualization_InteractiveChartsConfig). To reuse the existing Chart configuration list you must add one field of type “Multiple lines of text (Plain text) named “ChartFormatters”. Optionally you can delete the Configuration list and have this solution automatically recreate it for you.
Please note that the CEWP code has changed alongside the code for the file “ChartUsingGoogleVisualizationAPI.js”.
Note about existing charts:
All your existing charts will need to be updated with the new “page id” in the chart configuration list (GoogleVisualization_InteractiveChartsConfig). Look at the new configuration item that is automatically added – copy it’s name and update your existing chart configuration – while deleting the newly added (empty) chart configuration.
Since I posted the previous version of the solution that utilizes the Google Chart Tools / Interactive Charts (aka Visualization API), Google has updated their API and made the previous version more or less obsolete.
NOTE: I have made a “bridge” between Google’s Visualization API and SharePoint. How the charts render or function is up to Google to decide – it is their “product”. Refer to the various configuration options by following the link from the “Edit chart UI”.
Google’s Data Policy on these charts:
All code and data are processed and rendered in the browser. No data is sent to any server.
This new release features these chart types:
Area chart | Bar chart | Column chart | Gauge | Geo Map | Line Chart |
Map | Motion Chart | Organizational Chart | Pie chart | Scatter Chart | Table
Other modifications made:
- All code in one file: “ChartUsingGoogleVisualizationAPI_v2.0.js”
- In the CEWP: Refer to the above file, jQuery (fixed external link) and the Google jsapi (fixed external link)
- Chart configuration list is automatically created if it is not already present
The solution is tested in IE8, Google Chrome 5.0.375.127 and Firefox 3.6.8.
Not all chart types are presented.
When first adding a chart CEWP to a site, the configuration list is created:
Gauge – a good KPI:
Column chart – counting unique values per country:
This chart type merges all “lines” where the country is the same, counting “fruits” in the choice column named “Fruit or vegetable”.
The “date” column can be a SharePoint data-column, or a “US formatted” string (still formatted as “Date in the UI”) in the format “mm/dd/yyyy”. Refer to the “Instructions for MotionChart” link in the UI.
This is the data that makes up this chart. Note that it is built with various calculated columns – no need for it to render as HTML in the list – it is “raw data”.
More examples – including custom CAML-queries will be added on request.
This is the CEWP code:
Address all containers
// All charts must be represented by a container with a unique id. This container must be present in the page
arrOfChartContainers = ["MyChart1"];
Note the <div id=”MyChart1″></div> This is the chart “placeholder”. To add more charts, add more placeholders and add them to the array “arrOfChartContainers”.
The placeholders can be inserted in other CEWP’s as long as they render before the chart is initiated (place them above the “Chart CEWP”).
It is essential that the scripts tags for “jsapi” and “ChartUsingGoogleVisualizationAPI.js” are placed below the script tag that defines the “arrOfChartContainers”.
The code for the file “ChartUsingGoogleVisualizationAPI_v2.0.js”
This link provides you with three different “versions”:
- ChartUsingGoogleVisualizationAPI_vX.Y.Z.js – Uncompressed code
- ChartUsingGoogleVisualizationAPI_vX.Y.Z-min.js – Minified using YUI Compressor to reduce the file size
- ChartUsingGoogleVisualizationAPI_vX.Y.Z-packer.js – Compressed/obfuscated using Dean Edward’s Packer to further reduce the file size
You must update the script name in the CEWP to reflect the version number.
When new versions are released, they will be placed in a folder with the version number as label. Be sure to download the latest version.
If you are using a browser other than IE, right click the file and select “Save link as” or “Save linked content as…”.
To make it convenient for end users to use this charting tool, create a few CEWP’s with your favorite setup (1 placeholder, 4 placeholders in a table form and so on). Export the CEWP and upload it to your web part gallery (in the root of the site collection).
You can now add it as a regular webpart from the “web part selector” in edit page mode.