Awesome
asciichart
Console ASCII line charts in pure Javascript (for NodeJS and browsers) with no dependencies.
<img width="789" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22818709/9f14e1c2-ef7f-11e6-978f-34b5b595fb63.png">Usage
NodeJS
npm install asciichart
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))
Browsers
<!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>
Options
The width of the chart will always equal the length of data series. The height and range are determined automatically.
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))
<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22818807/313cd636-ef80-11e6-9d1a-7a90abdb38c8.png">
The output can be configured by passing a second parameter to the plot (series, config)
function. The following options are supported:
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) }
}
Scale To Desired Height
<img width="791" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22818711/9f166128-ef7f-11e6-9748-b23b151974ed.png">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
<img width="787" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22825525/dd295294-ef9e-11e6-93d1-0beb80b93133.png">
Auto-range
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))
<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://cloud.githubusercontent.com/assets/1294454/22818710/9f157a74-ef7f-11e6-893a-f7494b5abef1.png">
Multiple Series
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 ]))
<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://user-images.githubusercontent.com/27967284/79398277-5322da80-7f91-11ea-8da8-e47976b76c12.png">
Colors
var arr1 = new Array (120)
arr1[0] = Math.round (Math.random () * 15)
for (i = 1; i < arr1.length; i++)
arr1[i] = arr1[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
var arr2 = new Array (120)
arr2[0] = Math.round (Math.random () * 15)
for (i = 1; i < arr2.length; i++)
arr2[i] = arr2[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
var arr3 = new Array (120)
arr3[0] = Math.round (Math.random () * 15)
for (i = 1; i < arr3.length; i++)
arr3[i] = arr3[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
var arr4 = new Array (120)
arr4[0] = Math.round (Math.random () * 15)
for (i = 1; i < arr4.length; i++)
arr4[i] = arr4[i - 1] + Math.round (Math.random () * (Math.random () > 0.5 ? 2 : -2))
var config = {
colors: [
asciichart.blue,
asciichart.green,
asciichart.default, // default color
undefined, // equivalent to default
]
}
console.log (asciichart.plot([ arr1, arr2, arr3, arr4 ], config))
<img width="788" alt="Console ASCII Line charts in pure Javascript (for NodeJS and browsers)" src="https://user-images.githubusercontent.com/27967284/79398700-51a5e200-7f92-11ea-9048-8dbdeeb60830.png">
See Also
A util by madnight for drawing Bitcoin/Ether/altcoin charts in command-line console: bitcoin-chart-cli.
Ports
Special thx to all who helped port it to other languages, great stuff!
- Python port included!
- Java: ASCIIGraph, ported by MitchTalmadge. If you're a Java-person, check it out!
- Go: asciigraph, ported by guptarohit, Go people! )
- Haskell: asciichart, ported by madnight to Haskell world!
- Ruby: ascii_chart, ported by zhustec!
- Elixir: asciichart, ported by sndv!
- Perl: App::AsciiChart, ported by vti!
- C: plot, ported by annacrombie!
- C++: asciichart, ported by Civitasv!
- R: asciichartr, ported by blmayer!
- Rust: rasciigraph, ported by orhanbalci!
- PHP: PHP-colored-ascii-linechart, ported by noximo!
- C#: asciichart-sharp, ported by samcarton, maintained by NathanBaulch!
- Deno: chart, ported by maximousblk!
- Lua: lua-asciichart, ported by wuyudi!
Future work (coming soon, hopefully)
- levels and points on the graph!
- even better value formatting and auto-scaling!