SPJS Charts – create dashboards that can be selected from a dropdown

By request I have created an example code snippet that can read a list of pre-configured dashboards that are stored in a custom list.

I first thought about letting the user save a dashboards based on the charts selected from the dropdown select in the example file “loadAllChartsFromDropdown.html” that I added to the download package on August 22. I changed my mind and chose to let a super-user add this as HTML in a custom list. The reason for this is that you can put the charts in a table layout to have them side-by-side and possibly add some text / HTML in between the charts.

Step one

First add the main SPJS Charts v6 loader web part to the page like described here.

Then add a custom list named “SPJSChartDasboards” (this name is hard-coded in the example html file so don’t get creative and change the name).

Add one additional field named “HTML”. This field should be of type “Multiple lines of text – Plain text”.

Add your first example dashboard like this:

Add the ID of your chart where I have highlighted in yellow. You find this ID in the chart you have configured in another page in this site like this:

Step two

Create a web part page and add a script editor web part with the code snippet from the file “DashBoardSelector” downloaded here.

Alternatively you can store this code(after you unzip it) in a document library and link to the file in a ContentEditorWebPart (CEWP).

Your page will look like this after you have added the script:

Select your dashboard, and watch the charts being drawn in the page.

Another example dashboard

If you like to have for example four charts in a table, use this format (normal HTML table):

Here is the HTML – replace “ID_CHART_X” with your actual chart ID.

<table cellpadding="10" cellspacing="0" style="width:1000px;">
 <tr>
 <td valign="top">
 <div class="spjs_chartPlaceholder" id="ID_CHART_1">
 </td>
 <td valign="top">
 <div class="spjs_chartPlaceholder" id="ID_CHART_2">
 </td>
 </tr>
 <tr>
 <td valign="top">
 <div class="spjs_chartPlaceholder" id="ID_CHART_3">
 </td>
 <td valign="top">
 <div class="spjs_chartPlaceholder" id="ID_CHART_4">
 </td>
 </tr>
</table>

Let me know in the comments or in the forum if you have any questions.

Alexander

 

by Alexander Bautz via SharePoint JavaScripts