Diagram running in the background causing low performance (JavaScript + jQuery) - javascript

The problem I am encountering is that there is an JavaScript file running in the background causing the application to run slow.
I only want this JavaScript file to be run when I am in page1.html (because it is an dynamic diagram), and not on page2.html or page3.html. I am using FireFox performance analysis to find out which file is running in the background, and I can clearly see that diagram18.js is running in the background of page2.html and page3.html... Any idea on how I can prevent this file running in the background of page2.html and page3.html??
Below is the jQuery code, it does two things. The first thing; it loads the html pages on which icon the user clicks on. The second thing; it checks if another icon has been clicked (page2.html or page3.html), to clear the interval in diagram18.js.
$(function(){
var icon_clicked = 0;
$('.page-links').click(function() {
$('#page').load('page' + $(this).data('target') + '.html');
$('[data-target]').on('click', function() {
var icon = $(this).attr('data-target');
if (icon !== icon_clicked) {
// clear the currently running interval if any
if('diagramInterval' + icon_clicked in window) {
clearInterval(window['diagramInterval' + icon_clicked]);
}
// Remember last diagram that was clicked.
icon_clicked = icon;
// load again only if not loaded
if('diagram' + icon_clicked in window) {
window['diagram' + icon_clicked]();
} else {
$.getScript("SensorTables/diagram" + icon_clicked + ".js", function() {
window['diagram' + icon_clicked]();
});
}
};
});
});
});
This is diagram18.js: In order to use this inside the jQuery, the idea has been to set diagramInterval18 equal to every setInterval command.
var diagramInterval18 = false;
function diagram18(){
var speedColor = '#19282B';
var rpmColor = '#19282B';
var dialColor = '#ff0000';
if(CRANK >= 13){
dynColor = "#E6023F";
}
else{
dynColor = "#19282B";
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
animation: {
duration: 10 //animasjonen på speedometeret
},
renderTo: 'container',
type: 'gauge',
alignTicks: false,
},
title: {
text: ''
},
pane: [{
startAngle: -180,
endAngle: 120,
size: 300,
background: [{
// BG color for rpm
backgroundColor: '#19282B',
outerRadius: '80%',
innerRadius: '48%'
}, {
// BG color in between speed and rpm
backgroundColor: '#19282B',
outerRadius: '79%',
innerRadius: '79%'
}, {
// BG color for speed
// backgroundColor: '#E4E3DF',
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.6,
r: 1.0
},
stops: [
[0.3, '#19282B'],
//[0.6, '#FF04FF'],
[0.45, '#19282B'],
[0.7, '#E6023F'],
//[0.7, '#FFFF04'],
]
},
innerRadius: '0%',
outerRadius: '105%'
}, {
// Below rpm bg color
// backgroundColor: '#909090',
zIndex: 1,
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.75,
r: 0.8
},
stops: [
[0.6, '#19282B' ],
[0.8, '#E6023F'], //sirkel mellom digital og rpm
[1, '#19282B']
]
},
outerRadius: '48%',
innerRadius: '40%',
}, {
backgroundColor: '#19282B',
zIndex: 1,
outerRadius: '40%',
innerRadius: '39%'
}, {
backgroundColor: dynColor, //'#19282B', //bakgrunnen i sirkelen
outerRadius: '39%'
}]
}, {
startAngle: -180,
endAngle: 120,
size: 200
}],
yAxis: [{
title: {
text: 'km/h',
y: 210,
x: 0,
style: {
color: "#092C37",
fontFamily: 'Helvetica, Sans-Serif', //font i sirkelkjernen km/t
fontSize: '9px',
fontStyle: 'italic'
}
},
min: 0,
max: 300,
tickInterval: 10,
tickLength: 6,
lineWidth: 2,
lineColor: "#FFFFFF",
tickColor: "#FFFFFF",
minorTickInterval: 10,
minorTickLength: 3,
minorTickWidth: 2,
minorTickColor: "#FFFFFF",
endOnTick: false,
labels: {
distance: -28,
rotation: 'auto',
step: 2,
style: {
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '18px',
color: "#FFFFFF", //speed color
}
},
pane: 0
}, {
pane: 0
}, {
title: {
text: 'rpm x1000',
y: 140, // posisjon på teskten
x: 0,
style: {
color: rpmColor, //farge på teksen rpm x1000
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '9px',
fontStyle: 'italic'
}
},
min: 0,
max: 16,
offset: -21,
minorTickInterval: 1,
tickInterval: 1,
tickLength: 4,
minorTickLength: 5,
lineColor: rpmColor,
tickWidth: 2,
minorTickWidth: 2,
lineWidth: 2,
labels: {
distance: 5,
rotation: 'auto',
style: {
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '17px',
color: "#FFFFFF"
},
formatter: function() {
if (this.value >=13) {
return '<span style="color:' + "#C7003D" +'">' + this.value + "</span>"; //fargen på limit rpm tekst
}
return this.value;
}
},
pane: 1,
plotBands: [{
from: 13,
to: 16,
color: "#092C37", //farge på red limit rpm linje
innerRadius: '70%',
outerRadius: '80%'
}]
}],
tooltip: { enabled: false },
credits: {
enabled: false
},
series: [{
name: 'Speed',
yAxis: 0,
data: [ 0 ],
dataLabels: {
color: '#FFFFFF',
borderWidth: 0,
y: 24,
x: 0,
style: {
fontSize: '37px',
fontFamily: 'Helvetica, Sans-Serif',
//fontStyle: 'italic'
},
formatter: function() {
return this.y.toFixed(1);
}
},
dial: {
backgroundColor: dialColor,
baseLength: '90%',
baseWidth: 7,
radius: '100%',
topWidth: 3,
rearLength: '-74%',
borderColor: '#E50544',
borderWidth: 1
},
zIndex: 1,
pivot: {
radius: '0'
}
}, {
name: 'RPM',
data: [ 0 ],
yAxis: 2,
dataLabels: {
color: '#FFFFFF',
borderWidth: 0,
y: -20,
x: 0,
style: {
fontSize: '14px',
fontFamily: 'Helvetica, Sans-Serif',
//fontStyle: 'italic'
},
formatter: function() {
return (this.y * 1000).toFixed(0) + " rpm"
}
},
dial: {
backgroundColor: dialColor,
baseLength: '90%',
baseWidth: 7,
radius: '100%',
topWidth: 3,
rearLength: '-74%',
borderColor: '#631210',
borderWidth: 1
},
pivot: {
radius: '0'
}
}]
}, // end document
function(chart) {
// 2nd pane center
var pane = chart.panes[1].center;
chart.ledBox = chart.renderer.rect(pane[0]-50, pane[1], 120, 80, 3).attr({
fill: 'rgba(229,137,100, 0)',
}).add();
diagramInterval18 = setInterval(function () {
var val = (CRANK === undefined) ? null : CRANK;
var speed = (dash_kmt === undefined) ? null : dash_kmt;
if (val !== null) {
chart.series[1].points[0].update(val);
}
if (speed !== null) {
chart.series[0].points[0].update(speed);
}
if (val === null && speed === null) {
clearInterval(diagramInterval18);
}
}, 0);
}); // end function(chart)
}); // end document
// CTS sensor
FusionCharts.ready(function () {
var chart = new FusionCharts({
animation: {
duration: 800 //animasjonen på speedometeret
},
type: 'cylinder',
renderAt: 'chart-container1',
id: 'fluid_temperature_water',
width: '70',
height: '180',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"subcaptionFontBold": "1",
"lowerLimit": "60",
"upperLimit": "120",
"numberSuffix": "",
"bgColor": "#000000",
"showBorder": "0",
"thmFillColor": "#993333",
"BgAlpha": "91.9",
"showTickMarks":"1",
"showTickValues":"0",
"baseFontColor":"FFFFFF"
//"animation":'0' //fjerne all animasjon for cylinderen
},
"value": CTS },
"events": {
"rendered" : function (evtObj, argObj){
diagramInterval18 = setInterval(function () {
FusionCharts.items["fluid_temperature_water"].feedData("&value="+CTS);
}, 1000);
}
}
})
.render();
});
// FPS sensor
FusionCharts.ready(function () {
var chart = new FusionCharts({
animation: {
duration: 800 //animasjonen på speedometeret
},
type: 'cylinder',
renderAt: 'chart-container2',
id: 'fuel-cylinder',
width: '70',
height: '180',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"subcaptionFontBold": "1",
"lowerLimit": "0",
"upperLimit": "30",
"numberSuffix": "",
"bgColor": "#000000",
"showBorder": "0",
"thmFillColor": "#993333",
"BgAlpha": "91.9",
"showTickMarks":"1",
"showTickValues":"0",
"baseFontColor":"FFFFFF"
//"animation":'0' //fjerne all animasjon for cylinderen
},
"value": FPS },
"events": {
"rendered" : function (evtObj, argObj){
diagramInterval18 = setInterval(function () {
FusionCharts.items["fuel-cylinder"].feedData("&value="+FPS);
}, 1000);
}
}
})
.render();
});
// MAP Sensor
function time_updater(){
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
document.getElementById("time").innerHTML = ("<p>" + hours + ":" + minutes + " " + "</p>");
}
// setInterval(time_updater, 1000);
diagramInterval18 = setInterval(function() {
$("#map").html("Manifold Absolute Pressure: " + MAP);
}, 500);
}
If the information here is not clear, please ask for what you need then I will insert it here.


Why not just import <script src="js/diagram18.js"></script> in page1.html only?
After this, try doing $('#page').empty() to clear all children from that element (when the user moves on to other pages): all of that element's content should be gone, even any script that page1.html may have loaded. Hope it helps...

Related

How to make ECharts text and legend area options responsive to different screen sizes?

In this case I'm using ECharts for react library to visualize data using a pie chart. When the screen size increases the graph text will remain as the same size. canvas size is changing but the other texts are not changing.
So, I want to make those text and legend area responsive when the screen size is increasing.
const optionPieChart = { color: [ '#2B6AA9', '#2845AB', '#F8FAFF', '#4EBDDE' ], title: { text: 'Conversation Type', left: 'left', top: '10%', padding: 15, textStyle: { color: '#ffffff', opacity: '0.7', fontWeight: '400', fontFamily: 'poppins', fontSize: '18px' } }, tooltip: { trigger: 'item' }, legend: { itemGap: 10, show: true, padding: 15, orient: 'vertical', left: 'left', top: '50%', itemWidth: 15, textStyle: { color: '#C4D8FF', fontFamily: 'poppins', fontSize: '14px' } }, series: [ { // name: 'Access From', type: 'pie', radius: '80%', padding: '0', left: '160', data: [ { value: 1048, name: 'FAQs' }, { value: 735, name: 'Small Talks' }, { value: 580, name: 'Product inquiries' }, { value: 484, name: 'Escalate Hop' }, ], label: { show: false }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], backgroundColor: { type: 'radial', x: 0.3, y: 0.3, r: 0.8, colorStops: [ { offset: 0, color: '#122C44' }, { offset: 1, color: '#133351' } ] }, };
I tried some media quaries but didn't work.

You can do this with window.onresize event
var chartEl = echarts.init(document.getElementById('someId'));
var option = {
... // chart options
};
chartEl.setOption(option);
window.onresize = function () {
var width = document.getElementById('someId').offsetWidth;
var fontSize = width / 80 + 'px';
var legendWidth = width / 4 + 'px';
chartEl.setOption({
textStyle: {
fontSize: fontSize
}
});
chartEl.setOption({
legend: {
width: legendWidth
}
});
};

How to position custom tooltips on mouseover, equivalent to default tooltip by using chart.renderer.text on event load in chart property

I've created a custom tooltip (white background, black text) when mouseover title.
I create a load function on events, using chart.renderer.text and positioned center of chart. But i would like my tooltip to follow the mouse when "mouseover" title, likewise with highcharts tooltip on points in the chart.
As highcharts title is a span element and not a data point, I can't use tooltip default function.
How do I position my tooltip to title span element? Please see fiddle:
https://jsfiddle.net/marialaustsen/w4k87jyo/
var ranges = [
[-315622800000, -0.2408609, -0.1937498],
[-284000400000, -0.2066399, -0.1349633],
[-252400303000, -0.2413356, -0.1261202],
[-220864303000, -0.3176987, -0.1810053],
[-189328303000, -0.4309874, -0.2753718],
[-157705903000, -0.2806764, -0.13673],
[-126169903000, -0.2479743, -0.1690026],
[-94633903000, -0.2753191, -0.1816201],
[-63097903000, -0.1408235, -0.08435556],
[-31475503000, -0.2512668, -0.1149224],
[31596497000, -0.2825769, -0.148437],
[63132497000, -0.2823197, -0.2037938],
[94754897000, -0.09643359, 0.03295682],
[126290897000, -0.281654, -0.2110296],
[157826897000, -0.3120279, -0.2342878],
[189362897000, -0.294176, -0.1824594],
[220985297000, -0.1799132, -0.09212867],
[252521297000, -0.01628482, 0.08050994],
[284057297000, -0.08310624, 0.026883],
[315593297000, -0.06155353, 0.01404597],
[347215697000, -0.05226778, 0.09032121],
[378751697000, -0.1971111, -0.06158315],
[410287697000, -0.1459778, -0.02733667],
[441823697000, -0.197513, -0.1444241],
[473446097000, -0.1752219, -0.004927497],
[504982097000, -0.06020115, 0.04069498],
[536518097000, 0.02077712, 0.1431516],
[568054097000, 0.01049873, 0.1441043],
[599676497000, -0.06178449, 0.02140319],
[631212497000, 0.1006601, 0.16657],
[662748497000, 0.1378711, 0.2378923],
[694220400000, -0.07528869, 0.05768261],
[725842800000, -0.1404296, 0.03590908],
[757378800000, -0.05985879, 0.0664241],
[788914800000, 0.1580115, 0.2895567],
[820450800000, 0.01749986, 0.113983],
[852073200000, 0.05137634, 0.139564],
[883609200000, 0.3796172, 0.4717335],
[915145200000, 0.05874969, 0.1611843],
[946681200000, 0.07699493, 0.1700459],
[978303600000, 0.09742911, 0.2219135],
[1009839600000, 0.3231945, 0.4256165],
[1041375600000, 0.3584458, 0.5381736],
[1072911600000, 0.3219613, 0.4200903],
[1104534000000, 0.3028862, 0.4872178],
[1136070000000, 0.2818642, 0.4433356],
[1167606000000, 0.2753396, 0.2993396],
[1199142000000, 0.1016727, 0.1561865],
[1230764400000, 0.1421884, 0.188136],
[1262300400000, 0.3960869, 0.4253292],
[1293836400000, 0.08512741, 0.1863386],
[1325372400000, 0.1859731, 0.2682165],
[1356994800000, 0.389729, 0.5635341],
[1388530800000, 0.287804, 0.4060001],
[1420066800000, 0.399705, 0.5534601],
[1451602800000, 0.6159819, 0.6743248],
[1483225200000, 0.5742405, 0.661474],
[1514761200000, 0.5399001, 0.6114452]
],
midranges = [
[-315622800000, -0.2184705, -0.206202],
[-284000400000, -0.1999558, -0.1942447],
[-252400303000, -0.162079, -0.1395678],
[-220864303000, -0.2275385, -0.2023986],
[-189328303000, -0.3017941, -0.2794814],
[-157705903000, -0.2674059, -0.2142369],
[-126169903000, -0.236345, -0.1855258],
[-94633903000, -0.2423138, -0.1929999],
[-63097903000, -0.1141278, -0.08552658],
[-31475503000, -0.2052396, -0.1841571],
[31596497000, -0.2666847, -0.2537797],
[63132497000, -0.2455502, -0.2108166],
[94754897000, -0.08606912, -0.05789221],
[126290897000, -0.2770694, -0.2230173],
[157826897000, -0.301831, -0.245429],
[189362897000, -0.2415157, -0.2263551],
[220985297000, -0.1445465, -0.1026627],
[252521297000, -0.002124243, 0.04977401],
[284057297000, 0.01136355, 0.02368604],
[315593297000, -0.02714447, -0.009183146],
[347215697000, -0.03374328, 0.01723201],
[378751697000, -0.1531832, -0.08042887],
[410287697000, -0.07963118, -0.03845775],
[441823697000, -0.17972, -0.1595059],
[473446097000, -0.1295439, -0.03657699],
[504982097000, -0.0554782, -0.04038309],
[536518097000, 0.05867161, 0.1321761],
[568054097000, 0.04968223, 0.1257274],
[599676497000, -0.0589936, -0.006304938],
[631212497000, 0.1388284, 0.1635819],
[662748497000, 0.152022, 0.2352976],
[694220400000, -0.03502923, 0.04075381],
[725842800000, -0.1136759, 0.01325552],
[757378800000, -0.03579155, 0.03047966],
[788914800000, 0.1958629, 0.2298041],
[820450800000, 0.0601462, 0.07727504],
[852073200000, 0.0573891, 0.1240177],
[883609200000, 0.3878401, 0.4501741],
[915145200000, 0.120206, 0.1338366],
[946681200000, 0.09684783, 0.1409384],
[978303600000, 0.1417549, 0.2172643],
[1009839600000, 0.3463299, 0.3858525],
[1041375600000, 0.4588, 0.4949837],
[1072911600000, 0.3398826, 0.3961508],
[1104534000000, 0.3668142, 0.4720009],
[1136070000000, 0.3217134, 0.3849795],
[1167606000000, 0.2786052, 0.2919385],
[1199142000000, 0.1179707, 0.1482561],
[1230764400000, 0.1554107, 0.1809372],
[1262300400000, 0.4087261, 0.4249718],
[1293836400000, 0.1127912, 0.1619051],
[1325372400000, 0.2240146, 0.2367521],
[1356994800000, 0.3972811, 0.4682488],
[1388530800000, 0.329196, 0.3689734],
[1420066800000, 0.4728232, 0.5235964],
[1451602800000, 0.6447842, 0.6699023],
[1483225200000, 0.5991459, 0.6276736],
[1514761200000, 0.5731335, 0.5976004]
],
observations = [
[-315622800000, -0.125027967],
[-284000400000, -0.133224861],
[-252400303000, -0.197758772],
[-220864303000, -0.331218885],
[-189328303000, -0.373631621],
[-157705903000, -0.226318323],
[-126169903000, -0.255212388],
[-94633903000, -0.257971262],
[-63097903000, -0.081025598],
[-31475503000, -0.173977982],
[31596497000, -0.281273127],
[63132497000, -0.183436095],
[94754897000, 0.055941514],
[126290897000, -0.278558516],
[157826897000, -0.200998486],
[189362897000, -0.469871227],
[220985297000, -0.106479309],
[252521297000, -0.14627142],
[284057297000, -0.104259949],
[315593297000, -0.02087272],
[347215697000, -0.072292756],
[378751697000, -0.073050476],
[410287697000, 0.107439219],
[441823697000, 0.012630117],
[473446097000, -0.038703932],
[504982097000, -0.066400826],
[536518097000, 0.063566479],
[568054097000, 0.136294049],
[599676497000, 0.023849885],
[631212497000, 0.195750464],
[662748497000, 0.084860468],
[694220400000, -0.13771961],
[725842800000, -0.019893232],
[757378800000, -0.002683881],
[788914800000, 0.167108316],
[820450800000, 0.106736819],
[852073200000, 0.075128975],
[883609200000, 0.403869158],
[915145200000, 0.175163852],
[946681200000, 0.117469801],
[978303600000, 0.2271733],
[1009839600000, 0.27220394],
[1041375600000, 0.413409872],
[1072911600000, 0.264274741],
[1104534000000, 0.323817598],
[1136070000000, 0.347397113],
[1167606000000, 0.354140463],
[1199142000000, 0.252877549],
[1230764400000, 0.341797012],
[1262300400000, 0.53463092],
[1293836400000, 0.36467825],
[1325372400000, 0.159806498],
[1356994800000, 0.281102946],
[1388530800000, 0.412804597],
[1420066800000, 0.475081416],
[1451602800000, 0.674438445],
[1483225200000, 0.579642985],
[1514761200000, 0.317730373]
]
$(function() {
function reloadFlash() {
$("#flash").fadeIn();
}
function hideFlash() {
$("#flash").fadeOut();
}
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ['#79ea61', '#2b908f', '#F09448', '#6E8CD0', '#aaeeee', '#ff0066',
'#f45b5b', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#eeaaee'
],
chart: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, '#152036'],
[1, '#1b2a47']
]
},
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#1b2a47'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '1.4em'
}
},
xAxis: {
gridLineColor: '#546c9b',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#546c9b',
minorGridLineColor: '#546c9b',
tickColor: '#546c9b',
title: {
style: {
color: '#E0E0E3'
}
}
},
yAxis: {
gridLineColor: 'rgba(84, 108, 155, 0.5)',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: 'rgba(84, 108, 155, 0.5)',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#E0E0E3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#1b2a47'
}
},
credits: {
style: {
color: '#E0E0E3'
}
},
labels: {
style: {
color: '#E0E0E3'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#1b2a47',
states: {
hover: {
fill: '#546c9b'
},
select: {
fill: '#546c9b'
}
}
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#1b2a47',
stroke: '#000000',
style: {
color: '#E0E0E3'
},
states: {
hover: {
fill: '#546c9b',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
},
select: {
fill: '#071023',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
}
}
},
inputBoxBorderColor: '#E0E0E3',
inputStyle: {
backgroundColor: '#152036',
color: '#E0E0E3',
fontWeight: 'bold',
states: {
hover: {
fill: '#546c9b',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
},
select: {
fill: '#071023',
stroke: '#000000',
style: {
color: '#FFFFFF'
}
}
}
},
labelStyle: {
color: '#E0E0E3'
}
},
navigator: {
handles: {
backgroundColor: '#1b2a47',
borderColor: '#7798BF',
},
outlineColor: '#546c9b',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#546c9b'
},
xAxis: {
gridLineColor: '#546c9b',
labels: {
style: {
color: '#FFF',
fontWeight: 'bold'
}
}
},
},
scrollbar: {
barBackgroundColor: '#1b2a47',
barBorderColor: '#1b2a47',
buttonArrowColor: '#FFF',
buttonBackgroundColor: '#1b2a47',
buttonBorderColor: '#1b2a47',
rifleColor: '#FFF',
trackBackgroundColor: '#152036',
trackBorderColor: '#152036'
},
// special colors for some of the
/*legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#FFF',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'*/
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function() {
var chart = this
if (grossLabel) {
grossLabel.destroy();
}
var newX = chart.plotWidth / 2,
newY = chart.plotHeight / 8;
var grossLabel = chart.renderer.text('<div id="flash"></div>', newX, newY, true)
.attr({
zIndex: 10
}).add();
}
}
},
title: {
useHTML: true,
text: 'Global mean surface Temperature',
events: {
mouseover: function() {
reloadFlash();
$('#flash').html('Global mean Surface temperature anomalies with respect to 1970-2000')
},
mouseout: function() {
hideFlash();
},
}
},
subtitle: {
text: 'CRPSS = 0.3 ACC= 0.6'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Temperature'
}
},
/*
annotations: [{
labels: [{
point: {
x: 0,
y: 0,
},
shape: 'rect',
text: '0.6'
}],
labelOptions: {
padding: 8,
borderRadius: 5,
backgroundColor: '#FFF',
borderWidth: 1,
borderColor: 'rgba(84, 108, 155, 1)',
align: 'left',
allowOverlap: true,
verticalAlign: 'top',
}
}],*/
/*
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
*/
tooltip: {
xDateFormat: '%Y-%m-%d',
headerFormat: '<span style="font-size: 16px">{point.key}</span><br/>',
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.y}</span><br/>',
crosshairs: true,
shared: true,
useHTML: true,
valueSuffix: ' C',
},
legend: {
enabled: true
},
series: [{
name: 'Observations',
data: observations,
zIndex: 0,
lineWidth: 0,
marker: {
fillColor: 'white',
}
}, {
name: 'MIN - MAX',
data: ranges,
type: 'arearange',
lineWidth: 0,
fillOpacity: 0.5,
zIndex: 1,
marker: {
enabled: false
},
tooltip: {
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
valueSuffix: ' C',
},
}, {
name: 'HINDCAST (33%) - SPREAD (66%)',
data: midranges,
type: 'arearange',
lineWidth: 0,
fillOpacity: 0.5,
zIndex: 2,
marker: {
enabled: false
},
tooltip: {
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.low} - {point.high}</span><br/>',
valueSuffix: ' C',
},
}, {
name: 'BOXPLOT',
type: 'boxplot',
fillColor: '#6E8CD0',
lineWidth: 2,
medianWidth: 0,
stemColor: '#6E8CD0',
stemDashStyle: 'solid',
stemWidth: 2,
whiskerColor: '#6E8CD0',
whiskerLength: '75%',
whiskerWidth: 2,
zIndex: 3,
data: [
[1577833200000, 0.5729389, 0.6131609, 0.61648345, 0.6465600, 0.660028],
],
tooltip: {
pointFormatter: function() {
const x = this.x;
const currentData = this.series.data.find(data => data.x === x);
const boxplotValues = currentData ? currentData.options : {};
return `<span style="font-size: 14px; color: #aaeeee">
Max: ${boxplotValues.high}<br>
Q3: ${boxplotValues.q3}<br>
Median: ${boxplotValues.median}<br>
Q1: ${boxplotValues.q1}<br>
Low: ${boxplotValues.low}<br></span>`;
}
}
}]
}
/*, function (chart) { // on complete
var point = chart.series[0].points[0];
chart.renderer.label('CRPSS = 0.3 ACC = 0.6', 5, 5, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.css({
color: '#000000',
fontWeight: 'bold',
fontSize: '1.4em'
})
.attr({
fill: 'rgba(255, 255, 255, 0.9)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}*/
);
});
````

You can create a custom tooltip as you did by using SVGRenderer using rect and text inside it. Highcharts allows combining SVG elements into a group and use SVGElement methods on it like show() and hide() that allows you to toggle the custom tooltip. Also to make the tooltip follow the mouse the on() method will be helpful to add an event listener on title element and translate() to change the position of it. Check the code and demo posted below.
Code:
chart: {
events: {
load: function() {
var chart = this,
title = chart.title,
titleBBox = title.getBBox(),
gTooltip = chart.renderer.g().add(),
textSvg,
textSvgBBox;
textSvg = chart.renderer
.text(
'Global mean Surface temperature anomalies with respect to 1970-2000' +
'<br>' + 'more text, more text more text more text',
titleBBox.x,
title.alignAttr.y + titleBBox.height
)
.css({
fill: '#fff'
})
.add(gTooltip);
textSvgBBox = textSvg.getBBox();
chart.renderer.rect(
titleBBox.x - 15,
title.alignAttr.y + titleBBox.height - 20,
textSvgBBox.width + 20,
textSvgBBox.height + 20
).attr({
fill: 'rgba(0, 0, 0, 0.8)',
stroke: 'black',
'stroke-width': 1
}).add(gTooltip);
textSvg.toFront();
gTooltip.hide();
title.on('mousemove', function(e) {
gTooltip.show().toFront();
gTooltip.translate(e.x - textSvgBBox.x, e.y - 10);
});
title.on('mouseleave', function(e) {
gTooltip.hide();
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/yx6738q4/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#g
https://api.highcharts.com/class-reference/Highcharts.SVGElement#add
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate

How to add labels for highcharts activity gauge for each series

I need to add custom labels for the solid gauge high charts as shown in the fiddle - http://jsfiddle.net/195gmh5k/1/
$(function () {
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
plotLines: [{
color: 'red', // Color value
value: 0, // Value of where the line will appear
width: 2, // Width of the line,
zIndex: 10
}, {
color: 'red',
value: 33.3,
width: 2,
zIndex: 10
}, {
color: 'red',
value: 66.6,
width: 2,
zIndex: 10
}]
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: [{
name: 'Move',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: 80
}]
}, {
name: 'Exercise',
borderColor: Highcharts.getOptions().colors[1],
data: [{
color: Highcharts.getOptions().colors[1],
radius: '75%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
borderColor: Highcharts.getOptions().colors[2],
data: [{
color: Highcharts.getOptions().colors[2],
radius: '50%',
innerRadius: '50%',
y: 50
}]
}]
},
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback() {
// Move icon
this.renderer.label('hello1', 180, 35, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Exercise icon
this.renderer.label('hello2', 180, 65, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
// Stand icon
this.renderer.label('hello3', 180, 100, 'rect', 0, 0, true, true, '')
.add(this.series[2].group);
});
});
I am using Renderer.label api to specify the position of labels.
Currently I tried locating the x and y coordinates on trial and error basis.
What is the more efficient (basis method) way to specify the coordinates for the labels. I need to specify that align all the labels along the vertical plot line at different gauges.

I found a better solution and cleanest:
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '50%',
events: {
render: renderIcons,
redraw: function () {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
},
},
legend: {
enabled: true
},
title: {
text: 'My chart',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true,
showInLegend: true,
//colors: ['#F62366', '#9DFF02', '#0CCDD6'],
}
},
series: [{
name: 'Move',
colorByPoint: true,
marker: {
fillColor: '#7cb5ec',
},
data: [{
color: '#7cb5ec',
radius: '112%',
innerRadius: '88%',
y: 80
}],
}, {
name: 'Exercise',
marker: {
fillColor: '#f7a35c',
},
data: [{
color: '#f7a35c',
radius: '87%',
innerRadius: '63%',
y: 65
}],
}, {
name: 'Stand',
marker: {
fillColor: '#90ee7e'
},
data: [{
color: '#90ee7e',
radius: '62%',
innerRadius: '38%',
y: 50
}],
}],
});
Now, the function renderIcons can render a label as icon:
function renderIcons() {
for (var i = 0; i < this.series.length; i++){
if (!this.series[i].icon) {
this.series[i].icon = this.renderer.label(this.series[i].yData[0]+'%', this.series[i].data[0].x, this.series[i].data[0].y, 'rect')
.attr({
zIndex: 10,
fontColor:'#FFFF'
})
.add(this.series[2].group);
this.series[i].icon.translate(
this.chartWidth / 2 - 5,
this.plotHeight / 2 - this.series[i].points[0].shapeArgs.innerR -
(this.series[i].points[0].shapeArgs.r - this.series[i].points[0].shapeArgs.innerR) / 2
);
}
}
}
And this function is for add legends with the color´s series:
Highcharts.Legend.prototype.colorizeItem = function(item, visible) {
item.legendGroup[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
if (!this.chart.styledMode) {
var legend = this,
options = legend.options,
legendItem = item.legendItem,
legendLine = item.legendLine,
legendSymbol = item.legendSymbol,
hiddenColor = legend.itemHiddenStyle.color,
textColor = visible ?
options.itemStyle.color :
hiddenColor,
symbolColor = visible ?
(item.color || hiddenColor) :
hiddenColor,
markerOptions = item.options && item.options.marker,
symbolAttr = {
fill: symbolColor
};
if (legendItem) {
legendItem.css({
fill: textColor,
color: textColor // #1553, oldIE
});
}
if (legendLine) {
legendLine.attr({
stroke: symbolColor
});
}
if (legendSymbol) {
// Apply marker options
if (markerOptions) { // #585
symbolAttr = item.pointAttribs();
if (!visible) {
// #6769
symbolAttr.stroke = symbolAttr.fill = hiddenColor;
}
}
legendSymbol.attr(symbolAttr);
}
}
Highcharts.fireEvent(this, 'afterColorizeItem', {
item: item,
visible: visible
});
}
Regards.

How to find series name in Highcharts for mouseOut-event?

I have an mouseOver and mouseOut event for my series, so that the line color of default-grey changes to red when a mouse hovers over it, and back to grey when the mouse is moving on. Now, I'd like to include some kind of {if} routine in order to change the line color from red to grey or black depending on the series name. But what would be the right command to check for the series-name? I tried it with "series.name", with "graph.attr.name", and others, but in vain.
Here is the fiddle.
And the code:
$(function () {
var chart = new Highcharts.Chart({
chart:
{
renderTo: "container",
type: "line"
},
title:
{
text: "Improved Drinking Water Coverage - Percentage of Total Population",
align: "center",
y: 20,
style:
{
fontFamily: "Arial",
fontSize: "20px",
fontWeight: "bold",
color: (Highcharts.theme && Highcharts.theme.textColor) || "black"
}
},
subtitle:
{
text: "200 countries comparison",
align: "center",
y: 40,
style:
{
fontFamily: "Arial",
fontSize: "12px",
fontWeight: "",
color: (Highcharts.theme && Highcharts.theme.textColor) || "black"
}
},
xAxis:
{
categories: ['1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012'],
labels:
{
step: 2
},
tickWidth: 0,
endOnTick: true,
showLastLabel: true
},
yAxis:
{
title:
{
text: "% of Population",
align: "high",
endOnTick: false,
maxPadding: 0.2,
rotation: 0,
x: 0,
y: -20
},
min: 0,
max: 100
},
legend:
{
enabled: false
},
tooltip:
{
crosshairs: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><br />',
pointFormat: '<span style="color: #ef0012"><b>{series.name}:</b></span>' + ' {point.y}',
footerFormat: ''
},
plotOptions:
{
series:
{
connectNulls: true,
shadow: false,
lineWidth: 1,
marker:
{
enabled: false
},
events:
{
mouseOver: function()
{
this.graph.attr('stroke', '#FF0000');
},
mouseOut: function()
{
// =========================================================
// =========================================================
// =========================================================
// Here should go what color it goes back to...
if {series.name == "Africa"}
{
this.graph.attr('stroke', 'rgba(255, 100, 100, 0.5)');
}
else
{
this.graph.attr('stroke', 'rgba(100, 100, 100, 0.2)');
}
// =========================================================
// =========================================================
// =========================================================
}
}
}
},
series:
[ {
color: 'rgba(100, 100, 100, 0.2)',
data: [null,5,5,5,5,5,8,12,15,19,22,26,29,33,36,40,43,47,50,54,57,61,64],
name: "Afghanistan"
},
{
color: 'rgba(200, 100, 100, 0.8)',
data: [53,53,54,55,56,57,57,58,59,60,60,61,61,62,63,63,64,65,65,66,66,68,68],
name: "Africa"
}]
});
});
Thanks for any hints.

"This" object is serie, so only what you need is refer to the this.name.
mouseOver: function () {
var color;
if(this.name === 'Africa')
color = 'green';
else
color = 'red';
this.graph.attr('stroke', color);
},
Example: http://jsfiddle.net/f3rgendb/2/

Add series total to legend in Highcharts

Using Highcharts.js - I want to add the series total to the legend (where it currently says '12345'). I know enough that I need to write a labelFormatter function, but I don't know enough JavaScript to figure out how to sum up the total of each series. Code is below (also live version here: http://jsbin.com/ukabob/8).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: '#E9E7DC',
borderRadius:0,
margin: [0, 150, 30, 0]
},
colors: ['#A74B59', '#46C4B7', '#EDBA70'],
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ['2013', '2014', '2015', '2016', '2017', '2018',
'2019', '2020', '2021', '2022'],
gridLineWidth:1,
gridLineColor: '#FFFFFF',
labels: {
style: {
color: '#000000'
},
formatter: function() {
return '<div style="font-size:22px; font-family: \'Advent Pro\', sans-serif;">'+
this.value +'</div>';
},
y:25
},
lineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickLength: 30
},
yAxis: {
gridLineWidth:0,
title: {
text: null
},
labels: {
enabled: false
}
},
plotOptions: {
series: {
marker: {
radius: 6,
lineWidth: 2,
lineColor: null, // inherit from series
symbol: 'circle',
states: {
hover: {
fillColor: '#E9E7DC',
lineWidth: 2,
radius:6
}
}
},
states: {
hover: {
lineWidth:4
}
}
}
},
tooltip: {
borderWidth:0,
borderRadius: 0
},
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: 12345)</span>';
}
},
series: [{
name: 'Honeywell',
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});
});

A more generic & dynamic answer:
legend: {
labelFormatter: function() {
var total = 0;
for(var i=this.yData.length; i--;) { total += this.yData[i]; };
return this.name + '- Total: ' + total;
}
}

Figured it out. I added the total to the series, then called it with this.options. See updated code below:
legend: {
borderRadius:0,
backgroundColor: '#FFFFFF',
itemMarginBottom: 7,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
x: 2,
borderWidth: 0,
width:130,
symbolPadding: 10,
useHTML:true,
shadow: {
color: '#000',
width: 3,
opacity: 0.15,
offsetY: 2,
offsetX: 1
},
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:16px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">(Total: ' + this.options.total + ')</span>';
}
},
series: [{
name: 'Honeywell',
total: 9150,
data: [700,725,750,850,950,1000,1025,1050,1050,1050]
}, {
name: 'Bombardier',
total: 10548,
data: [661,758,880,990,1065,1136,1193,1241,1289,1335]
}, {
name: 'Embraer',
total: 9301,
data: [747,789,839,861,890,908,984,1030,1097,1156]
}]
});
});

Categories