forked from wownero/diff-chart
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
7.4 KiB
230 lines
7.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>CryptoNote difficulty variant tests</title>
|
|
|
|
<style>
|
|
#chartdiv {
|
|
width : 100%;
|
|
height : 500px;
|
|
}
|
|
</style>
|
|
|
|
<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>
|
|
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
|
|
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
|
|
|
|
<script src="data-v1.js"></script>
|
|
<script src="data-v9.js"></script>
|
|
<script>
|
|
function getMean(values) {
|
|
var total = 0;
|
|
for (var i = 0; i < values.length; ++i)
|
|
total += values[i];
|
|
return (total / values.length).toFixed(2);
|
|
}
|
|
const N = chartData_v1.length;
|
|
var chartData = [];
|
|
var avg_window_v1 = [];
|
|
var avg_window_v9 = [];
|
|
const WINDOW_SIZE = 90;
|
|
for (var i = 0; i < N; ++i) {
|
|
var entry = {};
|
|
entry.height = i;
|
|
entry.block_time_v1 = chartData_v1[i][0];
|
|
entry.difficulty_v1 = chartData_v1[i][1];
|
|
entry.block_time_v9 = chartData_v9[i][0];
|
|
entry.difficulty_v9 = chartData_v9[i][1];
|
|
if (avg_window_v1.length == WINDOW_SIZE) {
|
|
avg_window_v1.shift();
|
|
avg_window_v9.shift();
|
|
}
|
|
avg_window_v1.push(entry.block_time_v1);
|
|
avg_window_v9.push(entry.block_time_v9);
|
|
entry.block_time_avg_v1 = getMean(avg_window_v1);
|
|
entry.block_time_avg_v9 = getMean(avg_window_v9);
|
|
chartData.push(entry);
|
|
}
|
|
var chart = AmCharts.makeChart("chartdiv", {
|
|
"type": "serial",
|
|
"theme": "light",
|
|
"marginRight": 80,
|
|
"autoMarginOffset": 20,
|
|
"marginTop": 7,
|
|
"dataProvider": chartData,
|
|
"valueAxes": [{
|
|
"id":"va_time",
|
|
"color": "#999",
|
|
"axisColor": "#999",
|
|
"axisThickness": 2,
|
|
"axisAlpha": 0.2,
|
|
"dashLength": 1,
|
|
"position": "left",
|
|
}, {
|
|
"id":"va_diff",
|
|
"color": "#333",
|
|
"axisColor": "#333",
|
|
"axisThickness": 2,
|
|
"axisAlpha": 0.2,
|
|
"dashLength": 1,
|
|
"position": "left",
|
|
"gridAlpha": 0,
|
|
"position": "right"
|
|
}],
|
|
"mouseWheelZoomEnabled": true,
|
|
"graphs": [{
|
|
"id": "g_block_time_v1",
|
|
"valueAxis": "va_time",
|
|
"lineColor": "#fcc",
|
|
"lineAlpha": 0.5,
|
|
"lineThickness": 2,
|
|
"balloonText": "blktime (v1): <b>[[value]]</b>s",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Block time (v1)",
|
|
"valueField": "block_time_v1",
|
|
"useLineColorForBulletBorder": true,
|
|
// "balloonColor": "white",
|
|
"balloon":{
|
|
// "adjustBorderColor": false,
|
|
// "borderColor": "gray",
|
|
"cornerRadius": 10,
|
|
}
|
|
},{
|
|
"id": "g_block_time_avg_v1",
|
|
"type": "smoothedLine",
|
|
"valueAxis": "va_time",
|
|
"lineColor": "#faa",
|
|
"lineThickness": 5,
|
|
"balloonText": "blktime 6h avg (v1): <b>[[value]]</b>s",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Block time 6h average (v1)",
|
|
"valueField": "block_time_avg_v1",
|
|
"useLineColorForBulletBorder": true,
|
|
// "balloonColor": "white",
|
|
"balloon":{
|
|
// "adjustBorderColor": false,
|
|
// "borderColor": "gray",
|
|
"cornerRadius": 10,
|
|
}
|
|
},{
|
|
"id": "g_difficulty_v1",
|
|
"valueAxis": "va_diff",
|
|
"lineColor": "#922",
|
|
"lineThickness": 1,
|
|
"showBalloon" : true,
|
|
"balloonText": "diff (v1): <b>[[value]]</b>",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Difficulty (v1)",
|
|
"valueField": "difficulty_v1",
|
|
"useLineColorForBulletBorder": true,
|
|
"balloon":{
|
|
"cornerRadius": 10,
|
|
}
|
|
},{
|
|
"id": "g_block_time_v9",
|
|
"valueAxis": "va_time",
|
|
"lineColor": "#ccf",
|
|
"lineAlpha": 0.5,
|
|
"lineThickness": 2,
|
|
"balloonText": "blktime (v9): <b>[[value]]</b>s",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Block time (v9)",
|
|
"valueField": "block_time_v9",
|
|
"useLineColorForBulletBorder": true,
|
|
// "balloonColor": "white",
|
|
"balloon":{
|
|
// "adjustBorderColor": false,
|
|
// "borderColor": "gray",
|
|
"cornerRadius": 10,
|
|
}
|
|
},{
|
|
"id": "g_block_time_avg_v9",
|
|
"type": "smoothedLine",
|
|
"valueAxis": "va_time",
|
|
"lineColor": "#aaf",
|
|
"lineThickness": 5,
|
|
"balloonText": "blktime 6h avg (v9): <b>[[value]]</b>s",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Block time 6h average (v9)",
|
|
"valueField": "block_time_avg_v9",
|
|
"useLineColorForBulletBorder": true,
|
|
// "balloonColor": "white",
|
|
"balloon":{
|
|
// "adjustBorderColor": false,
|
|
// "borderColor": "gray",
|
|
"cornerRadius": 10,
|
|
}
|
|
},{
|
|
"id": "g_difficulty_v9",
|
|
"valueAxis": "va_diff",
|
|
"lineColor": "#229",
|
|
"lineThickness": 1,
|
|
"showBalloon" : true,
|
|
"balloonText": "diff (v9): <b>[[value]]</b>",
|
|
"bullet": "round",
|
|
"bulletBorderAlpha": 1,
|
|
"bulletColor": "#FFFFFF",
|
|
"hideBulletsCount": 50,
|
|
"title": "Difficulty (v9)",
|
|
"valueField": "difficulty_v9",
|
|
"useLineColorForBulletBorder": true,
|
|
"balloon":{
|
|
"cornerRadius": 10,
|
|
}
|
|
}],
|
|
"chartCursor": {
|
|
"cursorAlpha": 0.25,
|
|
},
|
|
"categoryField": "height",
|
|
"categoryAxis": {
|
|
"parseDates": false,
|
|
"axisColor": "#DADADA",
|
|
"dashLength": 1,
|
|
"minorGridEnabled": true
|
|
},
|
|
"export": {
|
|
"enabled": true
|
|
}
|
|
});
|
|
console.log(chart);
|
|
|
|
// 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();
|
|
|
|
function togglePan() {
|
|
chart.chartCursor.pan = document.getElementById("pan").checked;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>CryptoNote difficulty variant tests</h1>
|
|
<div id="chartdiv"></div>
|
|
<p><input type="checkbox" id="pan" onclick="togglePan()">Enable panning</p>
|
|
</body>
|
|
</html>
|