From da6290dc9468027e3c6aeca2dcb9ac0f1d48926e Mon Sep 17 00:00:00 2001
From: stoffu <stoffu@protonmail.ch>
Date: Wed, 9 Jan 2019 22:27:56 +0900
Subject: [PATCH] limit number of dots being drawn to 200k

---
 aeon-nonce.html    |  1 +
 js/nonce.js        | 10 +++++++++-
 monero-nonce.html  |  1 +
 wownero-nonce.html |  1 +
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/aeon-nonce.html b/aeon-nonce.html
index 6e46056..1f8567f 100644
--- a/aeon-nonce.html
+++ b/aeon-nonce.html
@@ -52,6 +52,7 @@ function togglePan() {
 </header>
 <body>
 <h1>Aeon nonce</h1>
+<p>Since drawing many points in amCharts is somehow very slow and can make your browser unresponsive, the maximum number of points being drawn is limited to 200000 which is what the initial zoom level shows. For easily viewing the past data, use the "Show all" button to maximally zoom out and then use mouse dragging to select the time period as you wish.</p>
 <div id="chartdiv"></div>
 <p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
 <p><a href="./">Back to top</a></p>
diff --git a/js/nonce.js b/js/nonce.js
index 666d8b8..e54a029 100644
--- a/js/nonce.js
+++ b/js/nonce.js
@@ -1,3 +1,5 @@
+var max_num_bullets = 200000;
+
 function get_chart(chartData) {
     chartData.shift();
 
@@ -26,6 +28,7 @@ function get_chart(chartData) {
             "bullet": "square",
             "bulletSize": 1,
             "minBulletSize": 1,
+            "hideBulletsCount": max_num_bullets,
             "balloonText": "Height: <b>[[height]]</b>\nNonce: <b>[[value]]</b>\n",
             "showBalloonAt": "close",
             "title": "nonce",
@@ -35,6 +38,11 @@ function get_chart(chartData) {
                 "animationDuration": 0,
             }
         }],
+        "chartScrollbar": {
+            "autoGridCount": true,
+            "graph": "g1",
+            "scrollbarHeight": 40
+        },
         "chartCursor": {
            "pan": false,
            "categoryBalloonEnabled": false,
@@ -58,7 +66,7 @@ function get_chart(chartData) {
     // this method is called when chart is first inited as we listen for "rendered" event
     function zoomChart() {
         // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
-        chart.zoomToIndexes(0, chartData.length - 1);
+        chart.zoomToIndexes(Math.max(0, chartData.length - max_num_bullets), chartData.length - 1);
     }
     chart.addListener("rendered", zoomChart);
     zoomChart();
diff --git a/monero-nonce.html b/monero-nonce.html
index f47bcbb..ad6e2d7 100644
--- a/monero-nonce.html
+++ b/monero-nonce.html
@@ -66,6 +66,7 @@ function togglePan() {
 </header>
 <body>
 <h1>Monero nonce</h1>
+<p>Since drawing many points in amCharts is somehow very slow and can make your browser unresponsive, the maximum number of points being drawn is limited to 200000 which is what the initial zoom level shows. For easily viewing the past data, use the "Show all" button to maximally zoom out and then use mouse dragging to select the time period as you wish.</p>
 <div id="chartdiv"></div>
 <p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
 <p><a href="./">Back to top</a></p>
diff --git a/wownero-nonce.html b/wownero-nonce.html
index 4c9a781..390431e 100644
--- a/wownero-nonce.html
+++ b/wownero-nonce.html
@@ -30,6 +30,7 @@ function togglePan() {
 </header>
 <body>
 <h1>Wownero nonce</h1>
+<p>Since drawing many points in amCharts is somehow very slow and can make your browser unresponsive, the maximum number of points being drawn is limited to 200000 which is what the initial zoom level shows. For easily viewing the past data, use the "Show all" button to maximally zoom out and then use mouse dragging to select the time period as you wish.</p>
 <div id="chartdiv"></div>
 <p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
 <p><a href="./">Back to top</a></p>