Skip to content

ChartGL

Screenshot

ChartGL leverages hardware acceleration to enable the visualization of very large datasets.

WebGL is used to access the graphics hardware on the local computer accelerating the rendering process by a factor of many thousand. In WebGL2 a combination of vertex shaders (position) and fragment shaders (color) are used to render data points providing the capability to display millions of data points in milliseconds.

Multiple large data sources can be plotted on the same chart with high speed and performance using layers.

Set up

  1. Select a data source, available in Layers. ChartGL will best fit your data to the chart using a wild card selector in the Y-Axis. Otherwise, select your data to plot for X-Axis and Y-Axis.

  2. Format your X-axes and Y-axes; add axes labels with Titles.

Basics

Screenshot

Hover
A View State Parameter which stores the X-axis value contingent on where the hover bar is on the chart; e.g. time or date.
Selected
A View State Parameter to store the X-axis value at the selected position; e.g time or date.
Animation Duration
Animation Easing
Define zoom animation and length of time in milliseconds to complete.
The Zoom feature enables the ability to zoom on a region within both x and y axis, or individually on each x or y axis. Double-Clicking the chart resets the chart to its initial state.
Screenshot
Screenshot

The Pan feature enables the ability to pan along one axis at a time. To pan, click and drag from anywhere on the axis. Double-Clicking the chart resets the chart to its initial state.

Layers

Ability to display multiple different data sources on the same chart.

Screenshot

Bubble/Line/Bar

Select either the "Bubble", "Line" or "Bar" option for each layer.

Screenshot

The "Bubble" option displays data as individual points, the "Line" option connects each data point resulting in a continuous line, and the "Bar" option displays data as bars.

Screenshot

Data Source
Data sources
X-Axis
Y Axis
Select data columns to plot from the data source.
Y Axis includes a wildcard selection for multiple columns. Wildcard selection will use columns of the most common, single kdb type; for example, if a data set has one date type column, three integer type columns, and five float type columns - only the five float columns will be plotted using the wildcard, the integer and date columns will be ignored.

When wildcard is used, the Color Palette defines point color for each added column.

Data Types

Only scalar data types can be used for X-Axis and Y-Axis.

Color
Select color for single plot (non-wildcard) data sets.
Opacity
Define the opacity of the points from a value between 0 (transparent) and 100 (opaque).
Point Size
The size of the points (or icons) if the layer type is Bubble.
Icon

The icon selector allows for the choice of icons from a predetermined list if the layer type is Bubble.

Screenshot

The icons are then displayed in the position of the data points on the chart.

Icons also support a base64 image in a view state parameter.

Screenshot

Bar Percentage
Defines bar width as a percentage of its range when Bar Percentage is selected under Bar Width Type.
Bar Fixed Width
Defines bar width as a fixed value when Fixed Width is selected under Bar Width Type.
Bar Width Type
Dropdown select between Bar Percentage and Fixed Width.
Color
Define color of plotted points when a wildcard is not used, including 'no color'.
X-Axis ID
Select from defined Axes.
Y-Axis ID
Select from defined Axes.
Name
Name used as the chart legend label.
Enabled
Toggles display of the data layer on the chart. Can be tied to a view state parameter.
Legend Enabled
Toggles display of data legend.

Actions

Actions

Highlight rules

Highlight Rules

X axes

X-Axis n

Add multiple x-axes.

Screenshot

X-Axis Type
Choose between Linear or Category data.
Position
Position axis to the top or bottom of the chart.
Height
Height of the tick area of the x-axis in pixels.
Number of Ticks
Sets the number of ticks to display in the axis.

Range

Use Min/Max
Toggle use of Min and Max to build x-axis.
Min
Max

Define minimum and maximum values for x-axis.

Hard range

Charted data outside of the set Min and Max range will not be displayed. If all data falls outside the set range, the chart will be blank.

Selection Min
Selection Max
Pulls min and max x-axis values on a zoom select into assigned view state parameters.

Gridlines

OffsetGridLines
Check to align x-axis grid lines to mid-point between tick values.
GridLinesColor
GridLinesOpacity
Define visual style of x-axis grid lines; opacity has a value between 0 (transparent) and 100 (opaque).

Format

Hide Trailing Zeroes
Hide display of trailing zeroes in x-axis tick values.
Display
Toggle display of x-axis labels.
Numeric Format
Select x-axis format between Number, Smart Number, Formatted Number.
Decimal Places
Set precision point for x-axis numeric label.
Font Size
Set tick font size in pixels.
Prefix
Suffix
Add text to the tick label; e.g. currency or percentage symbol.

Title

Display
Toggle display of x-axis label.
Label String
Define x-axes label text.
Font Size
Set label font size in pixels.

Y axes

Y-Axis n

Add multiple y-axes.

Screenshot

Y-Axis Type
Choose between Linear or Category data.
Position
Position axis to the left or right of the chart.
Width
Width of the tick area of the y-axis in pixels.
Number of Ticks
Sets the number of ticks to display in the axis.

Range

Use Min/Max
Toggle use of Min and Max to build y-axis.
Min
Max

Define minimum and maximum values for y-axis

Hard range

Charted data outside of the set Min and Max range will not be displayed. If all data falls outside the set range, the chart will be blank.

Selection Min
Selection Max
Pulls min and max x-axis values on a zoom select into assigned view state parameters.

Gridlines

OffsetGridLines
Check to align y-axis grid lines to mid-point between tick values.
GridLinesColor
GridLinesOpacity
Define visual style of y-axis grid lines; opacity has a value between 0 (transparent) and 100 (opaque).

Format

Hide Trailing Zeroes
Hide display of trailing zeroes in y-axis tick values.
Display
Toggle display of y-axis labels.
Numeric Format
Select y-axis format between Number, Smart Number, Formatted Number.
Decimal Places
Set precision point for y-axis numeric label.
Font Size
Set tick font size in pixels.
Prefix
Suffix
Add text to the tick label; e.g. currency or percentage symbol.

Title

Display
Toggle display of y-axis label.
Label String
Define y-axis label text.
Font Size
Set label font size in pixels.

Overlay

Screenshot

Screenshot

Show Crosshairs
Check to show crosshair on chart.
Use custom tooltip
Enable custom tooltip.
Custom tooltip
Define tooltip; simple example:
<table>
    <thead>
        <tr>
            <th>{{this.0.0.xAxis}}</th>
            <th></th>
        </tr>
    </thead>{{#each this}}{{#each this}}
            <tbody>
                <tr>
                    <td width="{{width}}"><i class="{{icon}}" style="color:{{color}}; {{image}};"></i> {{name}}: </td>
                    <td>{{yAxis}}</td>
                </tr>
        {{/each}}{{/each}}</tbody>
</table>

Templates

Show all data points
Displays all y-axis values for selected point on the x-axis.
Group tooltip by Layer
Use when Show all data points is enabled; displays data points in a distinct column for each Layer instead of a continuous list.

Colour Palette

Screenshot

Sets plot point colors for wildcard y-axis.

Style, Margins, Format

Style for common settings