Sha256: 4d73299d5543d893d487d479e3e628132e9a0929dcaf89283ca64e7c2424b61c
Contents?: true
Size: 1.65 KB
Versions: 9
Compression:
Stored size: 1.65 KB
Contents
<div id="chart"></div>
<script>
new Chartist.Line('#chart', <%== chart_data.to_json %>, {
height: '300px',
fullWidth: true,
chartPadding: {
right: 40,
top: 20,
bottom: 20
},
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 3 === 0 ? value : null;
}
},
axisY: {
low: 0,
onlyInteger: true
}
})
// https://www.smashingmagazine.com/2014/12/chartist-js-open-source-library-responsive-charts/
const chartEl = document.getElementById('chart');
const tooltipEl = document.createElement('div')
tooltipEl.classList.add('tooltip', 'tooltip-hidden');
chartEl.appendChild(tooltipEl);
document.body.addEventListener('mouseenter', function (event) {
if (!(event.target.matches && event.target.matches('.ct-point'))) return;
const seriesName = event.target.closest('.ct-series').getAttribute('ct:series-name');
const value = event.target.getAttribute('ct:value');
tooltipEl.innerText = seriesName + ': ' + value;
tooltipEl.classList.remove('tooltip-hidden');
}, true);
document.body.addEventListener('mouseleave', function (event) {
if (!(event.target.matches && event.target.matches('.ct-point'))) return;
tooltipEl.classList.add('tooltip-hidden');
}, true);
document.body.addEventListener('mousemove', function(event) {
if (!(event.target.matches && event.target.matches('.ct-point'))) return;
tooltipEl.style.left = (event.offsetX || event.originalEvent.layerX) + tooltipEl.offsetWidth + 10 + 'px';
tooltipEl.style.top = (event.offsetY || event.originalEvent.layerY) + tooltipEl.offsetHeight - 20 + 'px';
}, true);
</script>
Version data entries
9 entries across 9 versions & 1 rubygems