Generating Console ASCII Line Charts with asciichart.js

Blake Bradford Avatar

·

Article

Console ASCII line charts are a great way to visualize data in a simple and elegant manner. Whether you’re working with financial data, sensor readings, or any other type of time-series data, asciichart.js is a powerful library that allows you to create stunning ASCII line charts with just a few lines of code.

asciichart.js is a pure Javascript library that can be used in both NodeJS and browser environments. It has no external dependencies, making it incredibly lightweight and easy to use. To get started, simply install the library using npm or include the script directly in your HTML file.

In NodeJS, install asciichart.js using npm:

sh
npm install asciichart

Once installed, you can require the library and start plotting your data. For example, let’s plot a sinusoidal wave:

javascript
var asciichart = require('asciichart');
var s0 = new Array(120);
for (var i = 0; i < s0.length; i++)
s0[i] = 15 * Math.sin(i * ((Math.PI * 4) / s0.length));
console.log(asciichart.plot(s0));

In a browser environment, include the asciichart.js script in your HTML file:

“`html

asciichart

var s0 = new Array(120);
for (var i = 0; i < s0.length; i++)
s0[i] = 15 * Math.sin(i * ((Math.PI * 4) / s0.length));
console.log(asciichart.plot(s0));

“`

One of the great features of asciichart.js is the ability to customize the output. You can configure the width, height, and axis offset of the chart, as well as the padding for label formatting. The library provides a default label format function, but you can also override it with your own custom format.

“`javascript
var config = {
offset: 3, // axis offset from the left (min 2)
padding: ‘ ‘, // padding string for label formatting (can be overridden)
height: 10, // any height you want
format: function (x, i) { return (padding + x.toFixed(2)).slice(-padding.length) }
};

var s0 = new Array(120);
for (var i = 0; i < s0.length; i++)
s0[i] = 15 * Math.sin(i * ((Math.PI * 4) / s0.length));
console.log(asciichart.plot(s0, config));
“`

Additionally, asciichart.js allows you to scale the chart to your desired height. This is particularly useful when dealing with data that has a large range. By rescaling the graph, you can focus on the important details without sacrificing clarity.

javascript
var s = [];
for (var i = 0; i < 120; i++)
s[i] = 15 * Math.cos(i * ((Math.PI * 8) / 120)); // values range from -15 to +15
console.log(asciichart.plot(s, { height: 6 })); // this rescales the graph to ±3 lines

Another useful feature of asciichart.js is auto-ranging. Instead of specifying the data range manually, the library can automatically calculate it based on the provided data series. This ensures that the chart always fits the data and avoids any cutoffs or distortions.

javascript
var s2 = new Array(120);
s2[0] = Math.round(Math.random() * 15);
for (i = 1; i < s2.length; i++)
s2[i] = s2[i - 1] + Math.round(Math.random() * (Math.random() > 0.5 ? 2 : -2));
console.log(asciichart.plot(s2));

In conclusion, asciichart.js is a versatile and easy-to-use library for creating console ASCII line charts. Its pure Javascript implementation and lack of external dependencies make it a lightweight and efficient choice for both NodeJS and browser environments. With options for customization, scaling, and auto-ranging, asciichart.js provides the flexibility to adapt the charts to your specific needs. Explore the additional resources mentioned in this article to take your charting capabilities even further.

See Also:
– For drawing Bitcoin, Ether, and altcoin charts in the command-line console, check out bitcoin-chart-cli by madnight.
– If you’re a Java developer, you can find a Java port of asciichart.js called ASCIIGraph by MitchTalmadge.

Feel free to ask any questions and share your thoughts on console ASCII line charts and asciichart.js!

References

Leave a Reply

Your email address will not be published. Required fields are marked *