Develop Reference

Getting the tooltip values from Highchart graph in the source code

I want to get the Vacancies and Vacancy Rate values that appear in the tooltip when the cursor hovers over this graph, however ideally I want to grab it straight from the source code. I found a dictionary in the code, though its values are different to what appears in the tooltip.
Eg Value in dict: 34, Value in tooltip: 1
Eg Value in dict: 1055.6270096463, Value in tooltip: 15.8
I'm guessing the values are being changed by some function, though I can't find it in the code. Below is the section of code relating to the tooltip. Any help would be appreciated.
...
var xmin=$( window ).width()>1000 ? 1209564000000:1504188000000;
function _f(n) {
return 3.8*n*(1-n);
}
$(function () {
Highcharts.setOptions({
global: {
// display dates in local time (hourly graph should start at midnight if in california)
useUTC: false
},
lang: {
thousandsSep: ','
}
});
});
Highcharts.chart('hichartcontainer', {
chart: {
type: 'line',
zoomType: 'x'
},
colors: [ '#0a94ff', '#a004a0', '#ff00ff', '#a004a0', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
title: {
text: 'Residential Vacancy Rates',
},
subtitle: {
text: 'Source: SQM Research'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
},
scrollbar: {
enabled: true
},
tickInterval: 1000 * 60 * 60 * 24 * 365,
//min:xmin // enable this to have mob fone show 2 yr only
},
yAxis: [{
min: 0,
// max:200, work this out in php for fixed y axis
title: {
text: 'Vacancies'
}
},
{
min: 0,
// max:10, work this out in phpfor fixed y axis
title: {
text: 'Vacancy Rate (%)'
},
opposite:true
}
],
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
},
getExtremesFromAll:true
}
},
series: [ {
name: 'Vacancies',
type: 'column',
yAxis: 0,
tooltip: {
headerFormat: '<b>{point.key}</b><br/>',
pointFormat: '{series.name}: {point.y}',
xDateFormat:'%b %Y'
},
data: [[1209564000000,34],[1212242400000,0],[1214834400000,0],[1217512800000,0],[1220191200000,0],[1222783200000,0],[1225458000000,0],[1228050000000,0],[1230728400000,0],[1233406800000,0],[1235826000000,0],[1238504400000,0],[1241100000000,0],[1243778400000,22],[1246370400000,0],[1249048800000,1445],[1251727200000,768],[1254319200000,1330],[1256994000000,380],[1259586000000,1740],[1262264400000,2325],[1264942800000,600],[1267362000000,1440],[1270040400000,3542],[1272636000000,3283],[1275314400000,2100],[1277906400000,1508],[1280584800000,2185],[1283263200000,817],[1285855200000,2030],[1288530000000,2604],[1291122000000,750],[1293800400000,1800],[1296478800000,1540],[1298898000000,1943],[1301576400000,2772],[1304172000000,1508],[1306850400000,2185],[1309442400000,414],[1312120800000,1254],[1314799200000,2418],[1317391200000,408],[1320066000000,1190],[1322658000000,1360],[1325336400000,1020],[1328014800000,1365],[1330520400000,416],[1333198800000,1230],[1335794400000,1008],[1338472800000,1504],[1341064800000,374],[1343743200000,1386],[1346421600000,1445],[1349013600000,564],[1351688400000,1045],[1354280400000,399],[1356958800000,1239],[1359637200000,1288],[1362056400000,405],[1364734800000,1596],[1367330400000,1470],[1370008800000,1600],[1372600800000,1736],[1375279200000,1710],[1377957600000,560],[1380549600000,1392],[1383224400000,836],[1385816400000,2632],[1388494800000,396],[1391173200000,1518],[1393592400000,2295],[1396270800000,1128],[1398866400000,1995],[1401544800000,266],[1404136800000,1121],[1406815200000,2024],[1409493600000,588],[1412085600000,1140],[1414760400000,966],[1417352400000,1377],[1420030800000,708],[1422709200000,1104],[1425128400000,464],[1427806800000,858],[1430402400000,320],[1433080800000,522],[1435672800000,294],[1438351200000,1116],[1441029600000,286],[1443621600000,360],[1446296400000,1140],[1448888400000,1173],[1451566800000,1215],[1454245200000,826],[1456750800000,920],[1459429200000,203],[1462024800000,390],[1464703200000,320],[1467295200000,348],[1469973600000,126],[1472652000000,186],[1475244000000,78],[1477918800000,511],[1480510800000,1036],[1483189200000,720],[1485867600000,380],[1488286800000,280],[1490965200000,240],[1493560800000,840],[1496239200000,1547],[1498831200000,510],[1501509600000,1360],[1504188000000,682],[1506780000000,540],[1509454800000,315],[1512046800000,516],[1514725200000,184],[1517403600000,658],[1519822800000,160],[1522501200000,310],[1525096800000,270],[1527775200000,102],[1530367200000,0],[1533045600000,94],[1535724000000,190],[1538316000000,60],[1540990800000,180],[1543582800000,273],[1546261200000,30],[1548939600000,0],[1551358800000,186],[1554037200000,180],[1556632800000,36],[1559311200000,261],[1561903200000,42],[1564581600000,0]] },
{
name: 'Vacancy Rate',
type: 'line',
yAxis: 1,
tooltip: {
headerFormat: '<b>{point.key}</b><br/>',
pointFormat: '{series.name}: {point.y:,.1f}%',
xDateFormat:'%b %Y'
},
data: [[1209564000000,11.221122112211],[1212242400000,0],[1214834400000,0],[1217512800000,0],[1220191200000,0],[1222783200000,0],[1225458000000,0],[1228050000000,0],[1230728400000,0],[1233406800000,0],[1235826000000,0],[1238504400000,0],[1241100000000,0],[1243778400000,7.1661237785016],[1246370400000,0],[1249048800000,469.15584415584],[1251727200000,249.35064935065],[1254319200000,431.81818181818],[1256994000000,122.97734627832],[1259586000000,563.1067961165],[1262264400000,752.42718446602],[1264942800000,193.54838709677],[1267362000000,464.51612903226],[1270040400000,1142.5806451613],[1272636000000,1055.6270096463],[1275314400000,675.24115755627],[1277906400000,484.88745980707],[1280584800000,702.57234726688],[1283263200000,261.85897435897],[1285855200000,650.64102564103],[1288530000000,834.61538461538],[1291122000000,239.61661341853],[1293800400000,575.07987220447],[1296478800000,492.01277955272],[1298898000000,618.7898089172],[1301576400000,882.8025477707],[1304172000000,480.25477707006],[1306850400000,695.85987261146],[1309442400000,131.42857142857],[1312120800000,398.09523809524],[1314799200000,767.61904761905],[1317391200000,129.52380952381],[1320066000000,376.58227848101],[1322658000000,430.37974683544],[1325336400000,322.78481012658],[1328014800000,431.96202531646],[1330520400000,131.64556962025],[1333198800000,389.24050632911],[1335794400000,317.98107255521],[1338472800000,474.44794952681],[1341064800000,117.98107255521],[1343743200000,437.22397476341],[1346421600000,455.83596214511],[1349013600000,177.35849056604],[1351688400000,328.61635220126],[1354280400000,125.47169811321],[1356958800000,389.62264150943],[1359637200000,405.03144654088],[1362056400000,127.35849056604],[1364734800000,500.31347962382],[1367330400000,460.81504702194],[1370008800000,501.56739811912],[1372600800000,544.20062695925],[1375279200000,536.05015673981],[1377957600000,175],[1380549600000,435],[1383224400000,261.25],[1385816400000,822.5],[1388494800000,123.75],[1391173200000,472.89719626168],[1393592400000,714.95327102804],[1396270800000,351.40186915888],[1398866400000,621.4953271028],[1401544800000,82.866043613707],[1404136800000,349.22118380062],[1406815200000,628.57142857143],[1409493600000,182.60869565217],[1412085600000,354.03726708075],[1414760400000,300],[1417352400000,427.6397515528],[1420030800000,219.19504643963],[1422709200000,341.79566563467],[1425128400000,143.65325077399],[1427806800000,265.6346749226],[1430402400000,99.071207430341],[1433080800000,161.60990712074],[1435672800000,90.740740740741],[1438351200000,344.44444444444],[1441029600000,88.271604938272],[1443621600000,111.11111111111],[1446296400000,351.85185185185],[1448888400000,360.92307692308],[1451566800000,373.84615384615],[1454245200000,254.15384615385],[1456750800000,283.07692307692],[1459429200000,62.461538461538],[1462024800000,120],[1464703200000,98.159509202454],[1467295200000,106.74846625767],[1469973600000,38.650306748466],[1472652000000,57.055214723926],[1475244000000,23.926380368098],[1477918800000,156.26911314985],[1480510800000,316.81957186544],[1483189200000,220.18348623853],[1485867600000,116.20795107034],[1488286800000,85.626911314985],[1490965200000,73.394495412844],[1493560800000,256.09756097561],[1496239200000,471.64634146341],[1498831200000,155.48780487805],[1501509600000,414.63414634146],[1504188000000,207.92682926829],[1506780000000,164.13373860182],[1509454800000,95.744680851064],[1512046800000,156.83890577508],[1514725200000,55.927051671733],[1517403600000,200],[1519822800000,48.632218844985],[1522501200000,93.939393939394],[1525096800000,81.818181818182],[1527775200000,30.909090909091],[1530367200000,0],[1533045600000,28.484848484848],[1535724000000,57.401812688822],[1538316000000,18.126888217523],[1540990800000,54.380664652568],[1543582800000,82.477341389728],[1546261200000,9.0634441087613],[1548939600000,0],[1551358800000,56.024096385542],[1554037200000,54.21686746988],[1556632800000,10.843373493976],[1559311200000,78.614457831325],[1561903200000,12.650602409639],[1564581600000,0]] }
]
});
...

Adjust position of Highcharts line graph data points to be between rather than on each tick

Currently, my chart looks like this:
Currently, each data point is located on the tick i.e. at 3pm, 4pm, 5pm etc. However, the data represented are averages over hourly time periods i.e. 3-4pm, 4-5pm etc.
To accurately represent this data, I need the data points to be between each tick i.e. around the 3.30pm, 4.30pm etc. marks but I don't want to show the ticks at those positions.
How should I change my code?
Highcharts.chart('chart-container', {
chart: {
backgroundColor: null,
spacingTop: 40,
spacingRight: 55,
spacingLeft: 30,
spacingBottom: 10
},
title: null,
xAxis: {
title: {
text: '(Hour)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
offset: 0,
x: 42.5,
y: -8.75
},
type: 'datetime',
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%H:00'
},
min: startTime,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
}
},
gridLineWidth: 1,
gridLineColor: '#494A55',
lineColor: '#494A55',
tickWidth: 0
},
yAxis: {
title: {
text: '(Boxes)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
rotation: 0,
offset: 0,
y: -20,
x: -15
},
min: 0,
max: maxY, // Computed variable
tickInterval: 0.5,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
},
format: '{value:.1f}'
},
gridLineColor: '#494A55',
lineColor: '#494A55'
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointStart: startTime, // Computed variable
pointInterval: 3600 * 1000
}
},
series: chartData,
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
// Format of chartData
var chartData = [
{
name: '',
color: hexColorCode,
data: [integers]
}
];

How can I display only month end dates on the x axis with Highcharts

I have a Highcharts line chart that uses the contents of a query for its data. The data can be over one month, three months, year to date or twelve months and contains a date and a monetary value. If the data spans more than one month, it contains only month end dates. How can I get the x axis labels to only use month end dates? It seems to do it by default with the twelve month and year to date data but the three month data contains both too many dates and dates throughout the months. Code posted below.
<script type="text/javascript">
$(document).ready(function () {
// default options
var options = {
chart: {
renderTo: '#arguments.divMktValues#',
type: 'area',
width: $("###arguments.divMktValues#").width(),
height: Math.max(200, $("###arguments.tableMktValues#").height()),
spacingRight: 0,
spacingLeft: 0,
spacingBottom: 5,
spacingTop: 4
},
title: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
area: {
animation: true,
dashStyle: "solid",
marker: {enabled: true},
}
},
tooltip: {
formatter: function() {
return '' + this.key +': '+ this.point.y_formatted;
}
},
credits: {
enabled: false
},
series: [
{
data: [
<cfoutput query="arguments.qryMktValues">
{
name: '#DateFormat(dt, "mm/dd/yyyy")#',
y_formatted: '#NumberFormat(mkt_val, "$,.00")#',
y: #mkt_val#,
x: Date.UTC(#DateFormat(dt, "yyyy")#, #DateFormat(dt, "m") - 1#,#DateFormat(dt, "d")#,0,0,0)
}<cfif CurrentRow neq RecordCount>,</cfif>
</cfoutput>
]
}
],
xAxis: {
type: 'datetime',
gridLineWidth: 1,
dateTimeLabelFormats: {
day: '%m/%d/%y',
week: '%m/%d/%y',
month: '%m/%d/%y'
},
labels: {
overflow: 'justify',
rotation: -45,
align: 'right',
formatter: function() {
var d = new Date(this.value);
var dstr = d.toLocaleDateString();
return dstr.slice(0,-4) + dstr.substr(dstr.length - 2);
}
}
},
yAxis: {
title: {text:'Market Value'},
gridLineWidth: 1,
labels: {
y: 8,
formatter: function() {
if (this.value >= 1000000) {
return '$' + (this.value / 1000000) + 'M';
}
else {
return '$' + this.value;
}
}
}
}
};
var chart1 = new Highcharts.Chart(options);
});
</script>

X axis shows the time from 12 till 12:55 instead of dates

This code generates a highchart with 2 Y axis and 1 X:
$('#main_chart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Overview'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Y2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Y1',
data: y1Data
}
,{
name: 'Y2',
data: y2Data
}
]
});
y1Data and y2Data are the arrays of arrays [[1426525200, 2], [1426611600, 0], [1426698000, 0]...] where the 1st element is date. The dates are sequent with a step of 1 day:
1 Mar 2015, 2 Mar 2015, 3 Mar 2015....
However, I see only time from 12:00 till 12:55 on X and nothing else:
What I want to see is the dates 1 Mar 2015, 2 Mar 2015, 3 Mar 2015.... EndDate. Moreover, why is there minus $20? There're no negative values in the data set.

When defining data, either provide timestamp in miliseconds (not seconds) or use JavaScript Date object instead:
var y1Data = [[new Date(), 2], [1426611600000, 0], [Date.UTC(2010, 2, 1), 0]];
To answer your $-20 question, Highcharts use their own algorithm to guess the most appropriate axis minimums a maximus. If you're not happy with it, simply set
yAxis: {
min: 0,
...
}

High charts showing the composition of count as tooltip

I have a chart as below.
http://jsfiddle.net/Mn6sB/4/
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'column',
marginTop:50,
spacingBottom: 5,
marginBottom: 100
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
},
series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
});
});
This is a column graph showing the pass percentage.
I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?

yes this is possible and simple
pass the addl numbers in the series along with data
access them from tool tip as shown below from the formatter
tooltip:{
formatter: function() {
this.point.options.passCount
this.point.options.total
}
}
series:[{
data: [{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
}]
}]