im using a common function to generate linechart using highchart.for certain charttype i want tooltip without any pointformat and for another in want to use formatter funcction how to acheive this.From the below code charttype 1 tooltip diappear.
tooltip: {
valueSuffix: '',
pointFormat: (chartType == 1 ? '{series.name}:
{point.y}' : '' ) ,
shared: (chartType == 1 ? true : false),
formatter: function() {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
}
else {
return false;
}
}
If you want to disable option, use null value, not empty string (''). See: http://jsfiddle.net/Yrygy/133/
However I think that it would be better to add one if-else statement, instead of three one above another, see: http://jsfiddle.net/Yrygy/134/
var chartType = 1,
tooltip = {
valueSuffix: ''
};
if (chartType == 1) {
tooltip.pointFormat = '{series.name}: {point.y}';
tooltip.shared = true;
} else {
tooltip.shared = false;
tooltip.formatter = function () {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
} else {
return false;
}
}
}
And then create chart:
chart = new Highcharts.Chart({
tooltip: tooltip,
// other options
});
Related
I have a facing problem when I have a data greater then 1000 it will make graph disturbing so I want to decrease it if it is greater the 1000 it started going to show 1k at the top of the bar in high charts
you can see it on below link
my code
Highcharts.chart('container',{chart:{type:'bar'},
title:{text:'Historic World Population by Region'},
subtitle:{text:'Source: Wikipedia.org'},
xAxis:{categories:['Africa','America','Asia','Europe','Oceania'],
title:{text:null}}, yAxis:{min:0,title:{text:'Population (millions)', align:'high'},
labels:{overflow:'justify'}}, tooltip:{valueSuffix:' millions'},
plotOptions:{bar:{dataLabels:{enabled:true}}},legend:{layout:'vertical',align:'right',verticalAlign:'top',
x:-40,y:80,floating:true,borderWidth:1,
backgroundColor:((Highcharts.theme&&Highcharts.theme.legendBackgroundColor)||'#FFFFFF'), shadow:true},
credits:{enabled:false},
series:[{name:'Year 1800',data:[107,31,635,203,2]},{name:'Year 1900',data:[133,156,947,408,6]},
{name:'Year 2000',data:[814,841,3714,727,31]},
{name:'Year 2016',data:[1216,1001,4436,738,40]}]});
You can preprocess your data and replace y values:
var series = [...];
series.forEach(function(s) {
s.data.forEach(function(point, i) {
if (point >= 1000) {
s.data[i] = {
y: 1000,
realValue: point
}
}
});
});
If you want to display the real values, you can store them and show in a tooltip and data labels:
Highcharts.chart('container', {
...,
tooltip: {
formatter: function(tooltip) {
if (this.point.realValue) {
return '<span style="font-size: 10px">' + this.x + '</span><br/>' +
'<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.realValue + '</b><br/>';
}
// If not null, use the default formatter
return tooltip.defaultFormatter.call(this, tooltip);
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return this.point.realValue ? this.point.realValue : this.y
}
}
}
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/18fe7yrw/
API Reference:
https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter
https://api.highcharts.com/highcharts/tooltip.pointFormatter
I write a new "pointFormatter" function to show the gap between 2 points, such as jsfiddle, but when I move the mouse to the first point "7.Jan", the tooltip doesn't show correctly, and I saw errorlog in console as "TypeError: this.series.data[preIndex] is undefined"
But, when I change the timeRange to "all", then the moving mouse to the first point doesn't cause any error any more, and when I change the timeRange back to "1w", it is OK also.
What is more, if I change the point num from 10 to 9 by deleting the last point, then the error doesn't occur any more.
Why? which thing caused this error?
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{type: 'week',count: 1,text: '1w'},
{type: 'all',text: 'all'}
],
selected: 0
},
series: [{
name: 'USD',
data: [
[0,null],
[86400000,null],
[86400000*2,null],
[86400000*3,null],
[86400000*4,null],
[86400000*5,null],
[86400000*6,3],
[86400000*7,4],
[86400000*8,6],
[86400000*9,8],
]
}],
plotOptions: {
line: {
step: 'left',
connectNulls: true,
tooltip: {
pointFormatter: function () {
var preIndex = this.index - 1;
while (preIndex >= 0 && this.series.data[preIndex].y == null) {
preIndex--;
}
if (preIndex < 0) {
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b><br/>';
} else {
var prePoint = this.series.data[preIndex];
var prePointY = prePoint.y;
var prePointX = prePoint.x;
var day = (this.x - prePointX) / 86400 / 1000;
var add = this.y - prePointY
add_str = '(' + add + ')';
return '<span style="color:' + this.series.color + '">\u25CF</span>' + this.series.name + ': <b>' + this.y + '</b> ' + add_str + '<br/>';
}
}
}
}
},
});
});
Highstock has data grouping feature - more information here.
This feature can change the series.data array. Instead you can use series.options.data (original data from the options) or disable dataGrouping.
plotOptions: {
line: {
dataGrouping: {enabled: false},
example: http://jsfiddle.net/6mpt8xv2/
In my rails application I have a graph with icons generated with Highcharts.
The icons are Google Material design icons that I get through a material-icons gem. https://github.com/Angelmmiguel/material_icons.
I want to do 2 things with the icons:
Instead of numeric labels I want smileys. This I got working
yAxis: {
max: 5,
min: 1,
labels: {
formatter: function () {
if (this.value == 1) {
return '<i class="material-icons">sentiment_very_dissatisfied</i>'
}
if (this.value == 2) {
return '<i class="materialicons">sentiment_dissatisfied</i>'
}
if (this.value == 3) {
return '<i class="material-icons" height="5px">sentiment_neutral</i>'
}
if (this.value == 4) {
return '<i class="material-icons">sentiment_satisfied</i>'
}
if (this.value == 5) {
return '<i class="material-icons">sentiment_very_satisfied</i>'
} else {
return this.value
}
}
}
},
Instead of numeric values in the tooltip I want smileys. This is where it goes wrong.
tooltip: {
formatter: function () {
var date = Highcharts.dateFormat('%d-%m-%y %H:%M',
new Date(this.x));
var getIcon = function (y) {
if (y == 1) {
return '<i class="material-icons">sentiment_very_dissatisfied</i>'
}
if (y == 2) {
return '<i class="material-icons">sentiment_dissatisfied</i>'
}
if (y == 3) {
return '<i class="material-icons">sentiment_neutral</i>'
}
if (y == 4) {
return '<i class="material-icons">sentiment_satisfied</i>'
}
if (y == 5) {
return '<i class="material-icons">sentiment_very_satisfied</i>'
} else {
return y
}
};
var icon = getIcon(this.y);
console.log(date);
return '<b>' + this.series.name + '</b><br/>' + date + ' : ' + icon;
},
I have to parse the date because it is a JavaScript epoch time(milliseconds). Without + icon the date is shown. If I add + icon it doesn't work and the date will not correctly render. What I noticed is that the icon is higher than the line itself. So I think this is a CSS problem, but I don't know how to fix it.
Without:With:
Thanks in advance for replying!
For using HTML in a tooltip, enable tooltip.useHTML property.
tooltip: {
useHTML: true
Also, the data must be sorted in ascending order, otherwise undesired graphical shapes might occur in a chart.
I try to make a chart with multiple series type, lines and column.
Exemple here :Jsfiddle
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function (data) {
seriesOptions[i] = {
name: name,
data: data,
};
if(name == 'GOOG'){
seriesOptions[i].type = 'column';
}
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
When i'm not zooming i have wrong data (more than normal) and when i zoom in i have the good data.
what is the problem ? i don't know why the serie type can change datas
Thanks for you help !
Defaulty the Highstock uses the dataGrouping, which groups points according to units. You can disable that by the parameter.
plotOptions:{
series:{
dataGrouping:{
enabled: true
}
}
}
High charts has double click event like?
plotOptions: {
series: {
cursor: 'pointer',
marker: {
radius: 2
},
point: {
events: {
// like this any event?If not, any alternative
dbclick: function () {
$('.highcharts-tooltip').show();
},
click: function () {
$('.highcharts-tooltip').show();
},
mouseOver: function () {
$('.highcharts-tooltip').hide();
},
mouseOut: function () {
$('.highcharts-tooltip').hide();
}
}
}
}
}
What i want to achieve is, i want to show tool tip on double click on point.
I tried using the extension, but it did not work, so I decided to write a small double click event (based on click event).
The downside is that it's encapsulated inside the 'click' event, but that's not a big issue since it calls a separate function.
First, define settings:
var doubleClicker = {
clickedOnce : false,
timer : null,
timeBetweenClicks : 400
};
Then define a 'double click reset' function in case the double click is not fast enough and a double click callback:
// call to reset double click timer
var resetDoubleClick = function() {
clearTimeout(doubleClicker.timer);
doubleClicker.timer = null;
doubleClicker.clickedOnce = false;
};
// the actual callback for a double-click event
var ondbclick = function(e, point) {
if (point && point.x) {
// Do something with point data
}
};
and in the highcharts settings of the chart:
series: [{
point: {
events: {
click: function(e) {
if (doubleClicker.clickedOnce === true && doubleClicker.timer) {
resetDoubleClick();
ondbclick(e, this);
} else {
doubleClicker.clickedOnce = true;
doubleClicker.timer = setTimeout(function(){
resetDoubleClick();
}, doubleClicker.timeBetweenClicks);
}
}
}
}
}]
You can use an extension, which allows do this.
http://www.highcharts.com/plugin-registry/single/15/Custom-Events
I used the capture of the variable as a double click parameter. And when true I cleaned the doubleclick.
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
if (clickdouble == ('Category: ' + this.category + ', value: ' + this.y)) {
alert('Category: ' + this.category + ', value: ' + this.y);
clickdouble = '';
}else{
clickdouble = 'Category: ' + this.category + ', value: ' + this.y;
}
}
}
}
}
It works for me.
You can add an ondblclick event listener at the container's dom element in which you have the chart. Currently highcharts doesn't seem to handle the event so the event will simply propagate to the container.