Implement chart tooltips

This commit is contained in:
Mark Veidemanis 2022-07-21 13:51:01 +01:00
parent 79b1f7676e
commit 8f6393b2ca
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
3 changed files with 36 additions and 28 deletions

View File

@ -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);
}
});

View File

@ -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 %}

View File

@ -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"]