I am using HighCharts, and I am seeing some weird functionality when selecting one of the charts.
If and only if I select the top right gauge, it causes other gauges to move their position. All other gauges work fine.
I am having trouble figuring out why this is happening, and was hoping someone could point out what I am missing.
My back end uses Python Flask module, HTML uses JINJA2 Framework, 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){
$('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: workgroups[i]
}
},
credits: {
enabled: false
},
series: [{
name: workgroups[i],
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">clients</span></div>'
},
tooltip: {
valueSuffix: ' clients'
}
}]
}));
}
}
);
function get_gauge_data(){
$.get('get_gauge_data',
function(returnedData){
$.each(returnedData, function(key,value){
for(i in workgroups){
divID = "#"+workgroups[i];
var chart = $(divID).highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
newVal = value[workgroups[i]];
}
point.update(newVal);
}
});
}
);
}
$(document).ready(function() {
//trigger repeating calls
get_gauge_data();
setInterval(get_gauge_data, 5000);
});
var highCharts = document.getElementsByClassName("gaugeCell");
var highChartsListener = function(){
for(var i = 0;i<highCharts.length;i++){
if(this == highCharts[i]){
$(this).addClass("selected");
}else{
$(highCharts[i]).removeClass("selected");
}
}
}
for(var i = 0;i<highCharts.length;i++){
highCharts[i].addEventListener('click', highChartsListener,false);
}
</script>
</body>
</html>
Styles.css
/* 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;
}
distorted img
