I am trying a custom tooltip to my stock chart.
Like: ( my custom tooltip formatter)
formatter: function() {
var extremes = $(element[0]).highcharts().xAxis[0].getExtremes(),
start = extremes.min,
end = extremes.max;
var toolTipObj = computeDynamicToolTip(start, end);
return ['<b>' + convertMillisToDateFormat(this.x) + '</b>'].concat(
this.points.map(function(point) {
return 'Rainfall ' + '<b>' + point.y.toFixed(2) + '<b>' +' (mm)' + '<br>'
+ 'High ' + '<b>' + toolTipObj.max.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Low ' + '<b>' + toolTipObj.min.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Average ' + '<b>' + toolTipObj.avg.toFixed(2) + '<b>' + ' (mm)';
})
);
},
But the formatter adds tooltip to both ohlc and volume, i want to create a separate tooltip for my volume chart, so I am not able to understand how to do that.
Any help would be appreciated.
Thanks
You can define a tooltip for a specific series and use pointFormatter to customize it:
series: [{
...
}, {
type: 'column',
...,
tooltip: {
pointFormatter: function() {
return 'some custom value'
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/za8126vr/
API Reference: https://api.highcharts.com/highstock/series.column.tooltip.pointFormatter
Related
How to make sure that in the tooltip, "(name)" is displayed only after the value along the axis? With the current codes "(name)" is also displayed after string "Series 1:.. (name)".
Highcharts.chart('container', {
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '(name)' + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + this.x + '</b>');
},
shared: true
}
});
Example: https://jsfiddle.net/nsdtf7ah/
Printscreen: http://joxi.ru/Dr8501zTowVWGm
If you need (name) only after Month name then replace tooltip with :
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm';
}, '<b>' + this.x + '(name)'+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/
If you need 2 (name)'s each after String N then:
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm' + '(name)';
}, '<b>' + this.x+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/1/
I am a final year student and am creating a food log web application for my major project. I have created a search function that allows me to search and display external API results, but now I wish to display them in a table, can anyone help please?
I would prefer if it would be a table that can be filtered, eg, the columns ordered ascending/descending?
Thanks
function get foodItem(userInput) {
var storedSearchItem;
$('.resultContainer').html('');
$.ajax({
type: 'GET',
async: false,
url: 'https://api.nutritionix.com/v1_1/search/'+userInput+'?'+
'fields=item_name%2Citem_id%2Cbrand_name%2Cnf_calories%2Cnf_total_fat&appId=325062a4&appKey=bf1a30b2066602dc6f33db888cd53bd3',
success: function(d) {
storedSearchItem = d.hits;
}
});
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}//ends get result function
function searchValue() {
var formVal = document.getElementById('itemSearch').value; //value from search bar
getFoodItem(formVal);
}
$('#searchForm').submit(function(e) {
e.preventDefault();
});`
You need to append your table in the success function
your code will look like something like this
success: function(d) {
storedSearchItem = d.hits;
storedSearchItem.map(function(item) {
var x = item.fields
$('.resultContainer').append(
'<div class="itemBar">'+
'<h2>' + x.item_name + '<h2>' +
'<h3>Calories: ' + x.nf_calories + '<h3>' +
'<h3>Serving Size: ' + x.nf_serving_size_qty + ' ' + x.nf_serving_size_unit +'<h3>' +
'<h3>Total Fat: ' + x.nf_total_fat + '<h3>' +
'</div>'
);
});
}
On the following JS Fiddle
I have created a chart with a step line.
step: true
I am trying to show the old data in tooltip when there is no data for the series. E.g. on mouse over on 1 July 2015, I have the data so the tooltip show the data. But if you move forwared the tooltip don't show any thing.
Is the HighChart support some thing like show latest old data if no data is present.
You should use the tooltip.formatter and then use loop to find points with the same x. If not exists then extract last point from step series. Simple demo: http://jsfiddle.net/vs6scfch.
tooltip: {
shared: false,
formatter: function() {
var x = this.x,
series = this.series.chart.series,
stepSeries = series[1],
lastPointStepSerie = stepSeries.points[stepSeries.points.length - 1],
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b %d, %Y', this.x) + '</span><br/>';
each(series, function(s,i) {
each(s.points, function(p, j) {
if(p.x === x) {
txt += '<span style="color:' + p.color + '">\u25CF</span> ' + s.name + ': <b>' + p.y + '</b><br/>'
}
});
});
if(x > lastPointStepSerie.x) {
txt += '<span style="color:' + lastPointStepSerie.color + '">\u25CF</span> ' + stepSeries.name + ': <b>' + lastPointStepSerie.y + '</b><br/>'
}
return txt;
}
},
Tipsy is used to display a lot of text when hovering over my nodes and I'd like to make that text smaller. How do I do that?
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return 'Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts ;
}
});
wrap the text that you are returning for title with a span which has style with font-size that you wish.. for example i have set the font size to 10 px you can reset it to a size which fits for your situation.
<span style="font-size:10px">+ your_title_text +</span>
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return '<span style="font-size:10px">Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts + '</span>' ;
}
});
I am using tree map but the problem is my data label are not formatting properly.
As you can see the text in the last area is cropped. how can i fix this issue ?
HTML :
<div id="divHeatMap" style="width: 1300px; height: 800px"></div>
SCRIPT :
$('#divHeatMap').highcharts({
colorAxis: {
minColor: '#FA0404', // red
maxColor: '#08F718' // green
},
series: [returnJson.Series],
title: {
text: ''
},
plotOptions: {
treemap: {
// area: { cropThreshold: 500 },
dataLabels: {
// overflow: 'right',
// crop: true,
formatter: function () {
return '<b>Name : ' + this.point.name + '</b> ' +
'<br/>' +
'<b>Price : ' + this.point.CurrentPrice + '</b> ' +
'<br/>' +
'<b>Net Change : ' + this.point.NetChange + '</b>' +
'<br/><b>% Change :' + this.point.PercentageChange + '</b>' +
'<br/>' +
'<b>Value :' + this.point.value + '</b> ' +
'<br/>';
// return '$' + this.point.name
},
color: 'white'
}
}
}
});