Skip to content

Instantly share code, notes, and snippets.

@bojand

bojand/apex.html

Last active August 8, 2018 22:27
Show Gist options
  • Save bojand/2eaf69f00aead87fa29a3264a869aff7 to your computer and use it in GitHub Desktop.
Save bojand/2eaf69f00aead87fa29a3264a869aff7 to your computer and use it in GitHub Desktop.
Download ZIP
Charts
Raw
apex.html
<!DOCTYPE html>
<html>
<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>Apex chart test</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Change over time</h3>
<p>
<div id="chart"></div>
</p>
</div>
</div>
</div>
</div>
</section>
<script>
const data = [
{ date: '2018-07-01T15:04:05Z07:00', average: 10.0, fastest: 1.0, slowest: 20.0 },
{ date: '2018-07-02T15:04:05Z07:00', average: 10.5, fastest: 2.0, slowest: 18.6 },
{ date: '2018-07-03T15:04:05Z07:00', average: 9.0, fastest: 2.2, slowest: 17.9 },
{ date: '2018-07-04T15:04:05Z07:00', average: 9.9, fastest: 1.2, slowest: 18.1 },
{ date: '2018-07-05T15:04:05Z07:00', average: 11.1, fastest: 2.8, slowest: 17.7 },
{ date: '2018-07-06T15:04:05Z07:00', average: 10.3, fastest: 3.3, slowest: 19.3 },
{ date: '2018-07-07T15:04:05Z07:00', average: 10.8, fastest: 3.2, slowest: 18.3 },
{ date: '2018-07-08T15:04:05Z07:00', average: 11.1, fastest: 2.2, slowest: 18.9 },
{ date: '2018-07-09T15:04:05Z07:00', average: 12.34, fastest: 2.5, slowest: 23.45 },
{ date: '2018-07-10T15:04:05Z07:00', average: 8.8, fastest: 1.7, slowest: 14.6 }
]
const avgs = data.map(d => d.average)
const fasts = data.map(d => d.fastest)
const slows = data.map(d => d.slowest)
const series = [
{
name: 'Average',
data: avgs
},
{
name: 'Fastest',
data: fasts
},
{
name: 'Slowest',
data: slows
}
]
const dates = data.map(d => d.date)
const dates2 = data.map(d => {
const parsed = new Date(d.date)
return parsed.getTime()
})
var options = {
chart: {
// height: 380,
width: "100%",
type: "line",
animations: {
initialAnimation: {
enabled: false
}
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false,
},
title: {
text: 'Change Over Time',
align: 'left'
},
grid: {
borderColor: '#e7e7e7',
row: {
colors: [ '#f3f3f3', 'transparent' ], // takes an array which will be repeated on columns
opacity: 0.5
},
},
stroke: {
curve: 'smooth'
},
series: series,
yaxis: {
title: {
text: 'Latency (ms)'
}
},
// xaxis: {
// type: 'datetime'
// }
xaxis: {
// labels: {
// formatter: value => "ms " + value
// },
categories: dates,
title: {
text: 'Date'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
Raw
brite.html
<!DOCTYPE html>
<html>
<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>My first Bulma website</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script> -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2/dist/bundled/britecharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" /></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-offset-2-desktop is-narrow">
<div class="content">
<h3>Summary</h3>
<p>
<table class="table">
<tbody>
<tr>
<th>Count</th>
<td>2000</td>
</tr>
<tr>
<th>Total</th>
<td>345.52 ms</td>
</tr>
<tr>
<th>Slowest</th>
<td>15.41 ms</td>
</tr>
<tr>
<th>Fastest</th>
<td>0.66 ms</td>
</tr>
<tr>
<th>Average</th>
<td>6.83 ms</td>
</tr>
<tr>
<th>Requests / sec</th>
<td>5788.35</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Historam</h3>
<p>
<div class="js-bar-container"></div>
</p>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Latency distribution</h3>
<p>
<table class="table is-fullwidth">
<thead>
<tr>
<th>10%</th>
<th>25%</th>
<th>50%</th>
<th>75%</th>
<th>90%</th>
<th>95%</th>
<th>99%</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.18 ms</td>
<td>5.51 ms</td>
<td>6.10 ms</td>
<td>6.72 ms</td>
<td>12.19 ms</td>
<td>13.26 ms</td>
<td>14.1739 ms</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Change over time</h3>
<p>
<div class="js-line-container card--chart"></div>
</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('Hello Bulma!');
});
const data = [
{ name: '0.664 ms', value: 0.0005 },
{ name: '2.138 ms', value: 0.013 },
{ name: '3.613 ms', value: 0.007 },
{ name: '5.087 ms', value: 0.0325 },
{ name: '6.561 ms', value: 0.6525 },
{ name: '8.035 ms', value: 0.137 },
{ name: '9.509 ms', value: 0.033 },
{ name: '10.983 ms', value: 0.00 },
{ name: '12.458 ms', value: 0.0295 },
{ name: '13.932 ms', value: 0.065 },
{ name: '15.406 ms', value: 0.025 }
];
const lineData = {
dataByTopic: [{
topicName: 'Average',
topic: 1,
dates: [{
date: '2018-01-01T16:00:00-08:00',
value: 6.83
},
{
date: '2018-01-02T16:00:00-08:00',
value: 5.83
},
{
date: '2018-01-03T16:00:00-08:00',
value: 4.83
},
{
date: '2018-01-04T16:00:00-08:00',
value: 5.25
},
{
date: '2018-01-05T16:00:00-08:00',
value: 7.25
},
{
date: '2018-01-06T16:00:00-08:00',
value: 6.25
},
{
date: '2018-01-07T16:00:00-08:00',
value: 5.25
}
]
}, {
topicName: '95th',
topic: 2,
dates: [{
date: '2018-01-01T16:00:00-08:00',
value: 13.26
},
{
date: '2018-01-02T16:00:00-08:00',
value: 12.86
},
{
date: '2018-01-03T16:00:00-08:00',
value: 12.26
},
{
date: '2018-01-04T16:00:00-08:00',
value: 11.95
},
{
date: '2018-01-05T16:00:00-08:00',
value: 10.25
},
{
date: '2018-01-06T16:00:00-08:00',
value: 11.25
},
{
date: '2018-01-07T16:00:00-08:00',
value: 12.25
}
]
}]
};
function createHorizontalBarChart() {
let barChart = britecharts.bar(),
tooltip = britecharts.miniTooltip(),
barContainer = d3.select('.js-bar-container'),
containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false,
tooltipContainer,
dataset;
if (containerWidth) {
dataset = data;
barChart
.isHorizontal(true)
.isAnimated(true)
.margin({
left: 100,
right: 20,
top: 20,
bottom: 20
})
.colorSchema(britecharts.colors.colorSchemas.teal)
.width(containerWidth)
.yAxisPaddingBetweenChart(30)
.height(300)
.hasPercentage(true)
.enableLabels(true)
.labelsNumberFormat('.0%')
.percentageAxisToMaxRatio(1.3)
.on('customMouseOver', tooltip.show)
.on('customMouseMove', tooltip.update)
.on('customMouseOut', tooltip.hide);
barContainer.datum(dataset).call(barChart);
tooltipContainer = d3.select('.js-bar-container .bar-chart .metadata-group');
tooltipContainer.datum([]).call(tooltip);
}
}
function createLineChart() {
let lineChart = britecharts.line(),
tooltip = britecharts.tooltip(),
// tooltip = britecharts.miniTooltip(),
barContainer = d3.select('.js-line-container'),
containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false,
tooltipContainer,
dataset;
if (containerWidth) {
dataset = lineData;
lineChart
.isAnimated(true)
.aspectRatio(0.5)
.grid('horizontal')
.tooltipThreshold(600)
.width(containerWidth)
.margin({
top: 60,
bottom: 50,
left: 50,
right: 30
})
// .colorSchema(britecharts.colors.colorSchemas.green)
.dateLabel('date')
.on('customMouseOver', tooltip.show)
.on('customMouseMove', tooltip.update)
.on('customMouseOut', tooltip.hide);
barContainer.datum(dataset).call(lineChart);
tooltip
// In order to change the date range on the tooltip title, uncomment this line
// .dateFormat(chartTooltip.axisTimeCombinations.DAY)
.title('Data')
.valueFormatter(value => value + ' ms')
.topicsOrder(dataset.dataByTopic.map(function (topic) {
return topic.topic;
}));
tooltipContainer = d3.select('.js-line-container .metadata-group .hover-marker');
tooltipContainer.datum([]).call(tooltip);
}
}
createHorizontalBarChart();
createLineChart();
</script>
</body>
</html>
Raw
chart.html
<!DOCTYPE html>
<html>
<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>Chart.js test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Change over time</h3>
<p>
<canvas id="line-chart"></canvas>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>Histogram</h3>
<p>
<canvas id="bar-chart"></canvas>
</p>
</div>
</div>
</div>
</div>
</section>
<script>
window.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)'
};
const histogram = [
{ mark: 0.664000, count: 10 },
{ mark: 2.138000, count: 22 },
{ mark: 3.613000, count: 17 },
{ mark: 5.087000, count: 13 },
{ mark: 6.561000, count: 7 },
{ mark: 8.035000, count: 3 },
{ mark: 9.509000, count: 1 },
{ mark: 10.983000, count: 0 },
{ mark: 12.458000, count: 0 },
{ mark: 13.932000, count: 1 },
{ mark: 15.406000, count: 4 }
]
const totalCount = 78
const categories = histogram.map(h => {
return Number.parseFloat(h.mark).toFixed(2)
})
const series = histogram.map(h => h.count)
var color = Chart.helpers.color;
const barChartData = {
labels: categories,
datasets: [ {
label: 'Count',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: series
} ]
}
const barOptions = {
elements: {
rectangle: {
borderWidth: 2,
}
},
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
title: function (tooltipItem, data) {
const value = Number.parseInt(tooltipItem[ 0 ].xLabel)
const percent = value / totalCount * 100
return value + ' ' + '(' + Number.parseFloat(percent).toFixed(1) + ' %)'
}
}
},
scales: {
xAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
}
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Latency (ms)'
}
} ]
}
}
const barConfig = {
type: 'horizontalBar',
data: barChartData,
options: barOptions
}
// LINE
const data = [
{ date: '2018-07-01T15:04:05Z', average: 10.0, fastest: 1.0, slowest: 20.0 },
{ date: '2018-07-02T15:04:05Z', average: 10.5, fastest: 2.0, slowest: 18.6 },
{ date: '2018-07-03T15:04:05Z', average: 9.0, fastest: 2.2, slowest: 17.9 },
{ date: '2018-07-04T15:04:05Z', average: 9.9, fastest: 1.2, slowest: 18.1 },
{ date: '2018-07-05T15:04:05Z', average: 11.1, fastest: 2.8, slowest: 17.7 },
{ date: '2018-07-06T15:04:05Z', average: 10.3, fastest: 3.3, slowest: 19.3 },
{ date: '2018-07-07T15:04:05Z', average: 10.8, fastest: 3.2, slowest: 18.3 },
{ date: '2018-07-08T15:04:05Z', average: 11.1, fastest: 2.2, slowest: 18.9 },
{ date: '2018-07-09T15:04:05Z', average: 12.34, fastest: 2.5, slowest: 23.45 },
{ date: '2018-07-10T15:04:05Z', average: 8.8, fastest: 1.7, slowest: 14.6 }
]
const avgs = data.map(d => d.average)
const fasts = data.map(d => d.fastest)
const slows = data.map(d => d.slowest)
const datasets = [
{
label: 'Average',
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
fill: false,
data: avgs
},
{
label: 'Fastest',
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
fill: false,
data: fasts
},
{
label: 'Slowest',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
fill: false,
data: slows
}
]
const dates = data.map(d => d.date)
const maxLabelLength = 10
var config = {
type: 'line',
data: {
labels: dates,
datasets: datasets
}, options: {
responsive: true,
title: {
display: true,
text: 'Change Over Time'
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: function (tooltipItem, data) {
const value = tooltipItem[ 0 ].xLabel
return new Date(value).toLocaleString()
}
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
callback: function (value, index, values) {
const r = new Date(value).toLocaleString()
return r.length > maxLabelLength ? r.substr(0, maxLabelLength) + '...' : r
}
}
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'Latency (ms)'
}
} ]
}
}
}
window.onload = function () {
var ctx = document.getElementById('line-chart').getContext('2d');
window.myLine = new Chart(ctx, config);
var ctx2 = document.getElementById('bar-chart').getContext('2d');
window.myBar = new Chart(ctx2, barConfig);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment