s-Dashboard lets you customize panels using Chart.js or Vega. We recommend trying to use Chart.js. In most cases, Chart.js will provide more functionality and will be easier to use. If you’re going to write a custom s-Dashboard panel we recommend Chart.js as a more straightforward approach than Vega. However, Chart.js is limited to a few chart types, while you can use Vega to draw just about anything. Panels that use Chart.js find all the numerical columns in the incoming stream and create a Chart.js* data specification for each one.
s-Dashboard provides a generic Chart.js panel that allows you to customize it completely by writing a Chart.js specification. See http://www.chartjs.org for more details on Chart.js. Many of the pre-built panels also use Chart.js, and you can consult these as examples.
Each panel has panel preferences tailored to that chart type. For example, the bar chart panel has a preference bar border width* that specifies the border width to use when drawing the bars.
These properties can be a single value, such as 2*, or a comma-separated list, like *2,3,2*. Single values apply to all the data columns, while a list is applied to each data column in turn. So if there are columns alpha, beta, gamma, and delta, and the bar border width is _2,3,2,2_ the bar corresponding to the beta column would have a border width of 3 while the other bars would have a border width of 2.
This feature is most useful for properties that specify a color. You almost always want different data columns shown in different colors. You can specify a list of colors explicitly, such as red,green,blue, or rgba(255,0,0,1.0),rgba(0,255,0,1.0),rgba(0,0,255,1.0). You may also access the palettes provided by Rickshaw https://github.com/shutterstock/rickshaw by entering a value like palette(colorwheel,1.0). colorwheel can be any of the Rickshaw palettes: classic9, colorwheel, cool, munin, spectrum14, spectrum2000, spectrum2001. 1.0 is the alpha value to apply to the colors. A list of colors long enough to match each of the incoming data columns will be generated.
Using the panel preferences and the list of incoming columns, a Chart.js panel will generate the data portion of the Chart.js spec. If you enable the advanced options in the panel preferences you’ll see that you can edit the options portion of the Chart.js spec as a JSON object. See the Chart.js documentation for all of the options that can be set this way.
The Chart.js Customizable panel gives you full control over the panel’s visualization. You specify the full Chart.js JSON spec by writing a JavaScript template. Use the template markers <%= … %>* to insert the value of a variable or expression and <% … %>* to insert JavaScript code.
The panel preferences include a View JSON button that you can use to see the result of evaluating the JavaScript template.
These variables are available:
These functions are available:
In addition, all of Underscore underscorejs.org is available
When you create a Chart.js Customizable panel, the preferences are filled in with a template that generates a bar chart of the current row, using the columns and row variables and the palette() and color() functions. This is a good starting point for a custom panel that visualizes a single row. In the Examples section of the Select Panel list there is a Chart.js custom panel that shows a bar chart over time. This demonstrates displaying multiple rows, using the column() function to insert the data from named columns into the Chart.js data specification.
To create a custom panel: