Encountering unusual behavior with HighCharts while selecting a specific chart.
Only the top right gauge triggers positional shifts in other gauges, unlike the others that function correctly.
Struggling to identify the root cause of this issue and seeking assistance in pinpointing the oversight.
Utilizing Python Flask module for backend, JINJA2 Framework for HTML, and JavaScript.
Front.html
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='style.css')}}"/>
</head>
<body id="body">
<div class="header">
<span id="headerText">Current ISIS Connections </span>
</div>
<div id="gaugeTable">
<div id="Workgroup-01" class="gaugeCell"></div>
<div id="Workgroup-02" class="gaugeCell"></div>
<div id="Workgroup-04" class="gaugeCell"></div>
<div id="Workgroup-05" class="gaugeCell"></div>
<div id="Workgroup-06" class="gaugeCell"></div>
<div id="Workgroup-03" class="gaugeCell"></div>
<div id="Workgroup-3A" class="gaugeCell"></div>
<div id="Workgroup-07" class="gaugeCell"></div>
</div>
<script type="text/javascript">
var workgroups =['Workgroup-01','Workgroup-02','Workgroup-03','Workgroup-3A','Workgroup-04',
'Workgroup-05','Workgroup-06','Workgroup-07'];
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'test',
pane: {
// Positioning
center: ['50%', '85%'],
// img size
size: '100%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
// IDK
minorTickInterval: null,
// IDK
tickPixelInterval: 400,
//IDK
tickWidth: 0,
title: {
// Title Location
y: -70
},
labels: {
// Bottom Label Offset
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 15,
borderWidth: 0,
useHTML: true
}
}
}
};
// The gauges
//
//
//
for( i in workgroups){
$('#'+work...
<h2>Styles.css</h2>
<pre class="lang-css"><code>/* reset browser defaults */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
border: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* **************************************************************************************** */
/* Main body formatting */
body {
background-color:#D7D5C9;
font-family: verdana;
text-align: left;
}
/* **************************************************************************************** */
/* Header and Footer */
.header {
background-color: #4C453D;
color:#FF6C00;
font-size:24px;
text-indent: 20px;
padding:8px 25px 50px;
}
/*
.footer{
background-color: #4C453D;
color:#FF6C00;
text-indent: 20px;
height: 20px;
width: 100%;
font-size:12px;
}
/* manually set width of the 1st/status column so it's big enough and fixed */
.footer #status {
width:70px;
}
*/
/* **************************************************************************************** */
/* Gauge Formatting */
.test{
border-collapse:collapse;
margine: 5px;
height: 450px;
width: 900px;
}
#gaugeTable{
border-collapse: collapse;
margin: 5px;
height: 450px;
width: 900px;
}
.gaugeCell{
border-width:4px;
border-color:gray;
border-style:solid;
padding: 0px;
height: 200px;
width: 200px;
float:left;
}
.selected {
border: 3px solid #0E5342;
background-color: #A8DB92;
}