Bar Graph

<< Click to Display Table of Contents >>

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

Bar Graph

Previous pageReturn to chapter overviewNext page

A bar graph shows each numerical row as a bar. The Bar Graph dashboard displays each numerical column regardless of its range. Data will be most useful if columns are in comparable ranges.

A bar graph dashboard shows two frames:

1.A table listing all data from the stream.

2.A bar graph using data from all numerical columns.

sl_bar_graph

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/.