120 lines
2.3 KiB
HTML
120 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Time Series</title>
|
|
|
|
|
|
<link href="../../assets/styles.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
#chart {
|
|
max-width: 800px;
|
|
margin: 35px auto;
|
|
}
|
|
|
|
#timeline-chart .apexcharts-toolbar {
|
|
opacity: 1;
|
|
border: 0;
|
|
}
|
|
|
|
.selection {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="chart">
|
|
<div id="timeline-chart"></div>
|
|
<div class="selection">
|
|
Selected: <span id="selected-count">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
|
|
|
|
<script>
|
|
|
|
var options = {
|
|
chart: {
|
|
type: "histogram",
|
|
height: 380,
|
|
foreColor: "#999",
|
|
events: {
|
|
dataPointSelection: function(e, chart,opts) {
|
|
var arraySelected = []
|
|
opts.selectedDataPoints.map((selectedIndex) => {
|
|
selectedIndex.map((s) => {
|
|
arraySelected.push(chart.w.globals.series[0][s])
|
|
})
|
|
|
|
});
|
|
arraySelected = arraySelected.reduce((acc, curr) => {
|
|
return acc + curr;
|
|
}, 0)
|
|
|
|
document.querySelector("#selected-count").innerHTML = arraySelected
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
dataLabels: {
|
|
enabled: false
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
data: [4, 3, 10, 9, 29, 19, 22]
|
|
}],
|
|
states: {
|
|
active: {
|
|
allowMultipleDataPointsSelection: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: [10,20,30,40,50,60,70],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
labels: {
|
|
offsetX: -5,
|
|
offsetY: -5
|
|
},
|
|
},
|
|
|
|
tooltip: {
|
|
x: {
|
|
format: "dd MMM yyyy"
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
|
|
|
|
chart.render();
|
|
|
|
|
|
|
|
chart.addEventListener("dataPointSelection", function(e, opts) {
|
|
console.log(e, opts)
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |