add block time chart

6 years ago · cb37254808
parent 0853b20dda
commit cb37254808
6 changed files with 352 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -11,6 +11,7 @@ _These JavaScript-based interactive charts are highly memory intensive. You will
 - [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)
+- [Block time](https://stoffu.github.io/diff-chart/aeon-block-time.html)

 ## Monero

@ -21,6 +22,7 @@ _These JavaScript-based interactive charts are highly memory intensive. You will
 - [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)
+- [Block time](https://stoffu.github.io/diff-chart/monero-block-time.html)

 ## Wownero

@ -31,3 +33,4 @@ _These JavaScript-based interactive charts are highly memory intensive. You will
 - [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)
+- [Block time](https://stoffu.github.io/diff-chart/wownero-block-time.html)
--- a/aeon-block-time.html
+++ b/aeon-block-time.html
@ -0,0 +1,57 @@
+<html>
+<header><title>Aeon block time</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="js/util.js"></script>
+<script src="data/aeon-data-0.js"></script>
+<script src="data/aeon-data-1.js"></script>
+<script src="data/aeon-data-2.js"></script>
+<script src="data/aeon-data-3.js"></script>
+<script src="data/aeon-data-4.js"></script>
+<script src="data/aeon-data-5.js"></script>
+<script src="data/aeon-data-6.js"></script>
+<script src="data/aeon-data-7.js"></script>
+<script src="data/aeon-data-8.js"></script>
+<script src="data/aeon-data-9.js"></script>
+<script src="js/block-time.js"></script>
+
+<!-- Chart code -->
+<script>
+var chart = get_chart([].concat(
+    chartData_0,
+    chartData_1,
+    chartData_2,
+    chartData_3,
+    chartData_4,
+    chartData_5,
+    chartData_6,
+    chartData_7,
+    chartData_8,
+    chartData_9,
+));
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Aeon block time</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>
--- a/js/block-time.js
+++ b/js/block-time.js
@ -0,0 +1,165 @@
+function get_chart(chartData) {
+    chartData.shift();
+    var chartData_bt = [];
+    var block_date = null;
+
+    for (var i = 0; i < chartData.length; ++i) {
+        var block_date_new = new Date(1000 * chartData[i][0]);
+        block_date_new.setHours(0);
+        block_date_new.setMinutes(0);
+        block_date_new.setSeconds(0);
+        if (block_date === null || block_date < block_date_new) {
+            block_date = block_date_new;
+            chartData_bt.push({
+                "date": block_date,
+                "block_times": [],
+            });
+        }
+        chartData_bt[chartData_bt.length - 1].block_times.push(i==0? 1 : (chartData[i][0] - chartData[i-1][0]));
+    }
+
+    for (var i = 0; i < chartData_bt.length; ++i) {
+        var stats = getStats(chartData_bt[i].block_times);
+        chartData_bt[i].max = stats.max;
+        chartData_bt[i].min = stats.min;
+        chartData_bt[i].mean = stats.mean.toFixed(2);
+        chartData_bt[i].stddev = stats.stddev.toFixed(2);
+        chartData_bt[i].median = stats.median;
+    }
+
+    var chart = AmCharts.makeChart("chartdiv", {
+        "type": "serial",
+        "theme": "light",
+        "marginRight": 80,
+        "autoMarginOffset": 20,
+        "marginTop": 7,
+        "dataProvider": chartData_bt,
+        "valueAxes": [{
+            "id":"va_normal",
+            "color": "#3359cc",
+            "axisColor": "#3359cc",
+            "axisThickness": 2,
+            "axisAlpha": 1,
+            "position": "left"
+        }, {
+            "id":"va_extreme",
+            "color": "#666600",
+            "axisColor": "#666600",
+            "axisThickness": 2,
+            "axisAlpha": 0.5,
+            "gridAlpha": 0,
+            "position": "right"
+        }],
+        "legend": {
+            "align": "center",
+            "equalWidths": false,
+            "valueAlign": "left",
+            "valueText": "[[value]] s",
+            "labelText": "[[title]]: ",
+            "equalWidths": true,
+            "fontSize": 14,
+            "valueWidth": 100
+        },
+        "mouseWheelZoomEnabled": true,
+        "graphs": [{
+            "id": "g_mean",
+            "valueAxis": "va_normal",
+            "type": "smoothedLine",
+            "lineColor": "#3359cc",
+            "lineThickness": 5,
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "hideBulletsCount": 50,
+            "title": "Mean",
+            "valueField": "mean",
+            "useLineColorForBulletBorder": true,
+        },{
+            "id": "g_stddev",
+            "valueAxis": "va_normal",
+            "lineColor": "#33a6cc",
+            "lineThickness": 2,
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "hideBulletsCount": 50,
+            "title": "StdDev",
+            "valueField": "stddev",
+            "useLineColorForBulletBorder": true,
+        },{
+            "id": "g_median",
+            "valueAxis": "va_normal",
+            "type": "smoothedLine",
+            "lineColor": "#8033cc",
+            "lineThickness": 2,
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "hideBulletsCount": 50,
+            "title": "Median",
+            "valueField": "median",
+            "useLineColorForBulletBorder": true,
+        },{
+            "id": "g_max",
+            "valueAxis": "va_extreme",
+            "type": "step",
+            "lineColor": "#b3b300",
+            "lineAlpha": 0.5,
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "hideBulletsCount": 50,
+            "title": "Max",
+            "valueField": "max",
+            "useLineColorForBulletBorder": true,
+        },{
+            "id": "g_min",
+            "valueAxis": "va_extreme",
+            "type": "step",
+            "lineColor": "#666600",
+            "lineAlpha": 0.5,
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "hideBulletsCount": 50,
+            "title": "Min",
+            "valueField": "min",
+            "useLineColorForBulletBorder": true,
+        }],
+        "chartScrollbar": {
+            "autoGridCount": true,
+            "graph": "g_mean",
+            "scrollbarHeight": 40
+        },
+        "chartCursor": {
+           "pan": false
+        },
+        "categoryField": "date",
+        "categoryAxis": {
+            "parseDates": true,
+            "minPeriod": "ss",
+            "axisColor": "#DADADA",
+            "dashLength": 1,
+            "minorGridEnabled": true
+        },
+        "export": {
+            "enabled": true,
+            "position": "bottom-right"
+        }
+    });
+
+    // 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.addListener("rendered", zoomChart);
+    zoomChart();
+
+    return chart;
+}
--- a/js/util.js
+++ b/js/util.js
@ -24,3 +24,22 @@ function print_money(amount, decimal_point) {
    }
    return s2;
 }
+
+function getStats(values) {
+    values.sort(function(a,b){return a-b;});
+    var max = values[values.length - 1];
+    var min = values[0];
+    var mean = 0;
+    for (var i = 0; i < values.length; ++i)
+        mean += values[i];
+    mean /= values.length;
+    var stddev = 0;
+    for (var i = 0; i < values.length; ++i)
+        stddev += (values[i]-mean) * (values[i]-mean);
+    stddev = Math.sqrt(stddev / values.length);
+    var median_idx = Math.floor(values.length/2);
+    var median = values[median_idx];
+    if (values.length%2 == 0)
+        median = (median + values[median_idx + 1]) / 2;
+    return {"max":max, "min":min, "mean":mean, "stddev":stddev, "median":median};
+}
--- a/monero-block-time.html
+++ b/monero-block-time.html
@ -0,0 +1,71 @@
+<html>
+<header><title>Monero block time</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="js/util.js"></script>
+<script src="data/monero-data-0.js"></script>
+<script src="data/monero-data-1.js"></script>
+<script src="data/monero-data-2.js"></script>
+<script src="data/monero-data-3.js"></script>
+<script src="data/monero-data-4.js"></script>
+<script src="data/monero-data-5.js"></script>
+<script src="data/monero-data-6.js"></script>
+<script src="data/monero-data-7.js"></script>
+<script src="data/monero-data-8.js"></script>
+<script src="data/monero-data-9.js"></script>
+<script src="data/monero-data-10.js"></script>
+<script src="data/monero-data-11.js"></script>
+<script src="data/monero-data-12.js"></script>
+<script src="data/monero-data-13.js"></script>
+<script src="data/monero-data-14.js"></script>
+<script src="data/monero-data-15.js"></script>
+<script src="data/monero-data-16.js"></script>
+<script src="js/block-time.js"></script>
+
+<!-- Chart code -->
+<script>
+var chart = get_chart([].concat(
+    chartData_0,
+    chartData_1,
+    chartData_2,
+    chartData_3,
+    chartData_4,
+    chartData_5,
+    chartData_6,
+    chartData_7,
+    chartData_8,
+    chartData_9,
+    chartData_10,
+    chartData_11,
+    chartData_12,
+    chartData_13,
+    chartData_14,
+    chartData_15,
+    chartData_16,
+));
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Monero block time</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>
--- a/wownero-block-time.html
+++ b/wownero-block-time.html
@ -0,0 +1,37 @@
+<html>
+<header><title>Wownero block time</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="js/util.js"></script>
+<script src="data/wownero-data-0.js"></script>
+<script src="js/block-time.js"></script>
+
+<!-- Chart code -->
+<script>
+var chart = get_chart(chartData_0);
+
+function togglePan() {
+  chart.chartCursor.pan = document.getElementById("pan").checked;
+}
+
+</script>
+</header>
+<body>
+<h1>Wownero block time</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>