Implement chart tooltips
parent
79b1f7676e
commit
8f6393b2ca
@ -1,34 +1,41 @@
|
||||
function loadJson(selector) {
|
||||
return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
var jsonData = loadJson('#jsonData');
|
||||
var data = jsonData.map((item) => item.value);
|
||||
var labels = jsonData.map((item) => item.date);
|
||||
var full_data = jsonData.map((item) => item);
|
||||
|
||||
var config = {
|
||||
var ctx = document.getElementById('volume').getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sentiment',
|
||||
label: "Sentiment",
|
||||
fill: false,
|
||||
backgroundColor: 'black',
|
||||
borderColor: 'lightblue',
|
||||
data: data,
|
||||
fill: false
|
||||
tension: 0.3,
|
||||
data: full_data,
|
||||
spanGaps: true,
|
||||
}
|
||||
]
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
|
||||
parsing: {
|
||||
xAxisKey: 'date',
|
||||
yAxisKey: 'value',
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
beforeFooter: function(context) {
|
||||
return "Nick: " + full_data[context[0].dataIndex].nick;
|
||||
},
|
||||
footer: function(context) {
|
||||
return "Msg: " + full_data[context[0].dataIndex].text;
|
||||
}
|
||||
}
|
||||
var element = document.getElementById('volume');
|
||||
element.removeAttribute("height");
|
||||
element.removeAttribute("width");
|
||||
|
||||
var ctx = document.getElementById('volume').getContext('2d');
|
||||
new Chart(ctx, config);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue