Skip to content

Plots

Plots in Chalk'it may be made either with Python or JavaScript code:

Plotly.js-based widgets share common parameters, especially hideModeBar which allows to hide plot options toolbar at dashboard play.

Plotly line

Allows to quickly display line charts, when x and y axis are expressed as arrays of numbers. The parameter numberOfAxis allows to specifiy up to 8 y-axis actuators (named y1 to y8), sharing the same x-axis actuator (named x). Widget layout may be configured in the "Graphical properties" tab.

line-chart

Plotly bar

Here parameter numberOfAxis allows to specify couples of x and y axis actuators (named x1, y1 to x8, y8).

Some examples :

bar-chart

stack-bar-chart

Plotly pie

This widget has two actuators :

  • values: an array of values to be displayed as pie chart
  • labels: an optional array of labels associated to values

pie-chart

Example :

Plotly 3D surface

This widget has three actuators :

  • x: 1-D numeric array of size N
  • y: 1-D numeric array of size M
  • z: 2-D numeric array (an M-size array of N-size arrays)

3d-surface

Example : 3d-surface.xprjson

Plotly Real-time

The widget provides a real-time graph for displaying numeric-based dataNode inputs, having a given sample-time.

Example : real-time-kpi-plotly-js.xprjson

Plotly JavaScript generic

This widget accepts three actuators : data, layout and selection. In opposite to previous Plotly-based widgets, layout cannot be set from "Graphical properties" tab. This brings more expressive power for layout specification using programming dataNodes.

Defining data and layout is illustrated in plotly.js documentation.

Some examples:

bubble-chart

plotly-stat-box

The selection actuator is detailed in this topic

Plotly Python Generic

This widget expects a Plotly figure Python object, produced by a Python Script (Pyodide)-type dataNode. Below a code example: 

import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')

return fig

All receipes may be found in Ploty Python documentation.

No call to fig.show() is needed because rendering process will be entirely handled by Chalk'it according to its rendering rules.

Example:

Matplotlib

In the same way as Plotly Python widget, Matplotlib widget expect a figure object as actuator. Below a code example:

import matplotlib.pyplot as plt

fig, ax = plt.subplots()

fruits = ['apple', 'blueberry', 'cherry', 'orange']
counts = [40, 100, 30, 55]
bar_labels = ['red', 'blue', '_red', 'orange']
bar_colors = ['tab:red', 'tab:blue', 'tab:red', 'tab:orange']

ax.bar(fruits, counts, label=bar_labels, color=bar_colors)

ax.set_ylabel('fruit supply')
ax.set_title('Fruit supply by kind and color')
ax.legend(title='Fruit color')

return fig

All receipes may be found in Matplotlib documentation.

  • No call to plt.show() is needed because rendering process will be entirely handled by Chalk'it according to its rendering rules.

Example:

Vega

In the same spirit as Plotly generic widget above, you can visualize Vega specifications and connect them to data from other dataNodes.

Browse Vega examples gallery. Copy and paste the appropriate visualization to a JavaScript Formula dataNode. Finally, connect this dataNode to the specification widget actuator.

In this examples gallery, data is typically read from URL referenced sources using the Vega url keyword. You can connect to Chalk'it dataNodes using the Vega values keyword instead.

Be aware when copying examples that URLS in these examples use relative paths. For proper execution on Chalk'it, the absolute data path needs to be used (e.g. use 'https://vega.github.io/vega/data/movies.json' instead of 'data/movies.json').

Some examples:

ECharts

Simply, copy and paste the needed visualization from ECharts examples gallery to a JavaScript Script dataNode. This example shall return an option JSON according to ECharts grammar. Finally, connect this dataNode to the option widget actuator.

Some examples: