Some improvements
This commit is contained in:
Your Name
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
54
README.md
54
README.md
@@ -15,32 +15,32 @@ A dynamic, real-time ASCII-based vertical bar chart library that renders beautif
|
||||
## Demo
|
||||
|
||||
```
|
||||
Real-Time Data Visualization
|
||||
Real-Time Data Visualization
|
||||
|
||||
C 20 | X X X X X X X X X X X X X X X X X X X X
|
||||
o 19 | X X X X X X X X X X X X X X X X X X X X
|
||||
u 18 | X X X X X X X X X X X X X X X X X X X X
|
||||
n 17 | X X X X X X X X X X X X X X X X X X X X
|
||||
t 16 | X X X X X X X X X X X X X X X X X X X X
|
||||
15 | X X X X X X X X X X X X X X X X X X X X
|
||||
14 | X X X X X X X X X X X X X X X X X X X X
|
||||
13 | X X X X X X X X X X X X X X X X X X X X
|
||||
12 | X X X X X X X X X X X X X X X X X X X X
|
||||
11 | X X X X X X X X X X X X X X X X X X X X
|
||||
10 | X X X X X X X X X X X X X X X X X X X X
|
||||
9 | X X X X X X X X X X X X X X X X X X X X
|
||||
8 | X X X X X X X X X X X X X X X X X X X X
|
||||
7 | X X X X X X X X X X X X X X X X X X X X
|
||||
6 | X X X X X X X X X X X X X X X X X X X X
|
||||
5 | X X X X X X X X X X X X X X X X X X X X
|
||||
4 | X X X X X X X X X X X X X X X X X X X X
|
||||
3 | X X X X X X X X X X X X X X X X X X X X
|
||||
2 | X X X X X X X X X X X X X X X X X X X X
|
||||
1 | X X X X X X X X X X X X X X X X X X X X
|
||||
+----------------------------------------
|
||||
1 6 11 16 21 26 31 36 41
|
||||
486 | X
|
||||
484 | X X
|
||||
482 | X X X
|
||||
481 | X X X
|
||||
479 | X X X X X X X
|
||||
477 | X X X X X X X X
|
||||
475 | X X X X X X X X X
|
||||
C 473 | X X X X X X X X X X
|
||||
o 472 | X X X X X X X X X X X X X
|
||||
u 470 | X X X X X X X X X X X X X X X
|
||||
n 468 | X X X X X X X X X X X X X X X X
|
||||
t 466 | X X X X X X X X X X X X X X X X X X
|
||||
465 | X X X X X X X X X X X X X X X X X X X X
|
||||
463 | X X X X X X X X X X X X X X X X X X X X X X X
|
||||
461 | X X X X X X X X X X X X X X X X X X X X X X X
|
||||
459 | X X X X X X X X X X X X X X X X X X X X X X X X
|
||||
457 | X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
|
||||
456 | X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
|
||||
454 | X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
|
||||
452 | X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
|
||||
+------------------------------------------------------------
|
||||
453 458 463 468 473 478
|
||||
|
||||
Time (seconds)
|
||||
Time (seconds)
|
||||
```
|
||||
|
||||
## Installation
|
||||
@@ -48,7 +48,7 @@ t 16 | X X X X X X X X X X X X X X X X X X X X
|
||||
Simply include the JavaScript file in your HTML:
|
||||
|
||||
```html
|
||||
<script src="ascii-bar-chart.js"></script>
|
||||
<script src="text_graph.js"></script>
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
@@ -70,7 +70,7 @@ Simply include the JavaScript file in your HTML:
|
||||
<body>
|
||||
<div id="chart"></div>
|
||||
|
||||
<script src="ascii-bar-chart.js"></script>
|
||||
<script src="text_graph.js"></script>
|
||||
<script>
|
||||
// Create chart
|
||||
const chart = new ASCIIBarChart('chart', {
|
||||
@@ -280,7 +280,7 @@ MIT License - feel free to use in your projects!
|
||||
|
||||
## Examples
|
||||
|
||||
See [`ascii-bar-chart.html`](ascii-bar-chart.html) for a complete working example with:
|
||||
See [`text_graph.html`](text_graph.html) for a complete working example with:
|
||||
- Interactive controls (Start/Stop/Reset)
|
||||
- Configurable settings (update interval, max columns, chart height)
|
||||
- Test data generator with increasing trend
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<div id="settings" style="margin-bottom: 15px; font-size: 12px;">
|
||||
<label>
|
||||
Update Interval (ms):
|
||||
<input type="number" id="update-interval" value="1000" min="100" max="10000" step="100" style="width: 80px;">
|
||||
<input type="number" id="update-interval" value="100" min="100" max="10000" step="100" style="width: 80px;">
|
||||
</label>
|
||||
<label style="margin-left: 15px;">
|
||||
Max Columns:
|
||||
@@ -121,7 +121,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Include the ASCII Bar Chart library -->
|
||||
<script src="ascii-bar-chart.js"></script>
|
||||
<script src="text_graph.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
// Test data generator (separate from chart API)
|
||||
class DataGenerator {
|
||||
constructor(updateInterval = 1000) {
|
||||
constructor(updateInterval = 100) {
|
||||
this.baseValue = 10;
|
||||
this.intervalId = null;
|
||||
this.countdownId = null;
|
||||
@@ -139,8 +139,11 @@ class ASCIIBarChart {
|
||||
|
||||
// Add vertical Y-axis label character
|
||||
if (this.yAxisLabel) {
|
||||
const labelIndex = Math.floor((scale - row) / scale * this.yAxisLabel.length);
|
||||
if (labelIndex < this.yAxisLabel.length) {
|
||||
const L = this.yAxisLabel.length;
|
||||
const startRow = Math.floor((scale - L) / 2) + 1;
|
||||
const relativeRow = scale - row + 1; // 1 at top, scale at bottom
|
||||
if (relativeRow >= startRow && relativeRow < startRow + L) {
|
||||
const labelIndex = relativeRow - startRow;
|
||||
line += this.yAxisLabel[labelIndex] + ' ';
|
||||
} else {
|
||||
line += ' ';
|
||||
Reference in New Issue
Block a user