Highchart tooltip customization - javascript

I am using highcharts and i would like to customize tooltip.
My tooltip should show the reqName and reqVersion,but currently the tooltip is showing all the values of the 'tipValue' array.
When i hover over the column it shows me tooltip on each column as (1.1,1.0,1.2,1.2)
where as I would like the tooltip to show version
1.1 for column tpReq
1.0 for column opReq
1.2 for column Rex
1.2 for column tpReq
My xVaue is an array of ['tpReq','opReq','Rex','tpReq']
My yValue is an array of [5,8,5,1]
My tipValue is an array of ['1.1','1.0','1.2','1.2']
Here is my function to draw the highcharts
function drawchar(myXAxis,myYAxis,myTooltip)
{
var xValue = JSON.parse(XAxis);
var yValue = JSON.parse(YAxis);
var tipValue = JSON.parse(myTooltip);
var reqTypeChart = new HighCharts.Chart ({
...
...
xAxis: {
categories: xValue,
title: { 'My Requests'
text: null
},
},
....
series: [{
name: 'Status',
data: yValue
}],
legend: { enabled: false },
tooltip: {
formatter: function () {
return '<b>' + this.xValue + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' +
'AppVersion: ' + tipValue ;
}
...
});
}

Try this.
function drawchar(myXAxis, myYAxis, myTooltip) {
var xValue = JSON.parse(myXAxis);
var yValue = JSON.parse(myYAxis);
var tipValue = JSON.parse(myTooltip);
var data = [];
$.each(xValue, function (index, val) {
var tempObj = {
x: val,
y: yValue[index],
tipValue: tipValue[index]
}
data.push(tempObj);
});
// **UPDATED **
data.sort(function(a, b){
if(a.x < b.x) return -1;
if(a.x > b.x) return 1; return 0;
})
var reqTypeChart = new HighCharts.Chart({
xAxis: {
title: {
text: 'My Requests'
}
},
series: [
{
name: 'Status',
data: data
}
],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.point.x + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.point.y, 0) + '</b><br/>' +
'AppVersion: ' + this.point.tipValue;
}
}
});
}
Combine all three values into one array of objects and set that array as data source in series of highchart api. You'll get passed object inside formatter method of tooltip wrapped into this.point object.

I managed to solve this problem by changing the tooltip formater. So first find the index of xValue and find the corresponding tooltip value from tipValue array.
formatter: function () {
var index = xValue.indexOf(this.xValue);
var tip = tipValue[index];
return '<b>' + this.xValue + '</b><br/>' +
'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' +
'AppVersion: ' + tip ;

Related

Why does my HighStock data drop off when I zoom out?

I have a JsFiddle here:
http://jsfiddle.net/hh3ocm4t/
In the initial view, the tooltip shows daily volume.
The tooltip formatter code is as follows:
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
for (var i = 0; i < this.points.length; i++) {
var datum = this.points[i];
console.log(datum);
result += '<br />Original price: $' + datum.point.high.toFixed(2);
result += '<br />Dropped price: $' + datum.point.low.toFixed(2);
result += '<br />Daily volume: ' + datum.point.name;
}
return result;
}
But when I click 'all' the daily volume becomes undefined.
How do I get my daily volume to appear when I click 'All'?
By default data grouping is enabled in Highstock. The solution here is disabling it:
series: [{
name: 'Temperatures',
data: data,
dataGrouping: {
enabled: false
}
}]
Live demo: http://jsfiddle.net/kkulig/yu1ybnje/
Docs reference: https://www.highcharts.com/docs/advanced-chart-features/data-grouping
API reference: https://api.highcharts.com/highstock/plotOptions.series.dataGrouping

Don't know how to make a Dynamic jQuery CHART(flot : sin-cos)

So I am a junior and I am trying to understand how things work here.
I am using jquery.flot.js to make an interacting chart.
What I am trying to do?
I want to take this values (the values from the table) and make a chart:
#for((c,w)<- map){
<tr>
<td class="val">#c</td>
<td class="time">#w</td>
<br>
</tr>
}
I am using play framework and I get those values from my server through a map...
In #c I will get values that represents the humidity from an environment;
and
In #w I will get the timestamp from each value.
And this is the script for the chart :
$(function() {
var sin = [],
cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot("#placeholder", [
{ data: sin, label: "sin(x)"},
{ data: cos, label: "cos(x)"}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: -20,
max: 90
}
});
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #991F7A",
padding: "2px",
"background-color": "#E68AB8",
color : "#000",
opacity: 0.70
}).appendTo("body");
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
Maybe some of you played with this plug in, this is how things look :
I want to take the values from the time (#w) and put them on the axe : x , and the humidity (#c) on y ...
Can somebody help me please .... !?
Thank you.

Highcharts highstock tooltip series order

When the highcharts tooltip is shared (all series shown in the tooltip), is there a way to set the order in which the series display in the tooltip?
Yes. Each point is an object in a array called points. If you want it in reverse order you can do that via:
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points.reverse(), function () {
s += '<br/>' + this.series.name + ': ' +
this.y + 'm';
});
return s;
},
shared: true
},
If you want to do some other ordering then you need to provide more information.

Getting a value in Highcharts.js

My lack of Javascript skills are really showing here, but I am having a problem.
I have built a chart using Highcharts.js and I am trying to customize the tooltip display. It is a range chart and by default point.y returns the low value. I have no idea how to return the high value.
Can anyone help? Here is the formatter code and I have also created a jsfiddle.
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>Maximum Value: ?<br/>Minimum Value: ' + point.y
+ '<br/>Spread Value: Max-Min';
});
return s;
},
http://jsfiddle.net/cCrLh/1/
Each of objects from points array contain point property which is true object from Highcharts. Then you have access to point.high and point.low. See: http://jsfiddle.net/cCrLh/3/
tooltip: {
crosshairs: true,
shared: true,
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>Maximum Value: ' + point.point.high + '<br/>Minimum Value: ' + point.point.low
+ '<br/>Spread Value: Max-Min';
});
return s;
},
shared: true
},

How to get multiple series data in tooltip highcharts?

I want to display multiple series Data in tooltip on every column
tooltip: {
formatter: function() {
return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
'<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
}
},
and Data
series: [{
showInLegend: false,
name: 'Total Click',
data: [3000,200,50,4000],
color: '#9D9D9D'
}, {
showInLegend: false,
name: 'Total View',
data: [100,2000,3000,4000],
color: '#D8D8D8'
}]
I am using like this but in tool tip only one series data is showing at a time.
I want to display Data like this (Total View:100 and Total Click:3000 )
please try using this code
updated DEMO
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
point.y +'<span>');
});
return s.join(' and ');
},
shared: true
},
You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.shared and then in formater iterate on each point.
If anybody looking for scatterplot, here is solution to show shared tooltip.
formatter: function(args) {
var this_point_index = this.series.data.indexOf( this.point );
var this_series_index = this.series.index;
var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
var that_series = args.chart.series[that_series_index];
var that_point = that_series.data[this_point_index];
return 'Client: ' + this.point.name +
'<br/>Client Health: ' + this.x +
'<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
'<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}
Jsfiddle link to Solution

Categories