Bars Over Time

<< Click to Display Table of Contents >>

Navigation:  Using StreamLab > StreamLab Dashboards Overview > Custom Dashboards >

Bars Over Time

Previous pageReturn to chapter overviewNext page

The Rows Over Time panels all use the rows' ROWTIMES (their timestamps) to display data as it streams. These panels use ROWTIME as the domain (usually, this is the x axis). All numerical columns, such as "number of web logins" or "number of phone logins" are displayed as the range (the y axis).

Bouncing bar graphs are similar to bar graphs but have a bouncing animation. A Bouncing Bar Graph dashboard shows three panels:

1.A table listing all data from the stream.
2.Two bar graphs with a bouncing animation

You can remove or add panels through the Dashboards menu, available by clicking the SQLstream icon in the upper right corner of the panel). You can also clone any of the panels.

sl_bouncing_bar_graph

Bar Chart

A bar graph shows each numerical row as a bar. s-Dashboard displays each numerical column regardless of its range. Data will be most useful if columns are in comparable ranges.

sd_ov_dials_customized

As with other panels, you can set preferences for the bar graph panel by clicking the Preferences icon.

This panel is built with Chart.js and is highly customizable. For example, this panel has a bar border width field 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 applies 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, 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 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 http://code.shutterstock.com/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.

sd_bar_graph_preferences

If you enable Advanced Options, you can edit the options portion of the Chart.js spec as a JSON object. You can learn more about customizing panels with Chart.js by looking at the Chart.js documentation at http://www.chartjs.org/docs/.