We started to develop in HighCharts but realised we needed to move to HighStock for the Zoom/slider functionality.
We had a graph working perfectly with the tooltip to display exactly the data we required as shown below from Highcharts.
To achieve this within in HighStock we just had the following code to format the ToolTip.
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
return '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span><br/><span style="color:' + this.color + '">\u25CF</span> <b>' + this.point.name + '</b><br/>';
}
},
We have attempted on the switch to HighStock to implement the same formatting, but all we receive through to the tooltip where it say's 'REASON_TIMED' is undefined as below.
our data object myData is created as follows :-
myData .push([Date.parse(obj.FixTimeLocal), obj.State, obj.Flags]);
This object worked correctly with the Fixtime being the X, state being the y and flags being a text description which would be populated in the ToolTip. We used keys to name the data x,y,name so we could access this.point.name. to add extra text to tooltip. Where are we going wrong ? we have tried for a couple of days now and can not get the data through.
Highcharts.stockChart('container', {
//new chart style
rangeSelector: {
selected: 1
},
title: {
text: 'Test Graph'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
title: {
useHTML: true,
text: 'Alert Type'
}
},
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
var s = '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
});
return s;
}
},
series: [{
type: 'areaspline',
keys: ['x', 'y', 'name'],
data: myData,
marker: {
enabled: true,
radius: 1.5
},
threshold: null,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.5).get('rgba')],
[1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
]
},
color: Highcharts.getOptions().colors[3],
lineWidth: 0.5,
threshold: null,
}]
});
You can do this
see your html would be
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
And code might like this
Highcharts.chart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Test Graph'
},
// Its your X data
xAxis: {
categories: ['2017/05/01', '2017/05/02', '2017/05/03', '2017/05/04', '2017/05/05', '2017/05/06','2017/05/07', '2017/05/08', '2017/05/09', '2017/05/10']
},
yAxis: {
//categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
title: {
useHTML: true,
text: 'Alert Type'
}
},
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
var s = '<span style="font-size: 10px; width:100%;">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
});
return s;
},
},
series: [{
type: 'areaspline',
// its your yAxis category
name: "Unknown",
// Its your Y Data
data: [5,10,56,22,54,35,32,26,36],
},{
type: 'areaspline',
name: "State 1",
// Its your Y Data value
data: [10,30,59,22,24,55,52,66,46],
}]
});
Here is live : https://jsfiddle.net/jalayoza/eaue85rb/6/
Hope this help
Thanks to – Grzegorz Blachliński for identifying the issue.
Within my series I had to set the following. Which is now working with my data and I can target the point.name to get it to display in the Tooltip.
dataGrouping: {
enabled: false
},
Related
I am using highcharts and made this simple line chart. When I turn off the view for a person on the legend the name still appears as a line label on the line chart. Any way I can turn that off? I attached a picture of the problem. I want only Wilson to show.
This is my code:
Highcharts.chart('chart1', {
chart: {
type: 'line'
},
title: {
text: 'Hours vs Month (' + months[0] + "-" + months[5] + ")"
},
xAxis: {
categories: months
},
yAxis: {
title: {
text: 'Hours'
}
},
tooltip: {
valueSuffix: ' hours'
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: true
}
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series :somedata
});
I have a graph which contains spline charts and scatter charts. Now on each scatter graph, there is a tooltip which has a link. Whenever i try to go on that link, the tooltip shifts off. I want that the tooltip should remain there once i click the scatter graph so that i can click the link.
$(function () {
$('#barChart').highcharts({
chart: {
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{timeZoneTime}}}]
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: '#7deda2',
yAxis: 1,
tooltip: {
pointFormatter: function(){
return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barSuccess}}]
},
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
tooltip: {
pointFormatter: function(){
return "" + toolTip[this.series.data.indexOf( this )] + "";
}
}
},
{
type: 'spline',
name: 'Failure',
tooltip: {
pointFormatter: function(){
return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
},
{{#if lu}}
{
type: 'spline',
name: 'Unknown',
tooltip: {
pointFormatter: function(){
return "Unknown: " + this.y + "%" + "<br />" + "Unknown docs: " + toolTipUnknown[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barUnknown}}],
marker: {
lineWidth: 3,
lineColor: 'blue',
fillColor: '#87CEFA'
}
}
{{/if}}
]
});
});
Now for keeping the tooltip fixed after clicking the scatter chart, there was a code on stackoverflow. BUt i don't know where to place this to make it work. I tried everywhere but it wasn't working. I just want this feature for the scatter graph. This is the code.
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
}
},
I also wanted to put some links in the tooltip of the scatter chart. I tried doing it like this but this did not work.
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
tooltip: {
pointFormatter: function(){
return "" + toolTip[this.series.data.indexOf( this )] + "";
}
}
},
Can anyone help me out in this? Been stuck at this for a long time now. Thanks.
I'm using Highstockchart to plot 4 series on a chart, the main one is a candlestick, then I've 2 series to plot priceplus, pricelower prices then another one to represent volumes.
I've got a problem since the pricelower/priceplus's tooltip shows the time as unix datetime and not in human redeable form (as you can see in this screenshot)
I want this not to be modified
How can I do this?
Thanks
Here's my JS code
function onSuccess(data) {
var r = JSON.stringify(data);
debugger;
kendo.ui.progress($('#container'), false);
$('#container')
.highcharts('StockChart',
{
exporting: {
enabled: false
},
credits:
{
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled:false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
yAxis: [
{
height: '80%',
lineWidth: 2
}, {
top: '85%',
height: '15%',
offset: 0,
lineWidth: 2
}
],
xAxis:
{
ordinal: true
}
,
series: [
{
type: 'candlestick',
name: 'Price',
data: data.Prices,
id: 'dataseries',
upColor: "#31D431",
color: "#D22F2F",
marker:{
enabled: true
}
},
{
type: 'scatter',
name: 'Prices plus',
data: data.PricesPlus
},
{
type: 'scatter',
name: 'Price less',
data: data.PricesLess
}
, {
type: 'column',
name: 'Volume',
data: data.Volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
],
width: 4,
tooltip: {
shared: false
}
});
}
You should use the tooltip.formatter and then create a content of popup. Each values can be extracted from point reference.
tooltip:{
formatter: function() {
var points = this.point ? Highcharts.splat(this.point) : this.points,
point = points[0],
each = Highcharts.each,
txt = '';
txt += '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b, %H:%M', point.x) + '</span><br/>';
each(points, function(p, i) {
if(p.point && p.point.open) {
txt += '<span style="color:' + p.color + '">\u25CF</span><b> ' + p.series.name + '</b>:<br/>Open: ' + p.point.open + '<br/>High: ' + p.point.high + '<br/>Low: ' + p.point.low + '<br/>Close: ' + p.point.close + '<br/>';
} else {
txt += '<span style="color:' + p.color + '">\u25CF</span> ' + p.series.name + ': <b>' + p.y + '</b><br/>';
}
});
return txt;
}
},
Example:
- http://jsfiddle.net/abpbyx8z/
I would like my labels to distribute evenly around my chart but they are left aligned for some reason. I inspected the element in Chrome and all but one of them of them are in an absolute position approximately 25px from the left. Also, when I downloaded the image of what it currently looks like, the image shows what appears to be overlapping labels. This is not visible while on the web page, and I'm not sure why they are in the image. Here is my code and an image.
var chart2 = new Highcharts.Chart({
chart: {
type: 'pie',
plotBorderColor: '#0574AC',
borderWidth: .5,
options3d: {
enabled: true,
alpha: 55,
beta: 0
},
renderTo: 'buRequests',
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'YTD Requests by ATO'
},
tooltip: {
pointFormat: '{point.y}' + ' Requests' + '<br>' + '{point.percentage:1.0f}%'
//percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
depth: 35,
dataLabels: {
softConnector: true,
useHTML: true,
enabled: true,
fontWeight: 'medium',
//format: '{point.name}'+ '<br>' + '{point.y}' +' Requests' + '<br>' + '{point.percentage:1.0f}%',
formatter: function() {
var req;
if (this.point.y === 1) {
req = " Request";
} else {
req = " Requests";
}
return '<span style="color:' + this.point.color + '">' + this.point.name + '<br>' + this.point.y + req + '<br>' + Math.round(this.percentage) + '%' + '</span>';
}
}
}
},
series: [{
type: 'pie',
name: 'BU Count',
data: chartData,
colors: ['#F9B112', '#EB6E00', '#42C5F1', '#0472A9', '#C1D52C', '#4AA70A']
}],
});
I have a question related to HighCharts. Below is my code for implementing a highchart with integer values on yaxis and date on x-axis. I am getting my data from database both date and values.
The x-axis date and time isn't displayed correctly. In my database it looks like that ,2015-04-27 15:26:41.463 .
var a = [];
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
xAxis[0].setCategories(x);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
categories: a
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 1);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: series
}]
});
UPDATE
This is what I have reached now
.success(function (point) {
for (i = 0; i < point.length; i++) {
myDate[i] = point[i].date_time;
value[i] = point[i].value_db;
}
for (j = 0; j < myDate.length; j++) {
var temp = new Array(myDate[j], value[j]);
mySeries[j] = temp;
}
DrawChart(mySeries, myDate, value);
})
function DrawChart(series, x, y) {
//Fill chart
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
//tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: series
}]
});
}
UPDATE2
Help Please.
You'll have to change myDate[i] = point[i].date_time; to:
myDate[i] = parseInt((point[i].date_time).substring(6, 19));
So that it will contain the UTC date format of the datetime.
Then you will have to use xAxis.labels.formatter like this:
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
return date.getFullYear() + "-" +
date.getMonth() + "-" +
date.getDate() + " " +
date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds();
}
}
}
to tell the chart how to show it's xAxis labels.
And for showing more labels in yAxis, you can use:
yAxis: {
tickInterval: 100 // if you want the labels to show every 100 values
}