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.

Data Types

The ChartGL component supports the plotting of scalar values (datetimes and numbers) from multiple different large data sources on the same chart.

Zoom

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

Layers

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

Screenshot

Data Source
Data sources
Bubble/Line

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

Screenshot

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

Screenshot

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 a 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 scaler data types can be used for X-Axis and Y-Axis

Color
Define color of plotted points when a wildcard is not used, including 'no color'.
Point Size
The size of the points (or icons).
Icon

The icon selector allows for the choice of icons from a predetermined list.

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

Legend Enabled
Toggles display of data legend.

Actions

Actions

ToolTips

The tooltip feature can be used to display the coordinates of individual data points on the chart.

Screenshot

The tooltip feature can be used in tandem with the zoom hence allowing for the identificaiton of any single point on the chart.

X-Axis and Y-Axis

Screenshot

X-Axis Type
Dropdown select: Linear, Category, Time
X-Axis Height
Y-Axis Width
Adjust pixel height of axis to edge of component.
Number of Ticks
Number of ticks to display in the axis.

Range

Use min max
Min
Max
Define min and max range values for x- and y-axis.
Selection Min
Selection Max
Displays user-zoom min and max values; can be mapped to view state parameters.

Gridlines

Offset Gridlines
Check to shift gridlines from centre alignment to left-alignment.
Gridlines Color
Gridlines Opacity
Define visual style of chart gridlines.

Format

Hide Trailing Zeroes
Remove extra zeroes from axis labels.
Display
Toggle display of axis.
Numeric Format
Define axis format; select between Number,Smart Number,Formatted Number.
Decimal Places
For numeric axis formats, define the number of decimal places to display.
Font Size
Define font size (px) of axis tick labels.
Prefix
Suffix
Append text or symbol content before or after axis value.

Title

Display
Toggle display of axis label.
Label String
Text description of axis.
Font Size
Define font size (px) of axis label.

Overlay

Show Crosshairs
Check to show crosshair on chart
Use custom tooltip
Enable custom tooltip
Custom tooltip
Define tooltip
<table>
  {{#each this}}
    {{#eq @index 0}}
      <thead>
        <tr>
          <th>
            {{xAxis}}
          </th>
          <th></th>
        </tr>
      </thead>
    {{/eq}}
    <tr>
      <td width="{{width}}">
        <i class="{{icon}}" style="color:{{color}}"></i>
        {{name}}
        :
      </td>
      <td>
        {{yAxis}}
      </td>
    </tr>
  {{/each}}
</table>

Colour Palette

Screenshot

Sets plot point colors for wildcard y-axis.

Style, Margins, Format

Style for common settings