in Dataiku DSS Web App

Vadim Mytarev Big Data, Dataiku

Dataiku DSS and JS ( in DSS WebAPP)

What is JS? is a high-level charting library, JS built on top of D3.js. It ships with 20 chart types, like a basic charts (e.g. line, bar, scatter, pie, heat maps) as well as 3D charts and SVG maps.

Charts are described declaratively as JSON objects and are shipped with zoom, pan, hover, and click interactions (Click-and-drag to zoom into a region, double-click to autoscale, click on legend items to toggle traces). JS was open sourced late last year and it can be used in Javascript, Python (e.g. Jupyer notebook) and R packages, this makes it easily to integrate with Dataiku DSS.

The main advantage of is that it is very quick and easy to create interactive charts.

What is Dataiku DSS Web App?

DSS web app is a tool for sharing your insights. Using a web application, we can represent the data on the dashboards from the Dataiku datasets using a variety of Javascript libraries and DSS has several built-in libraries (D3, jQuery, NVD3...)




The web app editor is divided into 2 parts, with 4 main panels in each - HTML, CSS, JS, and Python code editor.




The editor is interactive. Changes in any one of the panes will result in an update on the left after saving the changes.
In addition to the built-in JS libraries, we can install third-party libraries, such as JS.

Create new Dataiku Web App

Open an existing project. Go to Dashboard tab and select Insights


Create new empty web app

dssplotly2 dssplotly3

Step 1: Setup JS

To install the library we can use CDN, just add <script src=""></script> right after <body> tag.

Or we can download the JS library and place it into dataiku frontend folder.
Frontend dir is the dir from where you perform installation. (e.g. ~/dataiku-dss-2.3.0/frontend/static/third/ ) and add
<script src="/static/third/plotly-latest.min.js"></script> right after <body> tag.


Step 2: Create basic bar chart

To create a basic chart using we need to create <div> object which will contain our plot:

Add <div id="myDiv"></div> to HTML tabdssplotly5

Also setup size for our plot, add following to CSs tab:


Next we need the data to plot. We will use the Dataiku JS API to fetch data from Dataiku Dataset.
First, we need to decide how many rows we want to get from the dataset. Add one of the following code snippets to the JS tab of our Web App:

Note: The size of the data determines fetch performance.

Often we need only a couple of columns from the dataset. We can define these in dataset options. It improves performance.

Add variable with target dataset name

Note: Don't foget to authorize web app for using selected dataset. Click to the "Settings" button on the right top corner and select all read permissions to selected dataset.


To fetch data from dataset we use dataiku.fetch method which can take up to 4 arguments.

Note: We saw nice performance. We can easily get 20k rows from dataset or even more...

On the screenshot below we take all columns and all rows from dataset cspage_failed_search_types;


Inside the success function of fetch method we must parse out data to format.
Main method is newPlot which takes 4 parameters: GraphDiv name, Data array, Layout settings object. (You can hide the link to Plotly's cloud with {showLink: false} as the 4th argument.
Plotly.plot(divid, data, layout, {showLink: false})). The mandatory are only 2 of them, graph div and data.

All available attributes for data and layout objects you can find here you can find here.

Here we're parsing column ymdate from yyyymmdd string to the Date object.

And this is how the default bar chart looks.

Step 3: Publishing to a dashboard

After creating our web app we can easily publish it to a dashboard by clicking Publish in the web app editor


Our web app will be shown on the dashboard, and app will be loading data every time you load the dashboard, so if you change the input data, the changes will be reflected immediately.


Also on the dashboard you can use the native control features as zoom or selection on chart.