LineGraph Library

A library for creating and manipulating line graphs using the HTML Canvas API.

Interfaces

DataPoint

interface DataPoint {
  time: number;
  elevation: number;
}

Represents a single data point in the graph with time and elevation properties.

DrawOptions

interface DrawOptions {
  color?: string;
  lineWidth?: number;
  fillColor?: string;
  font?: string;
  lineDash?: number[];
  angle?: number; // Angle in degrees for text rotation
}

Options for customizing the appearance of lines, circles, and text.

AxisOptions

interface AxisOptions {
  fontSize?: number;
  fontColor?: string;
  font?: string;
  xPadding?: number;
  yPadding?: number;
  xScale?: {
    min: number;
    max: number;
    step: number;
    decimalPlaces?: number;
    showDecimals?: boolean;
    labelOffset?: number;
  };
  yScale?: {
    min: number;
    max: number;
    step: number;
    decimalPlaces?: number;
    showDecimals?: boolean;
    labelOffset?: number;
  };
  xLabel?: string;
  yLabel?: string;
  xAxisStyle?: DrawOptions;
  yAxisStyle?: DrawOptions;
}

Options for customizing the appearance of the graph axes.

LineGraph Class

Constructor

constructor(canvas: HTMLCanvasElement, width: number, height: number)

Creates a new instance of LineGraph.

• canvas: The HTMLCanvasElement to draw on.
• width: The width of the canvas.
• height: The height of the canvas.

clearCanvas

setData(data: DataPoint[]): void

Clears the entire canvas.

drawLine

drawLine(x1: number, y1: number, x2: number, y2: number, options: DrawOptions = {}): void

Draws a line on the canvas.

• x1, y1: The starting coordinates.
• x2, y2: The ending coordinates.
• options: Optional DrawOptions to customize the line.

drawCircle

drawCircle(x: number, y: number, radius: number, options: DrawOptions = {}): void

drawText

drawText(text: string, x: number, y: number, options: DrawOptions = {}): void

Draws text on the canvas.

• text: The text string to draw.
• x, y: The coordinates where the text will be placed.
• options: Optional DrawOptions to customize the text.

drawAxes

drawAxes(options: AxisOptions = {}): void

Draws the X and Y axes on the canvas.

• options: Optional AxisOptions to customize the axes.

drawVerticalLinesAtPositions

drawVerticalLinesAtPositions(
  xPositions: number[],
  text: string,
  axisOptions: AxisOptions,
  drawOptions: DrawOptions = {},
  textOptions: DrawOptions = {},
  minHeight: number = 0,
  maxHeight: number = this.height
): void

Draws vertical lines at specified x-axis positions and places text between them.

• xPositions: An array containing exactly two x-axis positions.
• text: The text to display between the vertical lines.
• axisOptions: The AxisOptions to correctly calibrate the size and placement of the lines.
• drawOptions: Optional DrawOptions to customize the vertical lines.
• textOptions: Optional DrawOptions to customize the text.
• minHeight: Minimum y-coordinate for the vertical lines (default is 0).
• maxHeight: Maximum y-coordinate for the vertical lines (default is canvas height).

connectDataPoints

connectDataPoints(data: DataPoint[], xPadding: number = 50, yPadding: number = 50, options: DrawOptions = {}): void

Connects the data points with lines.

• data: An array of DataPoint objects to connect.
• xPadding, yPadding: Padding from the edges of the canvas.
• options: Optional DrawOptions to customize the connecting lines.

Example Usage

import { LineGraph, DataPoint, DrawOptions, AxisOptions } from './path-to-your-line-graph-file';

document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
  const width = 800;
  const height = 600;

  const graph = new LineGraph(canvas, width, height);

  const dataPoints: DataPoint[] = [
    { time: 0, elevation: 0 },
    { time: 1, elevation: 10 },
    { time: 2, elevation: 20 },
    { time: 3, elevation: 15 },
    { time: 4, elevation: 25 },
  ];

  graph.setData(dataPoints);

  const axisOptions: AxisOptions = {
    fontSize: 14,
    fontColor: 'black',
    font: 'Arial',
    xPadding: 60,
    yPadding: 60,
    xScale: {
      min: 0,
      max: 5,
      step: 1,
      decimalPlaces: 0,
      showDecimals: false,
      labelOffset: 10,
    },
    yScale: {
      min: 0,
      max: 30,
      step: 5,
      decimalPlaces: 0,
      showDecimals: false,
      labelOffset: 10,
    },
    xLabel: 'Time (s)',
    yLabel: 'Elevation (m)',
    xAxisStyle: { color: 'black', lineWidth: 2 },
    yAxisStyle: { color: 'black', lineWidth: 2 },
  };

  graph.clearCanvas();
  graph.drawAxes(axisOptions);
  graph.plotDataPoints();

  const drawOptions: DrawOptions = {
    color: 'blue',
    lineWidth: 2,
  };

  graph.connectDataPoints(dataPoints, 60, 60, drawOptions);

  const verticalLineOptions: DrawOptions = {
    color: 'red',
    lineWidth: 2,
    lineDash: [5, 5],
  };

  const textOptions: DrawOptions = {
    color: 'black',
    font: '14px Arial',
  };

  const xPositions = [1, 3];
  const text = 'Sample Text';
  const minHeight = 100; // Minimum y-coordinate
  const maxHeight = 500; // Maximum y-coordinate

  graph.drawVerticalLinesAtPositions(xPositions, text, axisOptions, verticalLineOptions, textOptions, minHeight, maxHeight);
});

Angular Setup

import {
  Component,
  OnInit,
  AfterViewInit,
  ViewChild,
  ElementRef,
  Inject,
  PLATFORM_ID,
} from '@angular/core';
import {
  LineGraph,
  DataPoint,
  DrawOptions,
  AxisOptions,
} from '../../line-graph';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-canvas',
  standalone: true,
  imports: [],
  templateUrl: './canvas.component.html',
  styleUrl: './canvas.component.css',
})
export class CanvasComponent implements OnInit, AfterViewInit {
  @ViewChild('canvas', { static: false })
  canvasElement!: ElementRef<HTMLCanvasElement>;

  private lineGraph!: LineGraph;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
  ngOnInit(): void { }
  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      const canvas = this.canvasElement.nativeElement;
      this.lineGraph = new LineGraph(canvas, 800, 500);

      const data: DataPoint[] = [
        { time: 0, elevation: 0 },
        { time: 1, elevation: 10 },
        { time: 2, elevation: 20 },
        { time: 3, elevation: 15 },
        { time: 4, elevation: 25 },
        { time: 5, elevation: 30 },
        { time: 6, elevation: 20 },
        { time: 7, elevation: 10 },
        { time: 8, elevation: 0 },
      ];

      const trajOptions: DrawOptions = {
        color: 'red',
        lineWidth: 1,
        lineDash: [5, 5],
      };

      const axisOptions: AxisOptions = {
        fontSize: 10,
        fontColor: 'lightgrey',
        font: 'Verdana',
        xPadding: 100,
        yPadding: 50,
        xScale: { min: 0, max: 30, step: 2 },
        yScale: { min: 0, max: 5000, step: 500 },
        yAxisStyle: { color: 'lightgrey', lineWidth: 1 },
        xAxisStyle: { color: 'lightgrey', lineWidth: 1 },
        // xLabel: 'Time',
        // yLabel: 'Elevation',
      };

      this.lineGraph.drawVerticalLinesAtPositions(
        [2, 8],
        'Label',
        axisOptions,
        { color: 'yellow', lineWidth: 1 },
        { color: 'yellow' },
        800,
        200,
      );

      this.lineGraph.drawAxes(axisOptions);
      // this.lineGraph.plotDataPoints();
      this.lineGraph.connectDataPoints(data, 100, 50, trajOptions);
    }
  }
}