DOCSEARCHbyAlgolia
Submit Docs

asciichart

repository·master·Indexed 24 days ago

https://github.com/kroitor/asciichart

A pure JavaScript library for rendering lightweight ASCII line charts in the console, compatible with NodeJS and web browsers. Version 1.5.26 provides the plot() method to generate charts from single or multiple data series with customizable options for height, colors, axis offset, and label formatting.

Tokens
2.7K
Snippets
11
Records
13
Agent score
82%

What's inside asciichart

  2. Use asciichart in the browser

    master

    Include the asciichart.js file in your HTML and call asciichart.plot() within a script tag.

    <!DOCTYPE html>
<html
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="UTF-8">
        <title>asciichart</title>
        <script src="asciichart.js"></script>
        <script type="text/javascript">
            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))
        </script>
    </head>
    <body
    >
</html>

  3. Scale a chart to a desired height

    master

    By providing a height property in the configuration object, asciichart will rescale the graph to fit that height. For example, if values range from -15 to +15 and you set height: 6, the graph will be rescaled to ±3 lines.

    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

  4. Scale a chart to a specific height

    master

    To control the vertical scale of the chart, provide a height property in the configuration object. This rescales the graph to fit the specified number of lines.

    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

  5. Plot multiple data series

    master

    To plot multiple lines on the same chart, pass an array of arrays (where each inner array is a data series) to asciichart.plot().

    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))

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

console.log (asciichart.plot ([ s2, s3 ]))

  6. Use asciichart in Browsers

    master

    Include the asciichart.js script in your HTML file to use the library directly in the browser.

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta charset="UTF-8">
        <title>asciichart</title>
        <script src="asciichart.js"></script>
        <script type="text/javascript">
            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))
        </script>
    </head>
    <body>
    </body>
</html>

  7. Plot a simple line chart in NodeJS

    master

    Import asciichart and pass an array of numbers to the plot() method to generate an ASCII line chart string.

    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))

  8. Use asciichart in NodeJS

    master

    Import asciichart and use the plot() method to generate an ASCII line chart from an array of numbers. The width of the chart automatically matches the length of the data series.

    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))

  9. Configure asciichart plot options

    master

    The plot(series, config) function accepts an optional configuration object to customize the chart output.

    Supported options:

    • offset: Axis offset from the left (minimum value is 2).
    • padding: A string used for label formatting (can be overridden).
    • height: The desired height of the chart.
    • format: A function (x, i) => string used to format labels. It receives the value x and the index i. The default implementation applies the padding string.
    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

    // the label format function applies default padding
    format:  function (x, i) { return (padding + x.toFixed (2)).slice (-padding.length) }
}

  10. Apply colors to multiple series

    master

    You can color individual series by providing a colors array in the configuration object. The array should contain color constants provided by the asciichart object. Use asciichart.default or undefined for the default color.

    var config = {
    colors: [
        asciichart.blue,
        asciichart.green,
        asciichart.default, // default color
        undefined, // equivalent to default
    ]
}

console.log (asciichart.plot([ arr1, arr2, arr3, arr4 ], config))

  11. Generate ASCII line charts with plot()

    master

    The plot() function generates an ASCII line chart from one or more data series. It accepts either a single array of numbers or an array of arrays (for multiple series).

    Parameters

    • series: An array of numbers [n1, n2, ...] or an array of arrays [[n1, n2, ...], [m1, m2, ...]].
    • cfg (optional): A configuration object to customize the chart appearance.

    Configuration Options (cfg)

    OptionTypeDefaultDescription
    minnumberseries[0][0]The minimum value for the Y-axis scale.
    maxnumberseries[0][0]The maximum value for the Y-axis scale.
    offsetnumber3Horizontal offset for the Y-axis labels.
    paddingstring' 'Padding used for Y-axis label formatting.
    heightnumberrangeThe desired height (number of rows) of the chart.
    colorsstring[][]An array of ANSI color sequences to apply to each series.
    symbolsstring[]['┼', '┤', '╶', '╴', '─', '╰', '╭', '╮', '╯', '│']An array of characters used to draw the chart lines and axes.
    formatfunction(x) => (padding + x.toFixed(2)).slice(-padding.length)A function that takes a number and returns a string for the Y-axis label.

    Returns a single string representing the ASCII chart.

  12. Use ANSI color sequences with colored()

    master

    The colored() function wraps a character with an ANSI color sequence and a reset sequence. This is used internally by plot() when colors are provided in the configuration, but can be used manually.

    colored(char, color)

    • char: The character to color.
    • color: An ANSI color string (e.g., from the exported color constants). If undefined, the character is returned as-is.