We Keep Coding

Tooltip plothover doesn't appear on modal - javascript

I use flot Chart library to show a graph on a modal window.It works fine but the Tooltip popover doesn't appear when I plothover.
Here is my .js code :
$(document).on('click','a[data-target="#evolutieProdus"]',function(){
var route = 'http://www.fabricademagie.ro/metronic/comenzi/returnOrdersYear';
var productcode = $(this).data('productcode');
var productid = $(this).data('productid');
var data = {
'productcode': productcode,
'productid': productid
};
$.post(route,data,function(response){
response = jQuery.parseJSON(response);
//console.log(response);
var obj = response.an ;
var an_prezent = Object.keys(obj).map(function(e){
return [Number(e), obj[e]];
});
var obj2 = response.precedent ;
var an_precedent = Object.keys(obj2).map(function(e){
return [Number(e), obj2[e]];
});
var obj3 = response.second ;
var an_secund = Object.keys(obj3).map(function(e){
return [Number(e), obj3[e]];
});
function showChartTooltip(x, y, xValue, yValue, color) {
var _item = $('<div id="tooltip" class="chart-tooltip2">' + yValue + '<\/div>').css({
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '0px solid #ccc',
padding: '2px 6px',
'color' : color,
'border' : '1px solid #000',
'background-color': '#CCC !important'
}).appendTo("#evolutieProdus").fadeIn(300);
_item.css('left',x - (_item.width() - -20));
}
if ($('#chart_2').size() != 0) {
//$('#orders_year_loading').hide();
//$('#orders_year_content').show();
var plot_statistics = $.plot($("#chart_2"),
[{
data: an_prezent,
lines: {
show: true,
fill: false,
lineWidth: 5
},
color: '#D91E18',
shadowSize: 0,
label: " Anul <?=date('Y');?>"
},{
data: an_prezent,
points: {
show: true,
fill: true,
radius: 7,
fillColor: "#D91E18",
lineWidth: 5
},
color: '#fff',
shadowSize: 1
},{
data: an_precedent,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#00BCD4',
shadowSize: 0,
label: " Anul <?=date('Y') - 1;?>"
},{
data: an_precedent,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#00BCD4",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
},{
data: an_secund,
lines: {
show: true,
fill: false,
lineWidth: 3
},
color: '#FF9800',
shadowSize: 0,
label: " Anul <?=date('Y') - 2;?>"
},{
data: an_secund,
points: {
show: true,
fill: true,
radius: 5,
fillColor: "#FF9800",
lineWidth: 3
},
color: '#fff',
shadowSize: 1
}],
{
xaxis: {
tickLength: 0,
tickDecimals: 0,
mode: "categories",
min: 0,
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#FF5722"
}
},
yaxis: {
ticks: 5,
tickDecimals: 0,
tickColor: "#eee",
font: {
lineHeight: 34,
style: "normal",
variant: "small-caps",
color: "#6F7B8A"
}
},
grid: {
hoverable: true,
borderWidth: 0,
margin: 5
}
});
var previousPoint = null;
$("#chart_2").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
var _color = "#212121";
if(item.series.points.fillColor !== undefined && item.series.points.fillColor !== null && item.series.points.fillColor.length){_color = item.series.points.fillColor;}
showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' Bucati vandute',_color);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
}
});
});

I find the solution.I put a z-index property on my tooltip class.

Related

I am trying to figure out how to take the 3 hardcoded variables [index, fieldName, aggType] and pass data in to them from a json file dynamically, and then pass that variable into the (inData) function that I created, and then finally pass those into the charts that I have created. I am not exactly sure how to go about referencing the data and getting it into the variable. I placed my code below. Please, let me know if I can clarify this any, it is a bit confusing. Index name is the ES index, fieldname is the field to aggregate against and aggType is the type of aggregation like count, sum etc...There was a suggested answer to this question, using the forEach option, however, this was not a good fit for my situation, as it would be necessary to pass multiple lines in some queries, or singular lines in others. The forEach option would force us to deal with each option in an individual way. We wanted to be able to pass the query as a whole. Thank you for all your help. The anser I came up with is below.
mainchart.js
$('#chartType').change(function(index, val) {
buildChart($(this).val())
})
function line() {
let labels = []
let data = []
let index = 'issflightplan';
let fieldName = 'VehicleType';
let aggtype = 'count';
$.getJSON("http://localhost:3000/data/issflightplan/VehicleType/count/", function (inData) {
aggregationName = index + "|" + fieldName + "|" + aggtype
for (keyNo in inData.aggregations[aggregationName].buckets) {
labels.push(inData.aggregations[aggregationName].buckets[keyNo].key)
data.push(inData.aggregations[aggregationName].buckets[keyNo].doc_count)
}
// });
console.log(data)
var ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(450, 0, 0, 0);
gradient.addColorStop(0, 'rgb(0,99,132)');
gradient.addColorStop(1, 'rgb(255,99,132)')
var gradient2 = ctx.createLinearGradient(0, 0, 0, 450);
gradient2.addColorStop(0, 'rgb(0,50,600)');
gradient2.addColorStop(1, 'rgb(150,0,100)')
function drillDownChart(click, mydata) {
if (mydata[0]) {
var x = mydata[0]['_index'];
window.location.href = 'https://chart-js.com/'
}
};
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'My New Line Chart',
data: data,
backgroundColor: gradient,
borderColor: 'blue',
borderWidth: 1,
borderDash: [10, 5, 10, 2],
borderDashOffset: 10,
borderCapStyle: 'round',
borderJoinStyle: 'bevel',
cubicInterpolationMode: '',
fill: true,
lineTension: 0.2,
pointBackgroundColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderColor: ['red', 'yellow', 'purple', 'orange', 'green', 'blue', 'pink'],
pointBorderWidth: 3,
pointRadius: 2,
pointStyle: 'circle',
pointHitRadius: 20,
pointHoverBackgroundColor: 'purple',
pointHoverBorderColor: 'pink',
pointHoverBorderWidth: 5,
pointHoverRadius: 10,
showLine: true,
spanGaps: true,
steppedLine: false
}, {
label: ['My New Line Chart 2'],
data: data.datapoints2,
// backgroundColor: gradient2,
borderColor: gradient2,
fill: false
}]
},
// Configuration options go here
options: {
onClick: drillDownChart,
// onClick: updateChart,
legendCallback: function (line) {
var text = [];
text.push('<ul class="legendClass">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li class = style = "background: ' + chart.data.datasets[i].backgroundColor + ' ">');
text.push(chart.data.datasets.label[i]);
text.push('</li>')
}
text.push('</ul>');
return text.join("");
},
ticks: {
autoSkip: true
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
fontSize: 16,
responsive: true,
},
plugins: {
title: {
display: true,
// text: obj.title,
position: "top",
fontSize: 16,
fontFamily: "New Times Roman",
fontColor: 'blue',
fontStyle: 'bold',
padding: 10,
lineHeight: 1.2,
},
legend: {
display: true,
//need to be able to pass the options into you from the data
position: "bottom",
align: 'center',
fullWidth: true,
// onClick: alertBox,
// onHover: changeFontColor,
labels: {
boxWidth: 20,
fontSize: 10,
fontStyle: 'bold',
fontColor: 'black',
fontFamily: 'Times New Roman',
padding: 10,
usePointStyle: 'circle',
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
value: '18B',
borderColor: 'red',
borderWidth: 2
}],
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
position: 'nearest',
backgroundColor: 'rgb(0, 0, 132)',
titleFontFamily: 'New Times Roman',
titleFontSize: 16,
titleFontStyle: 'normal',
titleFontColor: '#yellow',
titleSpacing: 10,
titleMarginbottom: 15,
bodyFontFamily: 'New Times roman',
bodyFontSize: 15,
bodyFontStyle: 'normal',
bodyFontColor: 'rgb(0,15,132)',
bodySpacing: 3,
xPadding: 10,
yPadding: 10,
caretPadding: 5,
cornerRadius: 20,
// multiKeyBackground: '()',
displayColors: true,
callbacks: {
title: function (tooltipItems, data) {
// Pick first xLabel for now
var title = chartType;
var labels = data.labels;
var labelCount = labels ? labels.length : 0;
if (tooltipItems.length > 0) {
var item = tooltipItems[0];
if (item.xLabel) {
title = labels[item.index];
} else if (labelCount > 0 && item.index < labelCount) {
title = labels[item.index];
}
}
return title;
},
events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
onClick: function (event, arry) {
getcurrentfilter(event, arry)
}
}
}
}
}
}
}
});
console.log(data)
})
}
mydata.json
{
"hits": [...],
"aggregations": {
"issflightplan|VehicleType|count":{
"meta": {...},
"buckets": [
{
"key": "Progress",
"doc_count":77
},
"issflightplan|CrewSize|count": {
"meta": {...},
"buckets": [
{
"key": "",
"doc_count": 32
},

I wanted to post the answer that I came up, and it is working well, and gives the ability to add some different options to the function later on.
function line() {
let labels = []
let data = []
$.getJSON("http://localhost:3000/data/issflightplan/VehicleType/count/", function (inData) {
let aggregationName = []
for (aggName in inData.aggregations) {
console.log(aggName)
for( bucket in inData.aggregations[aggName].buckets) {
labels.push(inData.aggregations[aggName].buckets[bucket].key)
data.push(inData.aggregations[aggName].buckets[bucket].doc_count)
}
}

I don't really have a question but just to share my knowledge here.
This is a knowledge sharing on how to auto scale font size in echarts.js based on the div size.

let myChart = echarts.init(document.getElementById('myChart'));
function autoFontSize() {
let width = document.getElementById('myChart').offsetWidth;
let newFontSize = Math.round(width / 11);
console.log(`Current width : ${width}, Updating Fontsize to ${newFontSize}`);
return newFontSize;
};
const fruits = [{
value: 100,
name: "Apple(s)"
},
{
value: 200,
name: "Banana(s)"
}
];
const sum = fruits.reduce(function(prev, current) {
return prev + current.value
}, 0);
let myChartOption = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
},
tooltip: {
trigger: 'item',
textStyle: {
fontSize: '15',
},
formatter: 'You have {c} {b}'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'bottom',
padding: 0,
itemGap: 0,
textStyle: {
fontSize: '15',
},
formatter: function(name) {
var targetValue = 0;
fruits.forEach(function(c) {
if (c.name == name) {
targetValue = c.value;
}
});
return targetValue + ' ' + name;
}
},
series: [{
name: 'fruits',
type: 'pie',
center: ['50%', '40%'],
radius: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
position: 'center',
textStyle: {
fontSize: autoFontSize(),
fontWeight: 'bold'
},
color: 'black',
formatter: '' + sum,
},
labelLine: {
normal: {
show: false
}
},
data: fruits,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
myChart.setOption(myChartOption);
$(window).on('resize', function() {
if (myChart != null && myChart != undefined) {
myChart.resize({
width: 'auto',
height: 'auto'
});
myChart.setOption({
series: {
label: {
textStyle: {
fontSize: autoFontSize()
}
}
}
})
}
});
#myChart {
width: 100%;
min-height: 330px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="myChart"></div>

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

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.

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...