Optional debug print

text_graph.html

@@ -120,6 +120,10 @@
                 <option value="ranges">Time Ranges</option>
             </select>
         </label>
+        <label style="margin-left: 15px;">
+            <input type="checkbox" id="debug-mode" onchange="toggleDebugMode()">
+            Debug Mode
+        </label>
         <button onclick="applySettings()" style="margin-left: 15px; padding: 5px 15px;">Apply Settings</button>
         <button onclick="rotateBin()" id="rotate-bin-btn" style="margin-left: 10px; padding: 5px 15px; display: none;">Rotate Bin</button>
     </div>
@@ -139,6 +143,12 @@
         <div id="bin-info" style="display: none;"><strong>Current Bin:</strong> <span id="current-bin">--</span>, <strong>Time Remaining:</strong> <span id="time-remaining">--</span>s</div>
     </div>
 
+    <div id="code-example" style="margin-top: 20px; background-color: #2a2a2a; padding: 15px; border-radius: 5px; border: 1px solid #00ff00;">
+        <h3 style="margin-top: 0; color: #00ff00;">Implementation Code Example</h3>
+        <p style="margin-bottom: 10px; font-size: 12px;">Copy this code to implement the chart in your project:</p>
+        <div id="code-display" style="background-color: #1e1e1e; padding: 10px; border-radius: 3px; font-size: 11px; line-height: 1.4; overflow-x: auto; color: #00ff00; border: 1px solid #444; font-family: 'Courier New', Courier, monospace;"></div>
+    </div>
+
     <!-- Include the ASCII Bar Chart library -->
     <script src="text_graph.js"></script>
     
@@ -154,12 +164,16 @@
             autoFitWidth: true,  // Automatically adjust font size to fit container width
             useBinMode: true,    // Start in time bin mode
             binDuration: 4000,  // 4 seconds
-            xAxisLabelFormat: 'elapsed'
+            xAxisLabelFormat: 'elapsed',
+            debug: false         // Debug mode disabled by default
         });
         
         // Initial render
         chart.render();
         chart.updateInfo();
+
+        // Generate initial code example
+        generateCodeExample();
         
         // Test data generator (separate from chart API)
         class DataGenerator {
@@ -300,6 +314,13 @@
             }
         }
 
+        // Function to toggle debug mode
+        function toggleDebugMode() {
+            const debugMode = document.getElementById('debug-mode').checked;
+            // Note: Debug mode requires recreating the chart to take effect
+            // This is a limitation since debug mode is set at construction time
+        }
+
         // Function to manually rotate bin
         function rotateBin() {
             if (chart && chart.useBinMode) {
@@ -307,6 +328,48 @@
             }
         }
 
+        // Function to generate code example
+        function generateCodeExample() {
+            const maxColumns = parseInt(document.getElementById('max-columns').value);
+            const chartHeight = parseInt(document.getElementById('chart-height').value);
+            const useBinMode = document.getElementById('use-bin-mode').checked;
+            const binDuration = parseFloat(document.getElementById('bin-duration').value);
+            const xAxisLabelFormat = document.getElementById('x-axis-format').value;
+            const debugMode = document.getElementById('debug-mode').checked;
+
+            let code = '// Include the ASCII Bar Chart library\n';
+            code += '<script src="text_graph.js"><' + '/script>\n\n';
+            code += '// Create the chart\n';
+            code += 'const chart = new ASCIIBarChart(\'chart-container\', {\n';
+            code += '    maxHeight: ' + chartHeight + ',\n';
+            code += '    maxDataPoints: ' + maxColumns + ',\n';
+            code += '    title: \'Real-Time Data Visualization\',\n';
+            code += '    xAxisLabel: \'Time (seconds)\',\n';
+            code += '    yAxisLabel: \'Count\',\n';
+            code += '    autoFitWidth: true,\n';
+            if (useBinMode) {
+                code += '    useBinMode: true,\n';
+                code += '    binDuration: ' + (binDuration * 1000) + ', // ' + binDuration + ' seconds in milliseconds\n';
+                code += '    xAxisLabelFormat: \'' + xAxisLabelFormat + '\',\n';
+            } else {
+                code += '    useBinMode: false,\n';
+            }
+            code += '    debug: ' + debugMode + '\n';
+            code += '});\n\n';
+            code += '// Add data points\n';
+            code += 'chart.addValue(5);\n';
+            code += 'chart.addValue(12);\n';
+            code += 'chart.addValue(8);\n\n';
+            code += '// Clear the chart\n';
+            code += 'chart.clear();';
+
+            // Format the code for better display
+            code = code.replace(/\n/g, '<br>')
+                      .replace(/ /g, '&nbsp;')
+                      .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+            document.getElementById('code-display').innerHTML = code;
+        }
+
         // Function to apply settings
         function applySettings() {
             const wasRunning = dataGenerator.isRunning;
@@ -328,6 +391,9 @@
                 chart.binCheckInterval = null;
             }
 
+            // Get debug mode setting
+            const debugMode = document.getElementById('debug-mode').checked;
+
             // Recreate chart with new settings
             chart = new ASCIIBarChart('chart-container', {
                 maxHeight: chartHeight,
@@ -338,7 +404,8 @@
                 autoFitWidth: true,
                 useBinMode: useBinMode,
                 binDuration: binDuration,
-                xAxisLabelFormat: xAxisLabelFormat
+                xAxisLabelFormat: xAxisLabelFormat,
+                debug: debugMode
             });
 
             // Force font size adjustment for new settings
@@ -346,6 +413,9 @@
             chart.render();
             chart.updateInfo();
 
+            // Update code example
+            generateCodeExample();
+
             // Recreate data generator with new interval
             dataGenerator = new DataGenerator(updateInterval);