From e44425cf9808e7ee6abb07693193c3b89830c7d4 Mon Sep 17 00:00:00 2001
From: stoffu <stoffu@protonmail.ch>
Date: Wed, 22 Aug 2018 08:19:22 +0900
Subject: [PATCH] add blockchain size charts

---
 README.md            |   3 +
 aeon-bc-size.html    | 129 ++++++++++++++++++++++++++++++++++++++
 monero-bc-size.html  | 143 +++++++++++++++++++++++++++++++++++++++++++
 wownero-bc-size.html | 111 +++++++++++++++++++++++++++++++++
 4 files changed, 386 insertions(+)
 create mode 100644 aeon-bc-size.html
 create mode 100644 monero-bc-size.html
 create mode 100644 wownero-bc-size.html

diff --git a/README.md b/README.md
index 0065aa9..5f275b0 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@
 - [Difficulty](https://stoffu.github.io/diff-chart/aeon.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/aeon-tx-per-day.html)
 - [Block size](https://stoffu.github.io/diff-chart/aeon-block-size.html)
+- [Blockchain size](https://stoffu.github.io/diff-chart/aeon-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/aeon-block-reward.html)
 - [Coin supply](https://stoffu.github.io/diff-chart/aeon-coin-supply.html)
 
@@ -13,6 +14,7 @@
 - [Difficulty](https://stoffu.github.io/diff-chart/monero.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/monero-tx-per-day.html)
 - [Block size](https://stoffu.github.io/diff-chart/monero-block-size.html)
+- [Blockchain size](https://stoffu.github.io/diff-chart/monero-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/monero-block-reward.html)
 - [Coin supply](https://stoffu.github.io/diff-chart/monero-coin-supply.html)
 
@@ -21,5 +23,6 @@
 - [Difficulty](https://stoffu.github.io/diff-chart/wownero.html)
 - [Transactions per day](https://stoffu.github.io/diff-chart/wownero-tx-per-day.html)
 - [Block size](https://stoffu.github.io/diff-chart/wownero-block-size.html)
+- [Blockchain size](https://stoffu.github.io/diff-chart/wownero-bc-size.html)
 - [Block reward](https://stoffu.github.io/diff-chart/wownero-block-reward.html)
 - [Coin supply](https://stoffu.github.io/diff-chart/wownero-coin-supply.html)
diff --git a/aeon-bc-size.html b/aeon-bc-size.html
new file mode 100644
index 0000000..f1e988f
--- /dev/null
+++ b/aeon-bc-size.html
@@ -0,0 +1,129 @@
+<html>
+<header><title>Aeon blockchain size</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="aeon-data-0.js"></script>
+<script src="aeon-data-1.js"></script>
+<script src="aeon-data-2.js"></script>
+<script src="aeon-data-3.js"></script>
+<script src="aeon-data-4.js"></script>
+<script src="aeon-data-5.js"></script>
+<script src="aeon-data-6.js"></script>
+<script src="aeon-data-7.js"></script>
+<script src="aeon-data-8.js"></script>
+<script src="aeon-data-9.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+chartData = chartData.concat(chartData_1);
+chartData = chartData.concat(chartData_2);
+chartData = chartData.concat(chartData_3);
+chartData = chartData.concat(chartData_4);
+chartData = chartData.concat(chartData_5);
+chartData = chartData.concat(chartData_6);
+chartData = chartData.concat(chartData_7);
+chartData = chartData.concat(chartData_8);
+chartData = chartData.concat(chartData_9);
+
+// https://stackoverflow.com/a/18650828
+function formatBytes(bytes, decimal) {
+    if (0 == bytes)
+        return "0 bytes";
+    var c = 1024;
+    var d = decimal || 2;
+    var e = ["bytes", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    var f = Math.floor(Math.log(bytes) / Math.log(c));
+    return "<b>" + parseFloat((bytes / Math.pow(c, f)).toFixed(d)) + "</b> " + e[f]
+}
+
+for (var i = 0; i < chartData.length; ++i) {
+    chartData[i].bc_size = chartData[i].block_size;
+    if (i > 0)
+      chartData[i].bc_size += chartData[i - 1].bc_size;
+    chartData[i].bc_size_str = formatBytes(chartData[i].bc_size, 3);
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData,
+    "valueAxes": [{
+        "axisAlpha": 0,
+    }],
+    "mouseWheelZoomEnabled": true,
+    "graphs": [{
+        "id": "g1",
+        "lineColor": "#07ab82",
+        "balloonText": "Size: [[bc_size_str]]\nHeight: <b>[[height]]</b>",
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "hideBulletsCount": 50,
+        "title": "block size",
+        "valueField": "bc_size",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    }],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g1",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "minPeriod": "ss",
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true,
+        "position": "bottom-right"
+    }
+});
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// 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);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Aeon blockchain size</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>
diff --git a/monero-bc-size.html b/monero-bc-size.html
new file mode 100644
index 0000000..052f0a4
--- /dev/null
+++ b/monero-bc-size.html
@@ -0,0 +1,143 @@
+<html>
+<header><title>Monero blockchain size</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="monero-data-0.js"></script>
+<script src="monero-data-1.js"></script>
+<script src="monero-data-2.js"></script>
+<script src="monero-data-3.js"></script>
+<script src="monero-data-4.js"></script>
+<script src="monero-data-5.js"></script>
+<script src="monero-data-6.js"></script>
+<script src="monero-data-7.js"></script>
+<script src="monero-data-8.js"></script>
+<script src="monero-data-9.js"></script>
+<script src="monero-data-10.js"></script>
+<script src="monero-data-11.js"></script>
+<script src="monero-data-12.js"></script>
+<script src="monero-data-13.js"></script>
+<script src="monero-data-14.js"></script>
+<script src="monero-data-15.js"></script>
+<script src="monero-data-16.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+chartData = chartData.concat(chartData_1);
+chartData = chartData.concat(chartData_2);
+chartData = chartData.concat(chartData_3);
+chartData = chartData.concat(chartData_4);
+chartData = chartData.concat(chartData_5);
+chartData = chartData.concat(chartData_6);
+chartData = chartData.concat(chartData_7);
+chartData = chartData.concat(chartData_8);
+chartData = chartData.concat(chartData_9);
+chartData = chartData.concat(chartData_10);
+chartData = chartData.concat(chartData_11);
+chartData = chartData.concat(chartData_12);
+chartData = chartData.concat(chartData_13);
+chartData = chartData.concat(chartData_14);
+chartData = chartData.concat(chartData_15);
+chartData = chartData.concat(chartData_16);
+
+// https://stackoverflow.com/a/18650828
+function formatBytes(bytes, decimal) {
+    if (0 == bytes)
+        return "0 bytes";
+    var c = 1024;
+    var d = decimal || 2;
+    var e = ["bytes", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    var f = Math.floor(Math.log(bytes) / Math.log(c));
+    return "<b>" + parseFloat((bytes / Math.pow(c, f)).toFixed(d)) + "</b> " + e[f]
+}
+
+for (var i = 0; i < chartData.length; ++i) {
+    chartData[i].bc_size = chartData[i].block_size;
+    if (i > 0)
+      chartData[i].bc_size += chartData[i - 1].bc_size;
+    chartData[i].bc_size_str = formatBytes(chartData[i].bc_size, 3);
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData,
+    "valueAxes": [{
+        "axisAlpha": 0,
+    }],
+    "mouseWheelZoomEnabled": true,
+    "graphs": [{
+        "id": "g1",
+        "lineColor": "#07ab82",
+        "balloonText": "Size: [[bc_size_str]]\nHeight: <b>[[height]]</b>",
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "hideBulletsCount": 50,
+        "title": "block size",
+        "valueField": "bc_size",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    }],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g1",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "minPeriod": "ss",
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true,
+        "position": "bottom-right"
+    }
+});
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// 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);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Monero blockchain size</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>
diff --git a/wownero-bc-size.html b/wownero-bc-size.html
new file mode 100644
index 0000000..2cb7f83
--- /dev/null
+++ b/wownero-bc-size.html
@@ -0,0 +1,111 @@
+<html>
+<header><title>Wownero blockchain size</title>
+<!-- Styles -->
+<style>
+#chartdiv {
+  width : 100%;
+  height  : 500px;
+}                                 
+</style>
+
+<!-- Resources -->
+<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+<script src="https://www.amcharts.com/lib/3/serial.js"></script>
+<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
+<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
+<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
+<script src="wownero-data-0.js"></script>
+
+<!-- Chart code -->
+<script>
+var chartData = chartData_0;
+chartData.shift();
+
+// https://stackoverflow.com/a/18650828
+function formatBytes(bytes, decimal) {
+    if (0 == bytes)
+        return "0 bytes";
+    var c = 1024;
+    var d = decimal || 2;
+    var e = ["bytes", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    var f = Math.floor(Math.log(bytes) / Math.log(c));
+    return "<b>" + parseFloat((bytes / Math.pow(c, f)).toFixed(d)) + "</b> " + e[f]
+}
+
+for (var i = 0; i < chartData.length; ++i) {
+    chartData[i].bc_size = chartData[i].block_size;
+    if (i > 0)
+      chartData[i].bc_size += chartData[i - 1].bc_size;
+    chartData[i].bc_size_str = formatBytes(chartData[i].bc_size, 3);
+}
+
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "light",
+    "marginRight": 80,
+    "autoMarginOffset": 20,
+    "marginTop": 7,
+    "dataProvider": chartData,
+    "valueAxes": [{
+        "axisAlpha": 0,
+    }],
+    "mouseWheelZoomEnabled": true,
+    "graphs": [{
+        "id": "g1",
+        "lineColor": "#07ab82",
+        "balloonText": "Size: [[bc_size_str]]\nHeight: <b>[[height]]</b>",
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "hideBulletsCount": 50,
+        "title": "block size",
+        "valueField": "bc_size",
+        "useLineColorForBulletBorder": true,
+        "balloon":{
+            "cornerRadius": 10,
+        }
+    }],
+    "chartScrollbar": {
+        "autoGridCount": true,
+        "graph": "g1",
+        "scrollbarHeight": 40
+    },
+    "chartCursor": {
+       "pan": false
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "minPeriod": "ss",
+        "axisColor": "#DADADA",
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true,
+        "position": "bottom-right"
+    }
+});
+
+chart.addListener("rendered", zoomChart);
+zoomChart();
+
+// 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);
+}
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Wownero blockchain size</h1>
+<div id="chartdiv"></div>
+<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
+<p><a href="./">Back to top</a></p>
+</body>
+</html>