Text-based Charting Library For Terminal & Browser Console – text-graph.js

Preview:

Description:

text-graph.js is a lightweight TypeScript library for generating text-based line charts to visualize data in the terminal or right in your browser’s console.

The library provides several components for plotting single- or multi-series line charts using only text and ASCII characters.

How to use it:

1. Install and import the text-graph.js components.

# NPM
$ npm i text-graph.js

import {
  Plot, 
  MultiPlotChart,
  LabelPositionFlags, 
  PlotAxisScale, 
  PlotSeriesAggregationFn, 
  PlotSeriesOverflow, 
  Color, 
  BackgroundColor, 
} from 'text-graph.js';

2. Create a new instance of the Plot class. Available parameters:

• width: Chart width (number of characters)
• height: Chart height (number of characters)
• options: Plot options

// Plot(width, height, options)
const plot = new Plot(80, 20, {
      showAxis: boolean,
      horizontalBoundary: number
      verticalBoundary: number
      title: string,
      titlePosition: LabelPositionFlags,
      titleForeground: Color,
      titleBackground: BackgroundColor,
      titleSpacing: number,
      axisScale: PlotAxisScale,
      aggregation: Utils.AggregationFn,
      axisLabelsFraction: number
});

3. Define the series configuration.

const seriesConfig = {
      color: Color.yellow,
      overflow: PlotSeriesOverflow.linearScale,
};

4. Add new plot series.

const seriesId = plot.addSeries(seriesConfig);

5. Add data entries to the series.

const fn = (x: number) => -Math.pow(x, 2) + plot.width * x;
for (let i = 0; i <= plot.width; i++) {
  plot.addSeriesEntry(seriesId, fn(i));
}

6. Generate and print the chart data.

const chartData = plot.paint();
console.log(chartData);

7. This example shows how to generate a multi-series line chart.

import {Plot, Color, PlotAxisScale, PlotSeriesAggregationFn, PlotSeriesOverflow, LabelPositionFlags} from "../src";
const plotOptions = {
    showAxis: true, // Show vertical axis
    title: "Multi-Series Demo", // Title of the chart
    titlePosition: LabelPositionFlags.top, // Position of the title
    axisScale: PlotAxisScale.linear, // Scale of the axis
    aggregation: PlotSeriesAggregationFn.mean, // Aggregation type for data points
};
const plot = new Plot(80, 20, plotOptions);
const scale = PlotSeriesOverflow.linearScale // Overflow behavior of the series
const seriesConfig1 = {
    color: Color.red, // Color of the first series
    overflow: scale
};
const seriesConfig2 = {
    color: Color.green, // Color of the second series
    overflow: scale
};
const seriesConfig3 = {
    color: Color.cyan, // Color of the third series
    overflow: scale
};
const seriesId1 = plot.addSeries(seriesConfig1);
const seriesId2 = plot.addSeries(seriesConfig2);
const seriesId3 = plot.addSeries(seriesConfig3);
const fn1 = (x: number) => Math.sin(x) * Math.exp(-0.1 * x);
const fn2 = (x: number) => 0.8 * Math.sin(x) + 0.6 * Math.sin(2 * x) + 0.4 * Math.sin(3 * x);
const fn3 = (x: number) => Math.sin(x) * Math.cos(2 * x) + Math.cos(x) * Math.sin(2 * x);
const delay = 66;
async function draw() {
    for (let x = -2; x <= 2; x += 0.03) {
        plot.addSeriesEntry(seriesId1, fn1(x));
        plot.addSeriesEntry(seriesId2, fn2(x));
        plot.addSeriesEntry(seriesId3, fn3(x));
        const chartData = plot.paint();
        console.clear();
        console.log(chartData);
        await _delay(delay);
    }
}
// Start animated drawing
draw();
// Auxiliary function to avoid setTimeout in loop
function _delay(d: number) { return new Promise(resolve => setTimeout(resolve, d))}

8. This example shows how to generate a multi-chart graph.

const chart = new MultiPlotChart({
    title: "Dashboard chart",
    titleBoundary: 2,
    titleSpacing: 8,
    titleForeground: Color.blue,
    titleBackground: BackgroundColor.black,
});
chart.addPlot({xOffset: 0, yOffset: 0, width: 40, height: 31}, {
    title: "overflow: skip",
});
chart.addPlot({xOffset: 42, yOffset: 0, width: 60, height: 15}, {
    title: "overflow: logScale (agg: max)",
    axisScale: PlotAxisScale.log,
});
chart.addPlot({xOffset: 42, yOffset: 16, width: 60, height: 15}, {
    title: "overflow: linearScale (agg: mean)",
    axisScale: PlotAxisScale.logInverted,
    aggregation: PlotSeriesAggregationFn.mean
});
chart.addPlotSeries(0, {color: Color.red, overflow: PlotSeriesOverflow.clamp});
chart.addPlotSeries(1, {color: Color.blue, overflow: PlotSeriesOverflow.linearScale});
chart.addPlotSeries(2, {color: Color.yellow});
let delay = 66; // Delay in milliseconds
for (let i = 0; i < 2000; i++) {
    setTimeout(() => {
        chart.addSeriesEntry(0, 0, Math.cos(i * Math.PI / 15));
        chart.addSeriesEntry(1, 0, Math.sin(i * Math.PI / 30) * 100 + 2);
        chart.addSeriesEntry(2, 0, Math.cos(i * Math.PI / 30) * 100 + 2);
        const chartData = chart.paint();
        console.clear();
        console.log(chartData);
    }, delay * i);
}

Changelog:

09/27/2023

• v1.1.2