mantao/ovpn-lb-socks5
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change to chartjs

Browse Source
This commit is contained in:
mantaohuang 2020-07-28 11:53:40 -04:00
parent 78b916c3a7
commit 951a09e7f5
2 changed files with 117 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plot_gen.py
View File

@ -35,7 +35,7 @@ class TimeSeriesAccumulator:
return result
def get_ts(self):
return [datetime.utcfromtimestamp(self.start_timestamp+(i+1)*self.bin_time) for i in range(self.n_bins)]
return [datetime.utcfromtimestamp(int(self.start_timestamp+(i+1)*self.bin_time)) for i in range(self.n_bins)]
if __name__ == "__main__":

204
tabler/index.html
View File

@ -299,7 +299,7 @@
</div>
</div>
</div>
<div id="chart-mentions" class="chart-lg"></div>
<canvas id="chart-traffic" class="chart-lg"></canvas>
</div>
</div>
</div>
@ -426,100 +426,126 @@
<script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="./dist/libs/peity/jquery.peity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"
integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
var load_stat = function(){
$.getJSON("/stat", function (data) {
// @formatter:off
window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
chart: {
type: "line",
fontFamily: 'inherit',
height: 240,
parentHeightOffset: 0,
toolbar: {
show: false,
var ctx = document.getElementById('chart-traffic').getContext('2d');
var config = {
type: 'line',
data: {
datasets: []
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Time Point Data'
},
scales: {
xAxes: [{
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
animations: {
enabled: false
},
stacked: true,
},
plotOptions: {
bar: {
columnWidth: '50%',
}
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 0.6,
},
series: [{
name: "Down rate",
data: data.stat[0].io_mean
}, {
name: "Up rate",
data: data.stat[0].io_mean
}, {
name: "d rate",
data: data.stat[0].io_mean
}],
grid: {
padding: {
top: -20,
right: 0,
left: -4,
bottom: -4
},
strokeDashArray: 4,
xaxis: {
lines: {
show: true
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
},
},
xaxis: {
labels: {
padding: 0
},
tooltip: {
enabled: false
},
axisBorder: {
show: false,
},
type: 'datetime',
},
yaxis: {
labels: {
padding: 4
},
},
labels: data.time,
colors: ["#206bc4", "#79a6dc", "#bfe399"],
legend: {
show: true,
position: 'bottom',
height: 32,
offsetY: 8,
markers: {
width: 8,
height: 8,
radius: 100,
},
itemMargin: {
horizontal: 8,
},
},
})).render();
// @formatter:on
});
};
load_stat();
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
var myChart = new Chart(ctx, config);
/*
{
label: 'Dataset with string point data',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
fill: false,
data: [{
x: newDateString(0),
y: randomScalingFactor()
}, {
x: newDateString(2),
y: randomScalingFactor()
}, {
x: newDateString(4),
y: randomScalingFactor()
}, {
x: newDateString(5),
y: randomScalingFactor()
}],
}, {
label: 'Dataset with date object point data',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
fill: false,
data: [{
x: newDate(0),
y: randomScalingFactor()
}, {
x: newDate(2),
y: randomScalingFactor()
}, {
x: newDate(4),
y: randomScalingFactor()
}, {
x: newDate(5),
y: randomScalingFactor()
}]
}
*/
var random = (function () {
var seed = 0x2F6E2B1;
return function () {
// Robert Jenkins’ 32 bit integer hash function
seed = ((seed + 0x7ED55D16) + (seed << 12)) & 0xFFFFFFFF;
seed = ((seed ^ 0xC761C23C) ^ (seed >>> 19)) & 0xFFFFFFFF;
seed = ((seed + 0x165667B1) + (seed << 5)) & 0xFFFFFFFF;
seed = ((seed + 0xD3A2646C) ^ (seed << 9)) & 0xFFFFFFFF;
seed = ((seed + 0xFD7046C5) + (seed << 3)) & 0xFFFFFFFF;
seed = ((seed ^ 0xB55A4F09) ^ (seed >>> 16)) & 0xFFFFFFFF;
return (seed & 0xFFFFFFF) / 0x10000000;
};
}());
colors = Array.from(Array(100), () => "#" + Math.floor(random() * 16777215).toString(16))
var color = Chart.helpers.color;
var update_stat = function () {
$.getJSON("/stat", function (data) {
var datasets = data.stat.map((value, index) => {
return {
label: `Connection ${index}`,
backgroundColor: color(colors[index]).alpha(0.5).rgbString(),
borderColor: colors[index],
fill: false,
data: value.io_mean.map((value, index) => {
return {
x: data.time[index],
y: value,
}
}),
}
})
myChart.data.datasets = datasets;
myChart.update();
});
}
update_stat();
setInterval(update_stat, 5000);
</script>