text-graph.js

text-graph.js is a compact and easy-to-use JavaScript/TypeScript library. It lets you create charts in the terminal and browser console. You can make line charts and build a dashboard with multiple charts, all without any extarnal dependencies. It has features for different axis and data scaling methods. Plus, it supports adding colors to your charts.

Features

• Create line charts
• Drawing multiple series on one plot
• Creating dashboards with multiple charts
• Colors for chart elements
• Built-in axis scale functions (i.e. log)
• Built-in different data overflow handling functions (i.e. linear scale, clapm, etc)
• Built-in different data compression functions (i.e. mean, max, etc)

Installation

npm install text-graph.js

Run from source

# clone repo
git clone https://github.com/DrA1ex/text-graph.js.git
cd ./text-graph.js

# install dependencies
npm install

# Run example
npx tsx ./examples/dashboard.ts

Get Started

// Importing the Plot class
import {Plot} from 'text-graph.js';

// Creating a new instance of the Plot class with a width of 80 characters and height of 20 characters
const plot = new Plot(80, 20);

// Adding a new series to the plot and storing its ID
const id = plot.addSeries();

// Defining a function that takes a number "x" as input and calculates a mathematical expression
const fn = (x) => Math.pow(Math.sin(x), 3) + Math.pow(Math.cos(x), 3) - 1.5 * Math.sin(x) * Math.cos(x);

// Iterating over a range of values from -2 to just below 2, incrementing by 0.05 at each step
for (let x = -2; x < 2; x += 0.05) {
    // Adding an entry to the series with the given ID, calculated using the function "fn"
    plot.addSeriesEntry(id, fn(x));
}

// Printing the chart output to the console
console.log(plot.paint());

Source code: link

Usage

To use text-graph.js, follow these steps:

1. Import the necessary classes and enums:

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

2. Define the plot options:

const plotOptions = {
    showAxis: true,
    title: 'Chart Title',
    horizontalBoundary: 1,
    verticalBoundary: 2,
    titlePosition: LabelPositionFlags.top,
    titleForeground: Color.blue,
    titleBackground: BackgroundColor.black,
    axisLabelsFraction: 4,
    axisScale: PlotAxisScale.linear,
    aggregation: PlotSeriesAggregationFn.mean,
    zoom: false,
}

3. Create a plot instance:

const width = 60;
const height = 20;
const plot = new Plot(width, height, plotOptions);

4. Define the series configurations:

const plotSeriesConfig1 = {
    color: Color.cyan,
    overflow: PlotSeriesOverflow.logScale
};

const plotSeriesConfig2 = {
    color: Color.magenta,
    overflow: PlotSeriesOverflow.clamp
};

5. Add plot series to the plot:

const seriesId1 = plot.addSeries(plotSeriesConfig1);
const seriesId2 = plot.addSeries(plotSeriesConfig2);

6. Option 1: Iterate over your data and update the plot:

const data1 = [1, 2, 3];
for (const value of data1) {
    plot.addSeriesEntry(seriesId1, value);
}

const data2 = [0, -1, -2];
for (const value of data2) {
    plot.addSeriesEntry(seriesId2, value);
}

6. Option 2: Populate all data to the plot:

plot.addSeriesRange(seriesId1, [1, 2, 3]);
plot.addSeriesRange(seriesId2, [0, -1, -2]);

7. Display the plot:

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

Examples

Single Series Chart

Source code: link

Multi-line Series Chart

Source code: link

Dashboard

Source code: link

Neural network training dashboard

Project: link

Snippets

Fast plot drawing

const data = new Array(200);
for (let i = 0; i < data.length; i++) {
    data[i] = Math.sin(0.3 * i) * Math.cos(0.6 * i) - Math.sin(i * Math.PI / 50) * Math.abs(i - 100) / 30
}

console.log(Plot.plot(data));

Axis scale

const data = new Array(300);
for (let i = 0; i < data.length; i++) {
    data[i] = Math.sin(0.3 * i) * Math.cos(0.6 * i) - Math.sin(i * Math.PI / 50) * Math.abs(i - 100) / 30
}

console.log(Plot.plot(data, {axisScale: PlotAxisScale.log}));

Series data zoom

const data = [1, 2, 3]
console.log(Plot.plot(data, {zoom: true}));

Series scale on overflow

const data = new Array(300);
for (let i = 0; i < data.length; i++) {
    data[i] = Math.sin(0.3 * i) * Math.cos(0.6 * i) - Math.sin(i * Math.PI / 50) * Math.abs(i - 100) / 30
}

console.log(Plot.plot(data, {}, {overflow: PlotSeriesOverflow.logScale}));

Series color

const data = new Array(300);
for (let i = 0; i < data.length; i++) {
    data[i] = Math.sin(0.3 * i) * Math.cos(0.6 * i) - Math.sin(i * Math.PI / 50) * Math.abs(i - 100) / 30
}

console.log(Plot.plot(data, {}, {color: Color.green}));

Different height

const data = new Array(200);
for (let i = 0; i < data.length; i++) {
    data[i] = Math.sin(0.3 * i) * Math.cos(0.6 * i) - Math.sin(i * Math.PI / 50) * Math.abs(i - 100) / 30
}

console.log(Plot.plot(data, {height: 5}));

License

text-graph.js is released under the BSD-3-Clause License.