change example code

Mr. X · Mr. X · commit 2a6196eb7819 · 2020-04-08T21:22:29.000+05:30
diff --git a/example/example.js b/example/example.js
@@ -1,4 +1,4 @@
-const LineGraph = new GPUjsRealRenderer.RealLineGraph({
+const options = {
   canvasTag: 'line-canvas',
   dimensions: [420, 360],
 
@@ -23,19 +23,32 @@ const LineGraph = new GPUjsRealRenderer.RealLineGraph({
 
   lineThickness: 0.03, // Thickness of the line joining points
   lineColor: [0.1, 0.2, 0.8]
-})
+}
+
+const LineGraph = new GPUjsRealRenderer.RealLineGraph(options)
 
 LineGraph.draw();
 
-document.getElementById('line-btn').onclick = e => {
+// if (LineGraph.progressionMode == 'continous') {
+  // document.getElementById('line-btn').onclick = e => {
+  //   e.preventDefault();
+
+  //   if (LineGraph.doRender) {
+  //     LineGraph.stopRender();
+  //     document.getElementById('line-btn').innerText = 'Start Rendering';
+  //   }
+  //   else {
+  //     LineGraph.startRender();
+  //     document.getElementById('line-btn').innerText = 'Stop Rendering';
+  //   }
+  // }
+// }
+// else document.getElementById('line-btn').disabled = true;
+
+document.getElementById('add').onclick = e => {
   e.preventDefault();
 
-  if (LineGraph.doRender) {
-    LineGraph.stopRender();
-    document.getElementById('line-btn').innerText = 'Start Rendering';
-  }
-  else {
-    LineGraph.startRender();
-    document.getElementById('line-btn').innerText = 'Stop Rendering';
+  if (typeof document.getElementById('value').value != 'undefined') {
+    LineGraph.addData(document.getElementById('value').value);
   }
 }
diff --git a/example/index.html b/example/index.html
@@ -7,10 +7,15 @@
 </head>
 <body>
   
-  <h3>Progressive Line Graph(RealLineGraph class)</h3>
-  <button id="line-btn">Start Rendering</button><br /><br />
+  <h3>Progressive Line Graph (ProgressMode: 'overflow')</h3>
+  <!-- <button id="line-btn">Start Rendering</button><br /><br /> -->
   <canvas id="line-canvas"></canvas>
 
+  <form id="input-form">
+    <input type="text" placeholder="Value" id="value" />
+    <button id="add">Add Data</button>
+  </form>
+
   <script src="./gpu-browser.min.js"></script>
   <script src="../dist/gpujs-real-renderer-browser.js"></script>
 
