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

An follow-up / enhancement on this article is found here. You should complete “Step one” in this article, and then go to the new article.

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

Create a web part page and add the main SPJS Charts v6 loader web part to the page like described here.

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

Please note: I had a typo in this list name both here and in the code example. If you have already created this list with the wrong name, please rename the list (changing the display name is sufficient) from “SPJSChartDasboards” to “SPJSChartDashboards” and update the code.

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

Add a script editor web part in the web part page you crated in step one 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

 

Leave a Reply