laantungir/text_graph
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some improvements

Browse Source
This commit is contained in:
Your Name
2025-10-16 07:38:23 -04:00
parent c64cf49b24
commit 1de3a2c3f3
4 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}

50
README.md
View File

@@ -17,28 +17,28 @@ A dynamic, real-time ASCII-based vertical bar chart library that renders beautif
``` ```
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 486 | X
o 19 | X X X X X X X X X X X X X X X X X X X X 484 | X X
u 18 | X X X X X X X X X X X X X X X X X X X X 482 | 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 481 | 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 479 | 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 477 | 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 475 | 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 C 473 | 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 o 472 | 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 u 470 | 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 n 468 | 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 t 466 | 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 465 | 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 463 | X X X 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 461 | X X X 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 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
4 | 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
3 | 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
2 | 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
1 | 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
+---------------------------------------- +------------------------------------------------------------
1 6 11 16 21 26 31 36 41 453 458 463 468 473 478
Time (seconds) Time (seconds)
``` ```
@@ -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: Simply include the JavaScript file in your HTML:
```html ```html
<script src="ascii-bar-chart.js"></script> <script src="text_graph.js"></script>
``` ```
## Quick Start ## Quick Start
@@ -70,7 +70,7 @@ Simply include the JavaScript file in your HTML:
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="ascii-bar-chart.js"></script> <script src="text_graph.js"></script>
<script> <script>
// Create chart // Create chart
const chart = new ASCIIBarChart('chart', { const chart = new ASCIIBarChart('chart', {
@@ -280,7 +280,7 @@ MIT License - feel free to use in your projects!
## Examples ## 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) - Interactive controls (Start/Stop/Reset)
- Configurable settings (update interval, max columns, chart height) - Configurable settings (update interval, max columns, chart height)
- Test data generator with increasing trend - Test data generator with increasing trend

6
ascii-bar-chart.html → text_graph.html
View File

@@ -93,7 +93,7 @@
<div id="settings" style="margin-bottom: 15px; font-size: 12px;"> <div id="settings" style="margin-bottom: 15px; font-size: 12px;">
<label> <label>
Update Interval (ms): 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>
<label style="margin-left: 15px;"> <label style="margin-left: 15px;">
Max Columns: Max Columns:
@@ -121,7 +121,7 @@
</div> </div>
<!-- Include the ASCII Bar Chart library --> <!-- Include the ASCII Bar Chart library -->
<script src="ascii-bar-chart.js"></script> <script src="text_graph.js"></script>
<script> <script>
@@ -141,7 +141,7 @@
// Test data generator (separate from chart API) // Test data generator (separate from chart API)
class DataGenerator { class DataGenerator {
constructor(updateInterval = 1000) { constructor(updateInterval = 100) {
this.baseValue = 10; this.baseValue = 10;
this.intervalId = null; this.intervalId = null;
this.countdownId = null; this.countdownId = null;

7
ascii-bar-chart.js → text_graph.js
View File

@@ -139,8 +139,11 @@ class ASCIIBarChart {
// Add vertical Y-axis label character // Add vertical Y-axis label character
if (this.yAxisLabel) { if (this.yAxisLabel) {
const labelIndex = Math.floor((scale - row) / scale * this.yAxisLabel.length); const L = this.yAxisLabel.length;
if (labelIndex < 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] + ' '; line += this.yAxisLabel[labelIndex] + ' ';
} else { } else {
line += ' '; line += ' ';