Basics

This document explains the essential building blocks used in example-basic.vue:

Scale for data range definition on axes
EventDispatcher for input and interaction handling
BasicChartLayout for axis and chart region arrangement
ChartConfig render loop via setRenderCallback

Source

<script setup lang="ts">
import { Generators } from './generators';
import { Chart, ChartConfig} from '@tomsoftware/webgl-chart-vue';
import { GpuGrowingBuffer, LayoutCell, Color, EventDispatcher, } from '@tomsoftware/webgl-lib';
import {SeriesPoint, BasicChartLayout, SeriesLine, Scale,
  } from '@tomsoftware/webgl-chart';

// generate time data
const itemCount = 1000 * 60 * 60 / 4;
const time = new GpuGrowingBuffer('float32', itemCount)
    .generate((i) => i * 0.001); // in seconds

const data1 = GpuGrowingBuffer.generateFrom('float32', time, (t) => Generators.generateSin(t));
const data2 = GpuGrowingBuffer.generateFrom('float32', time, (t) => Generators.generateIO(t * 10) * 20);

// generate series data
const series1 = new SeriesPoint(time, data1)
    .setColor(Color.blue)
    .setPointSize(5);

const series2 = new SeriesLine(time, data2)
    .setColor(Color.red)
    .setThickness(2)

// scales define the range that is shown by the axis
const scaleX = new Scale(0, 1);
const scaleY = new Scale(-5, 25);

// handel events
const eventDispatcher = new EventDispatcher();

// define layout
const baseContainer = new LayoutCell();

// use a basic chart layout for arranging the chart-elements
const basicLayout = new BasicChartLayout(eventDispatcher, baseContainer, scaleX);
basicLayout.addYScale(scaleY, 'Value');
basicLayout.xAxis.label?.setText('Time');

// set render callback: here you need to define what elements you want to draw
const myChart = new ChartConfig()
    .setRenderCallback((context) => {

      // arrange layout
      context.calculateLayout(baseContainer);

      // process events
      eventDispatcher.dispatch(context);

      // draw elements of chart-layout
      basicLayout.draw(context);

      // draw the series
      series1.draw(context, scaleX, scaleY, basicLayout.chartCell);
      series2.draw(context, scaleX, scaleY, basicLayout.chartCell);
  });

function onBind(element: HTMLElement | null): void {
  eventDispatcher.bind(element)
}

// manage chart options
myChart.setMaxFrameRate(12);

</script>

<template>
  <chart
    :data="myChart"
    @on-bind="onBind"
    class="chart"
  />
</template>

<style scoped>
.chart {
  width: 100%;
  background-color: white;
}

</style>

Data and Axis Scales

Scale controls the visible data range.

const scaleX = new Scale(0, 1);
const scaleY = new Scale(-5, 25);

Link scales to the layout:

basicLayout.addYScale(scaleY, 'Value');
basicLayout.xAxis.label?.setText('Time');

Event Dispatcher

EventDispatcher handles mouse/touch events and feeds them into the rendering system.

const eventDispatcher = new EventDispatcher();

function onBind(element: HTMLElement | null) {
  eventDispatcher.bind(element);
}

Inside the render callback:

eventDispatcher.dispatch(context);

BasicChartLayout

BasicChartLayout positions the chart frame, axes, and labels.

const baseContainer = new LayoutCell();
const basicLayout = new BasicChartLayout(eventDispatcher, baseContainer, scaleX);

In render loop:

context.calculateLayout(baseContainer);
basicLayout.draw(context);

Rendering Loop

The main loop is defined in ChartConfig.setRenderCallback.

const myChart = new ChartConfig().setRenderCallback((context) => {
  context.calculateLayout(baseContainer);
  eventDispatcher.dispatch(context);
  basicLayout.draw(context);
  series1.draw(context, scaleX, scaleY, basicLayout.chartCell);
  series3.draw(context, scaleX, scaleY, basicLayout.chartCell);
});

myChart.setMaxFrameRate(12);

Series Types

Point Series

SeriesPoint draws points at each data coordinate and supports variable point size.

const series1 = new SeriesPoint(time)
  .generate((t) => Generators.generateSin(t))
  .setColor(Color.blue)
  .setPointSize(5);

Line Series

SeriesLine draws connected lines between data coordinates.

const series3 = new SeriesLine(time)
  .generate((t) => Generators.generateIO(t * 10) * 20)
  .setColor(Color.darkGreen)
  .setThickness(2);