http://jsfiddle.net/Margo/yKG7X/1/
I'm using the tooltip function as in fiddle.
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
}
});
I'm adding several graphlines to my graph, and i want to expand the function to show all points for all lines(should say something like:2/3 for data2 2/3 for data3) when the lines are 'over' eachother. But i dont know how to find if there are other points under the hovered point or not.
As in my fiddle example the tooltip only shows point for one of the datasets but both has point at [0, 1], [1, 2], [2, 3]
Thanks for any help!
Unfortunately, I know of no "nice" way to fix this situation. An easy workaround is to just search the points yourself:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series; // what series am I hovering?
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label; // start string with current hover
var allSeries = plot.getData();
$.each(allSeries, function(i,s){ // loop all series
if (s == hoverSeries) return; // if the loop series is my hover, just keep going
$.each(s.data, function(j,p){
if (p[0] == x){ // if my hover x == point x add to string
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
Updated fiddle here.
Running code:
var plot;
$(function() {
//Add tooltip
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series;
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label;
var allSeries = plot.getData();
$.each(allSeries, function(i,s){
if (s == hoverSeries) return;
$.each(s.data, function(j,p){
if (p[0] == x){
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
var data = [
{
label: 'data2',
color:1,
data: d2
},
{
label: 'data3',
color:2,
data: d3
}];
var conf = {
lines: { show: true },
points: { show: true },
grid: { hoverable: true, clickable: true },
};
plot = $.plot($('#placeholder'), data, conf);
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}
.graph-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
<div id="placeholder" class="graph-placeholder"></div>
</div>
Related
Defined an own table layouts using pdfmake.js. On print I want per page to contain 7 rows(fixed).I have tried adjusting the height and width of the table cell to contain 7 rows but however if the data in table cell increases the page accumulates with less/more no.of rows.
//layout of the table:
var tablelist={
style: 'tableExample',
table: {
dontBreakRows: true,
widths: [ 20,55,55,55,55,55,55,55,55,55,55,55,55],
headerRows: 1,
body: body
},
layout: {
hLineWidth: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 1 : 1;
},
vLineWidth: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 1: 1;
},
hLineColor: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 'gray' : 'gray';
},
vLineColor: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 'gray' : 'gray';
},
},
}
return tablelist;
}
//pushing the table header and other data to the table body
$scope.makePrintTable = function(){
var headers = {
col_1:{ text: 'Day', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
col_2:{ text: 'Date', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
col_3:{ text: '0600-0800', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
.
.
.//Similarly till col_13
col_13:{ text: '1700-1800', style: 'tableHeader',rowSpan: 1, alignment: 'center' ,margin: [0, 8, 0, 0]},
}
body = [];
var row = new Array();
for (var key in headers) {
row.push( headers[key] );
}
body.push(row);
for ( var j=0 ; j< $scope.table.length; j++){
var tableEach={ };
tableEach= $scope.table[j];
/*This for Genarating Object variables*/
for (var i = 1; i < 3; i++) {
window["obj"+i] = new Object();
}
var row = new Array();
var slNoValue = tableEach.slNo;
/*This is for slNo */
obj1["text"] = slNoValue;
obj1["style"]= "cellswidth";
row.push(obj1);
/*This is for Date */
var dateValue = new Date(tableEach.date);
obj2["text"]= dateValue.getDate() + '-' + basicFormats.getMonthName(dateValue.getMonth() )+ '-' + dateValue.getFullYear()+','+ basicFormats.getDayName(dateValue.getDay());
obj2["style"]= "cellswidth";
row.push(obj2);
/*This is for remaining columns (i ranges from 6 to 17 (time in 24hrs clock format) ) */
for(var i=6 ; i<=17 ; i++){
var obj={};
var hourValue = "hour_"+i+"_"+(i+1)+"_value";
var hourValueColor = "hour_"+i+"_"+(i+1)+"_"+"color_value";
hourValue = ( tableEach["hour_"+i] == undefined ? '':(tableEach["hour_"+i]));
hourValueColor =(tableEach["hour_"+i+"_colour"] == undefined ? '#ffffff':(tableEach["hour_"+i+"_colour"]));
obj["text"] = hourValue;
obj["fillColor"] = hourValueColor;
obj["style"] = "cellswidth";
row.push(obj);
console.log(obj);
}
// if( j!= 0 && j % 7 == 0){
// pageBreak : 'before'
// }
}
body.push(row);
}
};
//CSS for tablecells
cellswidth : {
fontSize: 10,
// color:'gray',
bold: true,
alignment: 'center',
margin: [0, 12.55, 0, 12.75],
},
You can use pageBreak function for it:
pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
//Here you can change the criteria according to your requirements
if (currentNode.index % 7 === 0)) {
return true;
}
return false;
},
I have the following highcharts graph
https://jsfiddle.net/deemgfay/
and I am trying to display the "Consum Test" values in the tooltip but without adding them to the series. I just want to add Consum (l/100km)
Total Consum (l) to the series. Is that possible with hightcharts? Please see the screenshot below.
You can set the extra series to be hidden and ignored in legend:
visible: false,
showInLegend: false
Then use tooltip formatter function (useHTML must be enabled) to display points from all series in the shared tooltip regardless of their visibility:
formatter: function() {
var html,
originalPoint = this.points[0];
// header
html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";
// points
originalPoint.series.chart.series.forEach(function(series) {
var point = series.points.find((p) => p.x === originalPoint.point.x);
html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
});
return html;
}
Live demo: https://jsfiddle.net/kkulig/1oggzsx0/
API references:
http://api.highcharts.com/highcharts/tooltip.formatter
http://api.highcharts.com/highcharts/tooltip.useHTML
This can be done by using tooltip.formatter. Here I append to tooltip info based on index of current series from index of required extra array.
formatter: function() {
var s = '<b>' + this.x + '</b>';
var reqpoint = 0;
$.each(this.points, function() {
var reqpoint = this.point.index
s += '<br/>' + this.series.name + ': ' +
this.y.toFixed(2) + 'm';
if (this.series.index == 1) {
s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
}
});
return s;
},
Fiddle demo
Link to JSFiddle with question content marked by comments: https://jsfiddle.net/z1q7aqo3/
Specifically, the part which needs filling in is
'tooltip': {
'formatter': function(){
var output = '<strong>' + this.y + '</strong>';
var sorted = this.points.sort(function(a, b){
if (a.y == b.y){
return 0;
}
return a.y < b.y ? 1 : -1;
});
sorted.forEach(function(point, index){
var marker = '';
/*
TODO: How do I determine what symbol is used for the marker?
*/
output += '<br /><span style="color: ' + point.series.color + '">' + marker + '</span> ' + point.series.name + ': ' + point.y;
});
return output;
},
'shared': true
}
I have a line chart with a number of series. On mouseover, the tooltip displays all the values of all of them, in sorted order. This part is done and can be seen in the JSFiddle. My question is, I want each the text for each series in the tooltip to include the marker symbol used for that series, styled in the color of the series. The color styling is also complete and can be seen in the JSFiddle, but how do I get the marker symbol?
Modifying form earlier Answer it is for individual series tooltip. Here modified to shared tooltip
Fiddle demo
Highcharts.chart('container', {
'title': {
'text': 'Random Chart'
},
'tooltip': {
'formatter': function(){
var output = '<strong>' + this.y + '</strong>';
var sorted = this.points.sort(function(a, b){
if (a.y == b.y){
return 0;
}
return a.y < b.y ? 1 : -1;
});
sorted.forEach(function(point, index){
var marker = '';
if ( point.point.graphic && point.point.graphic.symbolName ) {
switch ( point.point.graphic.symbolName ) {
case 'circle':
marker = '●';
break;
case 'diamond':
marker = '♦';
break;
case 'square':
marker = '■';
break;
case 'triangle':
marker = '▲';
break;
case 'triangle-down':
marker = '▼';
break;
}
}
/*
TODO: How do I determine what symbol is used for the marker?
*/
output += '<br /><span style="color: ' + point.series.color + '">' + marker + '</span> ' + point.series.name + ': ' + point.y;
});
return output;
},
'shared': true
},
'series': [{
'name': 'Series 1',
'data': [1, 3, 7, 19, 11, 27, 8, 15]
}, {
'name': 'Series 2',
'data': [2, 1, 8, 12, 14, 20, 9, 10]
}]
});
I'd like to have the y-axis data labels return 'N/A' for null values. Currently nothing is displayed. I tried using the y-formatter function to say if the y value equaled null, return N/A but haven't had luck for some reason? I'm somewhat new to Highcharts, so please forgive the basic nature of the question.
formatter: function() {
if (this.y !== null)
return 'test';
var chart = this.series.chart;
chart.renderer.text('n/a', this.point.plotX - 10, chart.plotHeight - 10).add(this.series.group)
},
Here's the link to the JSFiddle: http://jsfiddle.net/v5vJR/
Remove format from your dataLabels options. Then you need to properly calculate where put that label. plotY will be undefined, since there is no value, right?
formatter: function () {
var str;
if (this.y !== null) {
return this.y + '%';
} else {
var chart = this.series.chart,
categoryWidth = chart.plotHeight / chart.xAxis[0].categories.length,
offset = (this.point.x + 1) * categoryWidth - this.point.pointWidth + 3; //
chart.renderer.text('n/a', chart.plotLeft, chart.plotTop + offset).add();
}
return false;
},
Demo: http://jsfiddle.net/v5vJR/3/
Solution
Documentation: http://api.highcharts.com/highcharts#Renderer
Fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-text/
chart.renderer.text('<span style="color: #a2a5a1">N/A</span>', chart.plotLeft, chart.plotTop + offset)
.css({
color: '#a2a5a1',
fontSize: '11px'
})
.add();
Using tooltip formatter we can display both the series name and value but when same is done using the plotoptions event mouseover am not able to get the series name and value
Tooltip: formatter
PlotOption:Mousover
mouseOver: function () {
$.each(this, function (i, e) {
$reporting.html('x: ' + this.x + 'Category: ' + this.series.name + ', y: ' +Highcharts.numberFormat(Math.abs(this.y)));
});
}
Example of using it in mouseover
mouseOver: function () {
console.log(this);
var series = this.series.chart.series,
x = this.x,
y = this.y,
output = 'x: ' + x + 'y: ' + Highcharts.numberFormat(Math.abs(y));
//loop each serie
$.each(series, function (i, e) {
output += ' Category: ' + this.name;
if(i>0) {
$.each(series[i].data,function(j,point){
if(point.x === x) {
output += ' y: ' + Highcharts.numberFormat(Math.abs(y));
}
});
}
});
$reporting.html(output);
}
}
},
http://jsfiddle.net/ZrTux/77