A library for creating and manipulating line graphs using the HTML Canvas API.
interface DataPoint {
time: number;
elevation: number;
}
Represents a single data point in the graph with time and elevation properties.
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.
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.
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.
setData(data: DataPoint[]): void
Clears the entire canvas.
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(x: number, y: number, radius: number, options: DrawOptions = {}): void
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(options: AxisOptions = {}): void
Draws the X and Y axes on the canvas.
- options: Optional AxisOptions to customize the axes.
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(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.
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);
});
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);
}
}
}