Implement chart tooltips
parent
79b1f7676e
commit
8f6393b2ca
@ -1,34 +1,41 @@
|
|||||||
function loadJson(selector) {
|
function loadJson(selector) {
|
||||||
return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
|
return JSON.parse(document.querySelector(selector).getAttribute('data-json'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
var jsonData = loadJson('#jsonData');
|
var jsonData = loadJson('#jsonData');
|
||||||
var data = jsonData.map((item) => item.value);
|
var full_data = jsonData.map((item) => item);
|
||||||
var labels = jsonData.map((item) => item.date);
|
|
||||||
|
|
||||||
var config = {
|
var ctx = document.getElementById('volume').getContext("2d");
|
||||||
type: 'line',
|
new Chart(ctx, {
|
||||||
data: {
|
type: 'line',
|
||||||
labels: labels,
|
data: {
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Sentiment',
|
label: "Sentiment",
|
||||||
|
fill: false,
|
||||||
backgroundColor: 'black',
|
backgroundColor: 'black',
|
||||||
borderColor: 'lightblue',
|
borderColor: 'lightblue',
|
||||||
data: data,
|
tension: 0.3,
|
||||||
fill: false
|
data: full_data,
|
||||||
}
|
spanGaps: true,
|
||||||
]
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
parsing: {
|
||||||
|
xAxisKey: 'date',
|
||||||
|
yAxisKey: 'value',
|
||||||
},
|
},
|
||||||
options: {
|
plugins: {
|
||||||
responsive: true,
|
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