i am using highchart sparklines in my table. This is my code to generate the sparklines. It is generated using a php script. So you will find some php variables inside:
$(function () {
$(document).ready(function() {
Highcharts.SparkLine = function (a, b, c) {
const hasRenderToArg = typeof a === 'string' || a.nodeName;
let options = arguments[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || (hasRenderToArg && a),
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 40,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
exporting: {
enabled: false
},
plotOptions: {
series: {
animation: false,
lineWidth: 2,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#c3d3a4',
color: '#729d34',
borderColor: 'none'
},
bar: {
negativeColor: '#c3d3a4',
color: '#729d34',
borderColor: 'none'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
const start = +new Date(),
tds = Array.from(document.querySelectorAll('td[data-sparkline]')),
fullLen = tds.length;
let n = 0;
function doChunk() {
const time = +new Date(),
len = tds.length;
for (let i = 0; i < len; i += 1) {
const td = tds[i];
const stringdata = td.dataset.sparkline;
const arr = stringdata.split('; ');
const data = arr[0].split(', ').map(parseFloat);
const chart = {};
if (arr[1]) {
chart.type = arr[1];
}
Highcharts.SparkLine(td, {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style=\"font-size: 10px\">' + td.parentElement.querySelector('th').innerText + ':</span><br/>',
pointFormat: '<b>{point.y}</b>'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
}
}
doChunk();
});
});
I have to problems i can not solve:
- I currently use td.parentElement.querySelector('th').innerText to get the text of the first column in the tooltip.
if my table looks like:
<table>
<tr><th>Amsterdam</th><td>43 People</td><td data-sparkline="-5"></td></tr>
<tr><th>Paris</th><td>20 People</td><td data-sparkline="2"></td></tr>
</table>
it works great.
But i like to change the table structure from th to td:
<table>
<tr><td>Amsterdam</td><td>43 People</td><td data-sparkline="-5"></td></tr>
<tr><td>Paris</td><td>20 People</td><td data-sparkline="2"></td></tr>
</table>
How can i get the first colum of the table row to be displayed in the tooltip "td.parentElement.querySelector('td:first????').innerText"
- As you see in the picture the positive and negetive values in a row dont have the same starting point.
It had to look like:
There should be a fixed x-axis in the middle, positive values go to the right, negative to the left and the middle-point is fixed over all rows and the scaling is the same in each rows. So bigger values have a longer bar, smaller values a short one.
