View Rows Over a Key Column Panels

Panels that use the key column as the domain, and the other numerical columns as the range. These panels are useful for data that groups into a limited number of major categories, such as cities, departments, product categories, teams, and so on.

Bars Over Key

Bars Over Time displays each key category (such as a city) as a group of bars (all the numerical columns in rows grouped by the key, such as all ATMs in San Francisco).

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

.

If you enable Advanced Options, you can edit the options portion of the Chart.js spec as a JSON object. Here, you can make further adjustments to the Bar Chart using the information from chart.js here: https://www.chartjs.org/docs/latest/charts/bar.html.

Bubbles Over Key

This chart displays each key category (such as a city) as a bubble. Bubble charts require three values per data point, which determine the bubble’s location and size. These need to be explicitly titled “x,” “y,” and “z” (all lower case). “x” and “y” determine a bubble’s location, while “z” determines a bubble’s size. Bubble charts do not use a category axis; horizontal and vertical axes both serve as value axes.

.

You can use Panel Preferences to change the color of the bubbles’ fill and border. You can also set relative values for the radius of the bubbles by specifying values for a 10 pixel bubble and a 100 pixel bubble.

If you enable Advanced Options, you can edit the options portion of the Chart.js spec as a JSON object. Here, you can make further adjustments to the Bubbles Over Key Chart using the information from chart.js here: https://www.chartjs.org/docs/latest/charts/bubble.html.

Radar Chart

Radar Chart displays each key category (such as a city) as a radar graph (all the numerical columns in rows grouped by the key, such as all ATMs in San Francisco).

A radar chart shows multiple data points and the variation between them in a circular arrangement. (See https://en.wikipedia.org/wiki/Radar_chart for more details.) You can use these to compare the results of multiple data sets over time, to find clusters of trending data, and to note data outliers.

The Radar Chart panel is also built with Chart.js and is highly customizable. For example, this panel has both Fill Cover and Curve Color fields that specify the color of fill and curves in the chart. These fields can be filled in with a single color, such as “blue” or “rgba)0,0,255,1.0)” or “palate(classic9)”. Scheme may be classic9, colorwheel, cool, munin, spectrum14, spectrum2000, spectrum2001.

If you enable Advanced Options, you can edit the options portion of the Chart.js spec as a JSON object. Here, you can make further adjustments to the Radar Chart using the information from chart.js here: https://www.chartjs.org/docs/latest/charts/radar.html.