'Hovering over Morris Chart is not working as expected
Hovering is not working for my chart, any suggestions as to what it could be? This is a django template with the Morris Chart within. I've got Morris Chart working on other django templates just fine so I'm not sure if it's the payload that the chart doesn't like or just a simple syntax issue - thanks!!
{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load static %}
{% load bootstrap %}
{% load app_filters %}
{% block containerid %}vue-app{% endblock %}
{% block page_title %} | TG load time monitoring{% endblock %}
{% block css %}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css">
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<style>
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
.float-right {
float: right !important;
}
}
table.paleblue thead th, table.paleblue thead td {
text-align: left;
}
.sidebar {
padding-left: 0;
padding-right: 10px;
}
.list-group-item.selected {
background: #2296f32e;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.aw_card {
display: inline-block;
background: #fff;
max-width: 150px;
border: 1px solid rgba(0,0,0,.125);
margin-bottom: 10px;
text-align: center;
}
.aw_card_header {
display: block;
padding: 5px;
background: rgba(0,0,0,.03);
}
.aw_card_body {
color: black;
height:auto;
font-size: 2em;
padding: 10px;
}
table.paleblue td {
width: 30px!important;
}
.morris-hover.morris-default-style {
top: -150px !important;
background: rgba(255,255,255,1)!important;
}
.tg_load-full_data_btn {
margin-bottom: 10px;
}
.regions::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
}
.modal p {
font-size: 18px;
}
</style>
{% endblock %}
{% block content %}
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 sidebar">
<div class="col-lg-12 sidebar">
<div class="panel panel-primary">
<div class="panel-heading">Status Dashboard</div>
<div class="panel-body" style="padding: 0;">
{% block navbar %}
{% include "status_dashboard/nav.html" with navst="tgload" %}
{% endblock %}
</div>
</div>
</div>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-12">
<h4>TG Link Monitoring</h4>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Last 400+ status codes
<button class="btn btn-sm btn-default vertical-allign-baseline pull-right" data-toggle="modal" data-target="#helpStatusCode">
<i class="fa fa-question-circle" aria-hidden="true"></i> Help
</button>
</div>
<div class="panel-body">
{% if datetime_today_checker %}
<div class="alert alert-danger" role="alert">
There have been status code errors today. Check below for highlighted entries:
</div>
{% endif %}
{% render_table status_code_table %}
<traffic-guard-link-errors></traffic-guard-link-errors>
</div>
</div>
</div>
</div>
<script>
const processRawData = (rawData, regions) => {
let result = {};
regions.forEach((region) => {
rawData[region].forEach((data) => {
// const datetime = data['datetime'];
const datetime = new Date(data['datetime'] * 1000).getTime();
const loadtime = data['loadtime'];
if (result[datetime]) {
result[datetime] = {[region]: loadtime, ...result[datetime]}
} else {
result[datetime] = {[region]: loadtime}
}
})
})
return result;
}
const processToChartData = (processedData) => {
let chartData = [];
for(datetime in processedData) {
chartData.push({...processedData[datetime], datetime: parseInt(datetime)});
}
return chartData;
}
let rawData = '';
let regions = '';
let processedData = '';
let chartData = '';
</script>
{% for item in data_alpha %}
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Load Time | {{ item.link }}
<button class="btn btn-sm btn-default vertical-allign-baseline pull-right" data-toggle="modal" data-target="#helpLoadTime">
<i class="fa fa-question-circle" aria-hidden="true"></i> Help
</button>
</div>
<div class="panel-body">
{% for key, value in regions.items %}
<span class="regions" style="background-color: {{ value }}"></span>
<span> {{ key }}</span>
{% endfor %}
<div id="tg-load-chart_{{ forloop.counter }}" style="height: 300px;"></div>
<script>
rawData = {{item.tg_load_time_graph|safe}};
aws_regions = Object.keys({{item.tg_load_time_graph|safe}});
processedData = processRawData(rawData, aws_regions);
chartData = processToChartData(processedData);
colours = Object.values({{regions|safe}});
new Morris.Line({
element: 'tg-load-chart_{{ forloop.counter }}',
data: chartData,
xkey: 'datetime',
ykeys: aws_regions,
labels: aws_regions,
hideHover: 'auto',
pointSize: 0,
xLabels: '10min',
lineColors: colours,
});
</script>
<div class="btn btn-primary tg_load-full_data_btn">Show Full Data</div>
<div class="tg_load_full_data" style="display: none;">
{% for table in item.tables %}
{% render_table table %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="modal fade" id="helpStatusCode" tabindex="-1" role="dialog" aria-labelledby="helpStatusCodeLabel" style="display: none;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="helpStatusCodeLabel">Status Code Help</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<p>A status code detected above 399 is placed in this list. Status codes indicate the response coming back from the website. Any code that is 4xx and 5xx needs to be investigated. If the status code is 4xx it is a client side issue and if it is 5xx it is a server side issue.</p>
<p>TG link monitored sites are checked every 1 min. They are checked from the regions listed below:</p>
<ul>
{% for region in regions %}
<li>{{ region }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpLoadTime" tabindex="-1" role="dialog" aria-labelledby="helpLoadTimeLabel" style="display: none;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="helpLoadTimeLabel">Load Time Help</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<p>A normal load time is under 3 seconds for most links. If the below graph shows large spikes abnormal to previous hours (especially if there are spikes in multiple regions) then the link owner should be notified.</p>
<p>TG link monitored sites are checked every 1 min. They are checked from the regions listed below. The below graph shows avg. load time every 10 mins:</p>
<ul>
{% for region in regions %}
<li>{{ region }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
{% endblock %}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|