diff options
| -rw-r--r-- | src/SUMMARY.md | 1 | ||||
| -rw-r--r-- | src/web/README.md | 1 | ||||
| -rw-r--r-- | src/web/chartjs.md | 10 | ||||
| -rw-r--r-- | src/web/src/chartjs-ext-tooltip.html | 101 |
4 files changed, 113 insertions, 0 deletions
diff --git a/src/SUMMARY.md b/src/SUMMARY.md index 8b9fb5c..3624108 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -64,6 +64,7 @@ - [Web](./web/README.md) - [html](./web/html.md) + - [chartjs](./web/chartjs.md) - [Arch](./arch/README.md) - [x86_64](./arch/x86_64.md) diff --git a/src/web/README.md b/src/web/README.md index f208afb..e189f9e 100644 --- a/src/web/README.md +++ b/src/web/README.md @@ -1,3 +1,4 @@ # Web - [html](./html.md) +- [chartjs](./chartjs.md) diff --git a/src/web/chartjs.md b/src/web/chartjs.md new file mode 100644 index 0000000..36b621d --- /dev/null +++ b/src/web/chartjs.md @@ -0,0 +1,10 @@ +# Chart.js + +## Minimal example with *external* tooltips + +[Rendered html](src/chartjs-ext-tooltip.html) +```html +{{#include src/chartjs-ext-tooltip.html:3: }} +``` + +[chartjs]: https://www.chartjs.org diff --git a/src/web/src/chartjs-ext-tooltip.html b/src/web/src/chartjs-ext-tooltip.html new file mode 100644 index 0000000..b7358bb --- /dev/null +++ b/src/web/src/chartjs-ext-tooltip.html @@ -0,0 +1,101 @@ +<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> + +<canvas id="myChart" style="margin:5em;"></canvas> + +<script> +const get_or_create_tooltip = (id) => { + if (tooltip = document.getElementById(id)) { + return tooltip; + } else { + // -- Create a new Tooltip element. + const tooltip = document.createElement('div'); + tooltip.id = id; + document.body.appendChild(tooltip); + + // -- Some minimal styling. + tooltip.style.background = 'rgba(0, 0, 0, 0.1)'; + tooltip.style.position = 'absolute'; + tooltip.style.transition = 'all .2s ease'; + + // -- Add a table element for the tooltip content. + const table = document.createElement('table'); + tooltip.appendChild(table); + + return tooltip + } +} + +const render_tooltip = (context) => { + const {chart, tooltip} = context; + + // -- Get Tooltip element. + const tooltip_elem = get_or_create_tooltip('myTooltip'); + + // -- Get data point values (only one data point). + const {label: x, formattedValue: y} = tooltip.dataPoints[0]; + + // -- Format new tooltip. + const link = document.createElement('a'); + link.href = "https://github.com/johannst"; + link.innerHTML = "X:" + x + " Y:" + y; + + // -- Remove previous child element and add new one. + const table = tooltip_elem.querySelector('table'); + table.innerHTML = ""; + table.appendChild(link); + + // -- Get absolute X/Y position of the top left corner of the canvas. + const {offsetLeft: canvas_x, offsetTop: canvas_y} = chart.canvas; + + // -- Set position and minimal style for the tooltip. + tooltip_elem.style.left = canvas_x + tooltip.caretX + 'px'; + tooltip_elem.style.top = canvas_y + tooltip.caretY + 'px'; + tooltip_elem.style.font = tooltip.options.bodyFont.string; + + // -- Place the tooltip (I) left or (II) right of the data point. + if (tooltip.xAlign === "right") { + tooltip_elem.style.transform = 'translate(-100%, 0)'; // (I) + } else if (tooltip.xAlign === "left") { + tooltip_elem.style.transform = 'translate(0%, 0)'; // (II) + } +} + +// -- Render a chart with some dummy data on the canvas. +const chart = new Chart( + document.getElementById('myChart'), + { + data: { + datasets: [{ + // -- A single dataset. + label: 'Just some values', + type: 'scatter', + data: [ + {x: 4, y: 4}, + {x: 5, y: 1}, + {x: 7, y: 6}, + {x: 10, y: 8}, + {x: 10, y: 7}, + {x: 10, y: 3}, + ], + backgroundColor: 'rgba(255, 99, 132, 0.5)', + borderColor: 'rgb(255, 99, 132)', + }], + }, + options: { + scales: { + y: { + beginAtZero: true, // -- Start the Y-Axis at zero instead min(y) of dataset. + } + }, + plugins: { + tooltip: { + enabled: false, // -- Disable builtin tooltips. + mode: 'nearest', // -- Get the item that is nearest to the mouse. + intersect: false, // -- 'mode' is active also when the mouse doesnt intersect with an item on the chart. + external: render_tooltip, // -- External tooltip handler, allows to create own HTML. + } + } + } + } +); +</script> |