This is v4 of SPJS Charts for SharePoint. You find the previous articles here, but please note that examples and techniques may have changed in v4.
This version, as the previous ones, lets you create charts from data stored in any lists in the site collection, and add them to any SharePoint page. The charts are created using Google Visualization API.
I have redone the script in v4, and added some improvements like support for animations, automatic refresh of the chart when the datasource is updated, and more. You find a full change log below.
- Major overhaul of the code.
- Changed how the chart containers are named. Previously you had to name them in the CEWP, but now this is done automatically.
- Its now much easier to add multiple charts to a page as you do not have to edit the code, just add another web part to the page.
- Bypassed rowlimit for list views to overcome the “paging limit” when using a SharePoint view (and not Custom CAML).
- Added timeline chart. Please note that there are some bugs in this charts tooltip in IE 10. Hopefully this will be fixed by Google in the next release.
- Fixed preselecting multiple filter values.
- Added support for automatically setting up filter for all single line of text columns, calculated columns, choice columns and single choice people picker columns.
- Added support for animations when loading and filtering.
- Added support for auto refresh of the chart when the datasource is updates.
- The last good configuration is automatically stored. You can revert to this if there are errors in the config preventing you from loading it.
- Added support for password protection of individual charts.
- Added support for copying, importing and exporting chart configuration (requires licensed version).
- Added support for setting the series color by label. Like “In progress” = green, “Deferred” = yellow and “Not started” = red. Click “Custom options” at bottom of the Options sections in Edit Chart GUI for instructions.
- And lots of small fixes.
- The “chartOptionOverride” object has been replaced with the function “spjs_chartOptionOverride”. See details on the new function in a separate post.
- The “prefix” for “sum”, “count” and “average” has been removed. Use numberformat: prefix in stead.
This solution is NOT directly compatible with previous versions (1.x, 2.x and 3.x). You must set up a new configuration list and modify all existing chart containers with the new code. When this is done, you can import your chart one-by-one from the old configuration list.
Please note that the import feature require a licensed version of SPJS Charts for SharePoint. Click here to buy a license code to unlock the import / export and copy features.
The reason for not making this version backwards compatible has to do with the completely different way the configuration is stored in the configuration list, and the fact that the chart containers are no longer named in the CEWP code. The chart containers now get their unique id assigned automatically. This is done to make putting multiple charts in one page as easy as adding another web part.
- Download jQuery 1.10.x from here. You can use v1.6.4 and up, but you should stay with the 1.x version as 2.x is NOT compatible with Internet Explorer 6, 7 and 8.
- Download spjs-charts-v4.js from here.
- Create a document library to hold the scripts. You must ensure all users have read access to this library. You can also create a folder using SharePoint designer.
- Upload the files to this library / folder.
- Create a text file and add this code – ensure you modify the script “src” for “jquery-1.10.2.min.js” and “spjs-charts-v4.js” to point to the location you put your files:
- Upload the text file to the same location you put the other files.
- Add a CEWP to the page where you want the chart to appear, and use the “Content link” option to link to the text file with the CEWP code from step 5. You can skip step 6 and use a HTML Form Web Part and add the code in the Source editor, but I recommend using the CEWP and content link option to be able to update the code for all charts in one centralized location.
Please note that you can NOT add the “master code” directly to a CEWP source editor. Either use the content link option in the CEWP to link to a file with the code, or use a HTML form web part. This is necessary because SharePoint messes with the code by appending the script generated contents to the CEWP when you edit the page.
- Reload the page and click OK on these two dialogs:
If you want to override the loading animation, the filtering label or the “No items found” label, add these variables to the CEWP code:
var spjs_charts_loadingOverlayLabel = "Loading chart..."; var spjs_charts_filteringLabel = "Filtering, please wait..."; var spjs_charts_noItemsFoundLabel = "No items match this filter...";
In this version you basically have two different “Web parts”: The MASTER with the code referred in step 5 above, which calls the script resources, and the SLAVE which is simply any HTML DOM element with the class “spjs_chartPlaceholder”. This element can be for example a div, span or td. You can add it inline in the text, or set it up in a table structure.
The CEWP code for a SLAVE chart
You can add one Master Web Part to a page, and unlimited number of Slave Web Parts (in theory, buy your page will load slowly if you have to many charts in one page).
See separate article for instructions on how to create Web Part templates in the Web Part Gallery.
When entering edit page mode, the placeholders are highlighted like this:
If you have the licensed version, you can copy existing charts (from v4) in two ways.
Go to the chart you want to copy, select “Export configuration as text”:
Copy the text and then use “Import configuration from text” and paste it back in the new location.
If you have the licensed version, you can import existing charts (from v3) like this:
You find other articles in this series here: https://spjsblog.com/category/SPJS-Charts-for-SharePoint-v4
Ask if anything is unclear,