The Custom Chart widget allows you to create charts using native library directly. You are now able to use your favorite library to realize your own fully customized data visualization. Knowage is the open source suite for any modern business analytics needing.

1. KNOWAGE CUSTOM CHART WIDGET: a technical guide
26 /11/2020
Davide VERNASSA
UI designer & front-end developer
davide.vernassa@eng.it

2. PROGRAMME
1. Custom Chart Introduction
2. The Custom Chart anatomy
3. Supported chart libraries
4. APIs
5. Live demo
6. Questions

3. THE CUSTOM CHART
• From KNOWAGE version 7.2
• Occupy all the corner not covered by chart widget
• Very malleable but not a chart widget replacer!
• Will extend in the future

4. CSS editor
HTML
editor
Javascript
editor
WIDGET ANATOMY

5. SUPPORTED CHART LIBRARIES
• Highcharts (7.1.1) (EE)
• Chart.js (1.0.2)
• D3.js (3.5.5)
• External CDN Libraries using <kn-import> tag

6. API
• API's are the shared language between Knowage and the external
chart libraries.
• You can reach data from API
• You can set data in different ways with API
• You can interact with Knowage with API
• You cannot replace all the "thinky thinky" work with API!
(but they can help you a lot!)

7. DOCUMENTATION
All the API's are listed and provided with examples in the documentation:
https://knowage-suite.readthedocs.io/en/7.2/functionalities-guide/cockpit/index.html#custom-chart-widget

8. DATASTORE
• The datastore object is the Knowage representation in the API
• You will use it as a keyword (datastore.desiredapi)
• It will contain your dataset data
• It will manage Knowage interactions

9. .getDataArray
• datastore.getDataArray(function(record){…}
• Returns data array
• Returns one record for every dataset row
• Return the structure you will provide

10. .getRecords
• datastore.getRecords()
• Returns array of objects
• Returns one object for every dataset row using the column names
• Does not allow returning customizations

11. .getColumn
• datastore.getColumn('yourColumn')
• Returns array of values
• Returns one value for every dataset row just for the selected column
• Allows you to choose a dataset column
• Does not allow returning customizations

12. .getSeriesAndData
• datastore.getSeriesAndData('column',function(record){…}
• Returns array object(series) with name from the row value of the selected
column and data with the desired structure
• Allows you to choose a dataset column
• Allows you to customize the returning structure
• Very useful for common charts structure

13. .sort & .filter
• datastore.sort({column':'direction'})
• Sorts the data for the desired column and direction
• If no direction is set will be ASC by default
• datastore.filter({column1:'value','column2':'value'})
• Filters the dataset for the desired column values
• Can be concatenated between them and other API

14. .hierarchy
• datastore.hierarchy({'levels':['levels'],'measures': {'column':'aggr'}})
• Create a tree with different levels and measure aggregations
• The levels order is the same for the hierarchy tree
• The measures can use sum, min, max aggregations
• There are many methods to get single branches, children, siblings and
value to move inside the tree

15. .clickManager
• datastore.clickManager(columnName, columnValue);
• Takes input data (column name and value) and pass them to Knowage
lifecycle
• The standard interactions will happen depending on what is specified for
the widget
• If no cross or preview is set a selection will be thrown

16. LIVE DEMO

17. HINTS
• Read the widget documentation on https://knowage-suite.readthedocs.io/
• Have a clear idea of the data structure needed by the chart library
• Use the common CSS editor if you want to share a common theme
• Avoid multiple identical API call, use variables instead
• Pay attention to external libraries and font inclusions weight

18. QUESTIONS

19. CHECK YOUR EMAIL!
To get full support contact our Sales Department → knowage@eng.it