Category Archives: Charts

SPJS Charts v7 BETA 3

I have fixed an issue with BETA 2 where I accidentally left a user group in the variable spjscharts_restrictAddNewChartToGroup in the SPJSCharts_loader.html like this:

var spjscharts_restrictAddNewChartToGroup = "TestGroup1";

This would prevent the add new chart button from showing. The default value here should be like this:

var spjscharts_restrictAddNewChartToGroup = "";

I have also removed a call to get the user profile for the current user because this failed in SP foundation where the user profile is not accessible.

You find information about SPJS Charts v7 and a link to download it here: http://spjsblog.com/2018/04/29/spjs-charts-v7/

Alexander

SPJS Charts v7

Last updated: May 12, 2018

I have upgraded SPJS Charts for SharePoint to use REST queries to load data. This means the loading is now asynchronous and therefor the page will be more responsive while the the charts are loading.

Please note that this new version does not support SP 2007 and SP 2010.

You find the BETA here. Follow the installation instruction for v6 to set it up.

Functionality

Most of the functionality is the same as in v6, but I have added one new feature for advanced users.

Custom datasource

Query for data

In the “Basic setup” tab you no have two options for Datasource. The “SharePoint list” option is the same as before, but the new “Custom datasource” option lets you load the data-source with a custom JavaScript function.

This way you can for example combine two or more queries to build one chart in a page. I’ll describe this functionality below.

When selecting the “Custom datasource” radio button, you will see a new textarea for the configuration of “Datatable fields” and the function name to use to query for the data:

This example chart is set up with a custom datasource built with the below configuration.

This is an example of the “Custom datasource” configuration:

{
 "type":"function",
 "functionName":"getChartCustomDatasource",
 "columns":[
 {"fin":"Date","label":"Date","type":"DateTime","dataType":"date","role":""},
 {"fin":"Madagascar","label":"Madagascar","type":"Text","dataType":"number","role":""},
 {"fin":"Bolivia","label":"Bolivia","type":"Text","dataType":"number","role":""},
 {"fin":"Ecuador","label":"Ecuador","type":"Text","dataType":"number","role":""}
 ]
}

The function name getChartCustomDatasource must be available in the page. Either by adding it to a custom js file loaded trough the “Load external JS or CSS” tab, or by adding it to a script editor web part in the page.

The below example shows a basic query to get the dataset from a SharePoint list:

function getChartCustomDatasource(chartId){
 var deferred = jQuery.Deferred();
 spjs.charts.getItemsREST({
 "listId":"{5ebb17fb-eb6d-4a01-ac86-a241458ff8f2}",
 "listBaseUrl":"/SPJSCharts",
 "select":["Date","Madagascar","Bolivia","Ecuador"],
 "expand":[],
 "filter":"",
 "rowLimit":""
 }).done(function(data){
 deferred.resolve(data);
 }).fail(function(err){
 // console.log(err);
 });
 return deferred.promise();
}

You can however user any sort of query you can run with JavaScript from within SharePoint, as long as the dataset returned from the query is in this format:

[{
 "Bolivia": "165",
 "Ecuador": "938",
 "Madagascar": "522",
 "Created": "2014-03-24T21:41:00Z"
}, {
 "Bolivia": "135",
 "Ecuador": "1120",
 "Madagascar": "599",
 "Created": "2014-03-24T21:41:08Z"
}, {
 "Bolivia": "157",
 "Ecuador": "1167",
 "Madagascar": "587",
 "Created": "2014-03-24T21:41:08Z"
}, {
 "Bolivia": "136",
 "Ecuador": "691",
 "Madagascar": "629",
 "Created": "2014-03-24T21:41:08Z"
}, {
 "Bolivia": "139",
 "Ecuador": "0",
 "Madagascar": "615",
 "Created": "2014-03-24T21:41:08Z"
}, {
 "Bolivia": "139",
 "Ecuador": "1110",
 "Madagascar": "615",
 "Created": "2016-04-02T22:18:55Z"
}, {
 "Bolivia": "345",
 "Ecuador": "456",
 "Madagascar": "429",
 "Created": "2016-04-03T07:11:10Z"
}, {
 "Bolivia": "333",
 "Ecuador": "22",
 "Madagascar": "555",
 "Created": "2016-04-03T14:58:45Z"
}]

Manually supply data

You can also add the data for the chart manually in the textarea like this:

{
 "type":"manual",
 "columns":[
 {"fin":"Status","label":"Status","type":"Text","dataType":"SplitInSeries","role":""},
 {"fin":"Department","label":"Department","type":"Text","dataType":"string","role":""}
 ],
 "data":[
 {"Department":"North","Status":"Not started"},
 {"Department":"North","Status":"In progress"},
 {"Department":"South","Status":"In progress"},
 {"Department":"South","Status":"Completed"}
 ]
}

Not backwards compatible

Because of the changed query method, v7 is not unfortunately not backwards compatible with v6 and you must rebuild the charts in v7.

To make the upgrade process easier, the two versions can both be installed in the same site, but you cannot load both versions in the same page.

License

If you have an existing license for v6 you can use the same license code in v7.

Comments or feedback

Please post any feedback in the forum or in the comments below.

Alexander

SPJS Charts for SharePoint updated to v6.1.5.13

I have published a new version of SPJS Charts for SharePoint with a few minor layout changes and a fix for an error when adding a chart to a page and getting an error related to “ZoneId”.  You find the change log here and you can download the files here.

As mentioned when publishing the last update back in December 2017 I have worked on a new version that uses REST to query the datasource. This version will also be able to use a custom datasource built from a query or a static JSON object. This version will soon be published in BETA.

Please post any questions in the forum.

Alexander

SPJS Charts for SharePoint updated

I have published a new version of SPJS Charts for SharePoint with a few minor changes. You find the change log here.

I plan to update the solution to use REST queries from the next version. The next version will therefore drop support for SharePoint versions prior to SP 2013. 

Please post any questions in the forum.

Alexander

SPJS Charts – automatic dashboard builder

Change log:

September 10, 2017:

Please note: I had a typo in this list name of the list where the dashboards are stored. 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.

I’ve updated the code example for the “DashboardSelectorAndBuilder.html” file to include support for changing the colspan, and to let you edit an existing dashboard. Please note that to enable edit I had to make one adjustment to the “OPTIONAL – Add a header as text or HTML here”. This means you must enter this header again the first time you edit a chart with this new version, but when you have saved it once you will be able to edit it again.

I have also added support for restricting the “Add new” and “Edit” to a SharePoint group. Add the group display name in the variable “restrictAddNewAndEditToThisGroup” in the top of the file “DashboardSelectorAndBuilder.html”.


In the previous article in this “series” I showed how you can create your own dashboards by manually writing the HTML code and store it in a custom list.

This proved to be a bit to complicated and I have now created a dashboard builder where you can specify a layout from one to four columns and as many rows as you like (please note that adding multiple charts to one page will make the page slower to load).

To use this tool, you must have the SPJS Charts solution already installed, and you must have set up the custom list as described in the previous article – linked in the top of this article.

Create a web part page and add the main SPJS Charts v6 loader web part to the page like described here. Then get the file “DashboardSelectorAndBuilder.zip” from here, and add it to a script editor web part (unzip first)  in the same web part page.

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 should then look like this:

Click “Add new” to name your new dashboard and select the number of columns:

Then add the charts from the collection of charts you have already created in this site:

Build your dashboard by adding charts and optionally inserting a header text / HTML:

Hit “Save” and reload the page. Select your new dash from the dropdown:

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

Alexander

 

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

 

SPJS Charts updated to v6.1.5.9

I have fixed a few bugs and added one new chart type. I have also added a new option to instead of loading the chart, render a button the user can click to show the chart. This may help on load time if you have many charts in one page.

See change log here

Please post any questions in the forum.

Best regards,
Alexander