We Keep Coding

OHLC tooltip getting duplicated to volume chart also in stock chart (highstock)?

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

How do I display external API search results in a table?

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>'
);
});
}

Local Directive Vuejs arguments are undefined

I am having issues trying to wireup a directive in Vue.js based on the example online.
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Here is the directive inline with the main Vue App
const v = new Vue({
el: '#app',
data: {
message: 'hello!'
},
directives: {
demo: {
update: function (el, binding, vnode) {
console.log(el);
console.log(binding);
console.log(vnode);
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}
}
})
When I run this, whether it is using bind or update hook, el,binding,vnode are all undefined? What am I doing wrong?

The question code works correctly with Vue 2. OP was using Vue 1 unintentionally.
console.clear()
function onLifecycle(el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
const v = new Vue({
el: '#app',
data: {
message: 'hello!',
visible: false
},
directives: {
demo: {
bind: onLifecycle ,
update: onLifecycle
}
}
})
<script src="https://unpkg.com/vue#2.4.2"></script>
<div id="app">
<div v-if="visible">
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
</div>
<button #click="message='world'">Update Message</button>
<button #click="visible=!visible">Toggle Visible</button>
</div>

Print ".00" When The Result Is A Whole Number?

I want to try and print ".00" after the variables cache.todayHigh and cache.todayLow are whole numbers.
if (ddimgtooltip.showTips) {
// update tooltip
tip = 'High ' + strings.baro_info + ': ' + cache.todayHigh + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTH +
' <br> ' + strings.minimum_info + ' ' + strings.baro_info + ': ' + cache.todayLow + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTL;
if (cache.trendVal !== -9999) {
tip += '<br>' + strings.baro_trend_info + ': ' + baroTrend(cache.trendVal, data.pressunit, true) + ' ' +
(cache.trendValRnd > 0 ? '' : '') + cache.trendValRnd + ' ' + data.pressunit + '/hr';
}
$('#imgtip5_txt').html(tip);
}
e.g. 1017 hPa to 1017.00 hPa.
Is this possible?
Thanks,
William

Try this,
var yvalue = '1702 hpa';
var num = yvalue.replace(/[^0-9]+/ig,"");
value = Number(num).toFixed(2);
var fvalue= value +' '+yvalue.split(' ')[1]
console.log(fvalue);

Data Label Formatting HighCharts Tree Map

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'
}
}
}
});