Sha256: 294b36ffc1a1e5686cc98e424e2113a8789469eb298b9c15981e900594da8f57
Contents?: true
Size: 1.64 KB
Versions: 12
Compression:
Stored size: 1.64 KB
Contents
<div id="chart"></div> <script> new Chartist.Line('#chart', <%== chart_data.to_json %>, { height: '300px', fullWidth: true, chartPadding: { right: 40, top: 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
12 entries across 12 versions & 1 rubygems