Implement chart tooltips
This commit is contained in:
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 = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
var ctx = document.getElementById('volume').getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sentiment',
|
||||
{
|
||||
label: "Sentiment",
|
||||
fill: false,
|
||||
backgroundColor: 'black',
|
||||
borderColor: 'lightblue',
|
||||
data: data,
|
||||
fill: false
|
||||
}
|
||||
]
|
||||
tension: 0.3,
|
||||
data: full_data,
|
||||
spanGaps: true,
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
parsing: {
|
||||
xAxisKey: 'date',
|
||||
yAxisKey: 'value',
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<div class="box">
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
|
|
|
@ -54,8 +54,9 @@ class Search(LoginRequiredMixin, View):
|
|||
context["data"] = json.dumps(
|
||||
[
|
||||
{
|
||||
"id": item.get("id"),
|
||||
"value": item.get("sentiment", 0),
|
||||
"text": item.get("msg", None) or item.get("id"),
|
||||
"nick": item.get("nick", None),
|
||||
"value": item.get("sentiment", None) or None,
|
||||
"date": item.get("ts"),
|
||||
}
|
||||
for item in context["results"]
|
||||
|
|
Loading…
Reference in New Issue