j"19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAutM(#<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bitcoin Status</title>
</head>
<body>
<div id="loading" style="text-align: center"></div>
<div>
Data Period:
<select id="data-period">
<option value="1">1 month</option>
<option value="3">3 months</option>
<option value="6">6 months</option>
<option value="12">12 months</option>
</select>
</div>
<hr>
<div>
<canvas id="tx-chart" width="400" height="90"></canvas>
<canvas id="block-size-chart" width="400" height="90"></canvas>
<canvas id="price-chart" width="400" height="90"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>
var Loading = function(){
var dom = $('#loading');
return {
show:function(){
dom.html('loading...');
},
hide:function(){
dom.html('');
}
}
}();
var MyChart = function(options, dom){
var chart = null;
return {
draw:function(data){
if(chart !== null){chart.destroy();}
var chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'line',
data: {
labels: [],
datasets: [{
label: '',
backgroundColor: chartColors.yellow,
borderColor: chartColors.yellow,
data: [],
fill: false,
}, {
label: '',
fill: false,
backgroundColor: chartColors.blue,
borderColor: chartColors.blue,
data: [],
}, {
label: '',
fill: false,
backgroundColor: chartColors.red,
borderColor: chartColors.red,
data: [],
}]
},
options: {
responsive: true,
title: {display: true, text: 'Price'},
tooltips: {mode: 'index', intersect: false,},
hover: {mode: 'nearest', intersect: true},
elements:{point:{radius:0}},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Date'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Price in USD'
}
}]
}
}
};
var theConfig = JSON.parse(JSON.stringify(config));
theConfig.options.scales.yAxes[0].scaleLabel.labelString = options.yAexesLabel;
theConfig.options.title.text = options.title;
var date = [];
var dataset = {bsv:[], bch:[], btc:[]};
for(var i in data.c){
var isDataValid = false;
var json = null;
if(data.c[i].out[0].s3 !== undefined){
json = JSON.parse(data.c[i].out[0].s3);
}
else {
json = JSON.parse(data.c[i].out[0].s2);
}
for(var coin in json.data){
if(options.data.property in json.data[coin]){
dataset[coin].push(options.data.formatter? options.data.formatter(json.data[coin][options.data.property]):json.data[coin][options.data.property]);
isDataValid = true;
}
else{
break;
}
}
if(isDataValid){
var the_date = new Date(json.timestamp*1000);
date.push(the_date.toLocaleDateString());
}
}
theConfig.data.labels = date;
i = 0;
for(var key in dataset){
theConfig.data.datasets[i].label = key.toUpperCase();
theConfig.data.datasets[i].data = dataset[key];
i++;
}
chart = new Chart(dom, theConfig);
}
}
};
$(function(){
$('#data-period').on('change', function(){
period = parseInt(this.value);
update();
});
function showDataSources(data){
var html = '<div style="font-size: small">Data source:';
var item = data.c[0];
var json = JSON.parse(item.out[0].s3);
for(var key in json.source){
html += '<span style="margin-left: 1em"><a href="'+json.source[key]+'" target="_blank">'+json.source[key]+'</a></span>';
}
html += '</div>';
$('#data-source').html(html);
}
var period = 1;
function createQueryString(period){
var queryTemplateOld = `
{
"v": 3,
"q": {
"find": {
"in.e.a":"1LFfrDM27KXeUn1xH9NTknWHexTxqiEcnF",
"$or":[{"out.b0.op":0, "out.b1.op":106, "out.s2":"status"}, {"out.b0.op":106, "out.s1":"status"}],
"blk.i":{"$mod":[${period},0]}
},
"limit": 720,
"sort": { "blk.i": -1 },
"project":{"out.s2":1,"blk.i":1,"out.s3":1}
}
}`;
return window.btoa(queryTemplateOld);
}
function queryTxs(cb){
Loading.show();
$.getJSON({
url: 'https://genesis.bitdb.network/q/1FnauZ9aUH2Bex6JzdcV4eNX7oLSSEbxtN/'+createQueryString(period),
beforeSend: function(xhr){xhr.setRequestHeader('key', 'qpne29ue8chsv9pxv653zxdhjn45umm4esyds75nx6');},
}).done(function(data){
Loading.hide();
cb(data);
});
}
var chartPrice = MyChart({yAexesLabel:'Price', data:{property:'price'}, title:'Price'}, $('#price-chart'));
var chartTx = MyChart({yAexesLabel:'Tx number in latest 24 hours', data:{property:'tx_num_24h'}, title:'Tx number'}, $('#tx-chart'));
var chartBlock = MyChart({
yAexesLabel:'average block size(K)',
data:{
property:'avg_size_per_blk_24h',
formatter:function(item){
return item/1024;
}
},
title:'Average block size(K)'}, $('#block-size-chart'));
function refreshView(data){
$('#loading').html('');
data.c.reverse();
chartBlock.draw(data);
chartTx.draw(data);
chartPrice.draw(data);
showDataSources(data);
$('#tip').html('Give <a href="https://blockchair.com/bitcoin-sv/address/1LFfrDM27KXeUn1xH9NTknWHexTxqiEcnF" target="_blank">1LFfrDM27KXeUn1xH9NTknWHexTxqiEcnF</a> a tip to keep service alive.');
}
function update(){
queryTxs(refreshView);
}
update();
});
</script>
<div style="text-align: center">
<div class="money-button"
data-to="1LFfrDM27KXeUn1xH9NTknWHexTxqiEcnF"
data-amount="0.2"
data-currency="USD"
data-label=""
data-client-identifier="c4659d15e7b15b264afba79e80f0cc41"
data-button-id="1550150334892"
data-button-data="{}"
data-type="tip"
></div>
<div id="tip"></div>
<div id="data-source"></div>
</div>
<script src="https://www.moneybutton.com/moneybutton.js"></script>
</body>
</html>
text/htmlUTF-8index
https://whatsonchain.com/tx/c638343151e37d56ee81c06cf9253578e78d8d55bdd0be160443e93105a91eb8