Using Highchart, tooltip position of each data point
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
}
},
The problem is that the above option also changes the tooltip position of the flags.
How do I change the options so that the tooltip of the data point is fixed as the above option, but the tooltip position of flags remain as before?
Solution #1:
Example: http://jsfiddle.net/QcR4k/
And code:
positioner: function (w,h,p) {
var points = this.chart.hoverPoints;
//hover points contains only standard points, not flags
if(points) {
return { x: 320, y: 50 };
} else {
return { x: 80, y: 50 };
}
}
As you can see, flags are not part of hoverPoints, so you can that way determine where to display tooltip.
Solution #2:
Example: http://jsfiddle.net/QcR4k/1/
Code:
formatter: function() {
var series = this.series || this.points[0].series; //shared or non-shared tooltip
if(series.userOptions.isFlag){
series.chart.tooltip.isFlag = true;
return 'flag';
} else {
series.chart.tooltip.isFlag = false;
return this.y + '<br> non-flag';
}
},
positioner: function (w,h,p) {
if(!this.chart.tooltip.isFlag) {
return { x: 320, y: 50 };
} else {
return { x: p.plotX, y: p.plotY };
}
}
That solution uses tooltip.formatter to set flag, where point should be displayed - first formatter is returned, then we can manage position accordingly.
Related
I'm trying to apply ZoomIn and ZoomOut in a line chart on a mobile device. The goal is to click on a zone of the chart and ZoomIn in the first click and ZoomOut on the second. The sequence will always be this one.
I already live to see the documentation / examples and I can not find anything to solve this situation.
I have already tried using this properties in the chart: property
pinchType : 'y',
zoomType: 'none'
I tried the zoomtype but the behavior is not what I expect. I want to have a click to zoom this specific area of the chart. I do not want to zoom with two fingers.
{
chart: {
pinchType : 'x'
},
legend: {
itemStyle: {
color: '#fff'
}
},
plotOptions: {
series: {
animation: {
duration: 2000
}
}
},
xAxis: {
tickInterval: 1
},
series: [
{
type: 'spline',
color : '#fff'
},
{
dashStyle: 'longdash',
color: '#b3be77'
}
],
}
As simple as clicking to get zoomin and zoomout
Yes, the second challenge can be easily achieved by adding this logic to plotOptions.series.events.click callback function:
chart: {
events: {
load: function() {
this.clickedOnce = false;
},
click: function() {
const chart = this;
if (chart.clickedOnce) {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
},
plotOptions: {
series: {
events: {
click: function(e) {
const chart = this.chart,
yAxis = chart.yAxis[0],
xAxis = chart.xAxis[0];
let x,
y,
rangeX,
rangeY;
if (!chart.clickedOnce) {
x = xAxis.toValue(e.chartX);
y = yAxis.toValue(e.chartY);
rangeX = xAxis.max - xAxis.min;
rangeY = yAxis.max - yAxis.min;
xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
chart.redraw();
chart.clickedOnce = true;
} else {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
}
}
Demos:
https://jsfiddle.net/BlackLabel/kotgea5n/
https://jsfiddle.net/BlackLabel/s8w2xg3e/1/
This functionality is not implemented in Highcharts by default, but you can easily achieve it by adding your custom logic when the chart area is clicked.
When area is clicked the first time use axis.setExtremes() method to zoom in. On the second click use chart.zoomOut() to zoom out the chart. Check demo and code posted below.
Code:
chart: {
events: {
load: function() {
this.clickedOnce = false;
},
click: function(e) {
const chart = this,
yAxis = chart.yAxis[0],
xAxis = chart.xAxis[0];
let x,
y,
rangeX,
rangeY;
if (!chart.clickedOnce) {
x = xAxis.toValue(e.chartX);
y = yAxis.toValue(e.chartY);
rangeX = xAxis.max - xAxis.min;
rangeY = yAxis.max - yAxis.min;
xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
chart.redraw();
chart.clickedOnce = true;
} else {
chart.zoomOut();
chart.clickedOnce = false;
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/fxm812k4/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut
https://api.highcharts.com/highcharts/chart.events.click
Using a customEvents plugin (see: https://github.com/blacklabel/custom_events) and adding plotBand on the whole chart area you can register a callback on click and double click events. Using this approach you can make a zoom in on click event and zoom out on double click (not working on mobile devices).
Demo:
https://jsfiddle.net/BlackLabel/6tpb5q2z/
I'm trying to have positive Y values fill with blue and negatives with red. Here is what my graph looks like: Image of Current Graph.
I'm currently adding the color to my dataset in app.js:
if(displayData["VARIANCE"] >= 0){
ctvar.push({
x: Date.now(), y: displayData["VARIANCE"], color:"#0000ff"
});
}else{
ctvar.push({
x: Date.now(), y: displayData["VARIANCE"], color:"#ff0000"
});
}
The dataset is passed to my jade template file as ctvv where I set all the graph settings in js:
function myData() {
return [
{
key: "Cycle time Variance",
values: ctvv,
area: true
}
];
}
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis.axisLabel("Time").tickFormat(function(d) {
return d3.time.format('%H:%M')(new Date(d));
});
chart.lines.scatter.xScale(d3.time.scale());
chart.yAxis.axisLabel("Seconds").tickFormat(d3.format("d")).ticks(5);
chart.yDomain([-60,60]);
d3.select("svg").datum(myData()).transition().duration(0).call(chart);
nv.utils.windowResize(
function() {
chart.update();
}
);
return chart;
});
I've tried setting the chart colors using the ctvv and also a plain array of colors.
Considering that my data array is always composed of 4 elements as :
var data = [
{"type":"column","name":"My Label 1","y":38.9500000000003,"color":"#7cb342"},
{"type":"column","name":"My Label 2","y":30,"color":"#7cb342"}, {"type":"column","name":"My Label 3","y":51.85,"color":"#fbc02d"}, {"type":"column","name":"My Label 4","y":55.2999999999997,"color":"#fbc02d"}];
I want to know how to set my data names (data.name) each 45 degrees tick interval to keep them well positioned ?
Here is the example:
http://jsfiddle.net/eento/7rupgxde/4/
It's important for me to display only those labels & keep them inside the global highchart container.
Like this?
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name;
}
}
Example:
http://jsfiddle.net/jlbriggs/7rupgxde/5/
You can use renderer to render those labels, for example, create two methods (one to add labels and one to position them):
function renderLabels(chart) {
var alignments = ['right', 'right', 'left', 'left'];
$.each(chart.series[0].points, function(i, point) {
point.myName = chart.renderer.text(point.name, -9999, -9999).attr({
align: alignments[i],
color: 'black'
}).add();
});
}
function positionLabels(chart, anim) {
var positions = [
// top right label
[chart.plotLeft + chart.plotWidth, chart.plotTop],
// bottom right label
[chart.plotLeft + chart.plotWidth, chart.plotTop + chart.plotHeight],
// bottom left label
[chart.plotLeft, chart.plotTop + chart.plotHeight],
// top left label
[chart.plotLeft, chart.plotTop],
]
$.each(chart.series[0].points, function(i, point) {
if (point.myName) {
point.myName[(anim ? 'animate' : 'attr')]({
x: positions[i][0],
y: positions[i][1],
})
}
});
}
Then use those methods in chart.events:
chart: {
polar: true,
renderTo: 'container',
backgroundColor: null,
events: {
load: function() {
renderLabels(this);
positionLabels(this, false);
},
redraw: function() {
positionLabels(this, true);
}
}
},
And working demo: http://jsfiddle.net/7rupgxde/7/
For the links - in a JointJS diagram - I tried to implement this tutorial (http://jointjs.com/tutorial/constraint-move-to-circle) to move the labels on the link, but I don't understand where to put the ConstraintElementView.
I would like to make the label of a link moveable over the link. So how can I define the link as the 'path' for the moveable label?
ConstraintElementView
var constraint = label; // ???
var ConstraintElementView = joint.dia.ElementView.extend({
pointerdown: function(evt, x, y) {
var position = this.model.get('position');
var size = this.model.get('size');
var center = g.rect(position.x, position.y, size.width, size.height).center();
var intersection = constraint.intersectionWithLineFromCenterToPoint(center);
joint.dia.ElementView.prototype.pointerdown.apply(this, [evt, intersection.x, intersection.y]);
},
pointermove: function(evt, x, y) {
var intersection = constraint.intersectionWithLineFromCenterToPoint(g.point(x, y));
joint.dia.ElementView.prototype.pointermove.apply(this, [evt, intersection.x, intersection.y]);
}
});
link label
paper.on({
/**
* Doubleclick on link: Add label for link
*/
'cell:pointerdblclick': function(cellView, event, x, y){
if (cellView.model.isLink()) {
cellView.model.label(0, {
position: .5,
attrs: {
rect: { fill: '#eeeeee' },
text: { text: 'text', 'font-size': 12, ref: 'rect' }
}
});
}
}
});
paper
var paper = new joint.dia.Paper({
el: $('#canvas'),
width: 801,
height: 496,
model: graph,
gridSize: 10,
elementView: ConstraintElementView,
defaultLink: new joint.dia.Link({
router: { name: 'manhattan' },
connector: { name: 'rounded' },
attrs: {
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#6a6c8a', stroke: '#6a6c8a' },
'.connection': { stroke: '#6a6c8a', 'stroke-width': 2 }
}
})
});
As it is moveable over the link, it should be snap to the center of each segment of the manhattan-style link. But I don't see any chance to get the value of the center of each segment.
You do not need to create any path. Just change the position of label by calculating its relative value - of course can also use absolute values.
'cell:pointermove': function(event, x, y) {
if (event.model.isLink()) {
var clickPoint = { x: event._dx, y: event._dy },
lengthTotal = event.sourcePoint.manhattanDistance(event.targetPoint),
length = event.sourcePoint.manhattanDistance(clickPoint),
position = round(length / lengthTotal, 2);
event.model.label(0, { position: position });
}
}
Enabling labels to be movable along links can be done via the labelMove option of the interactive object on the paper:
var paper = new joint.dia.Paper({
// ...
interactive: { labelMove: true }
// ...
})
This flag defaults to false.
I want to draw both rectangle and square using same var rectangle in my program. I have modified the function to draw square, given modeOptions = { "Rectangle", "Square" } what needs to be added below to work for both, rectangle and square. Please suggest. Thanks
Can also see the question at : http://jsfiddle.net/farey/qP3kV/6/
var rectangle=(function() {
var inDrag=false,downPos,upPos;
var obj;
// temporary length for square
var temp;
return {
fillStyle: "none",
strokeStyle: "blue",
lineWidth: 5,
construct: function(pos,parent) {
obj=Object.create(parent);
obj.minx=obj.maxx=pos.x;
obj.miny=obj.maxy=pos.y;
if (fillColor!="inherit")
obj.fillStyle=fillColor;
if (strokeColor!="inherit")
obj.strokeStyle=strokeColor;
if (strokeThickness!="inherit")
obj.lineWidth=strokeThickness;
},
draw: function(selected) {
ctx.beginPath();
ctx.fillStyle=this.fillStyle;
ctx.strokeStyle=(selected) ?
"gray" : this.strokeStyle;
ctx.lineWidth=this.lineWidth;
// making 3rd & fourth argument same for square. greater of maxx and maxy should be there
if (this.maxx - this.minx > this.maxy - this.miny)
{ temp = this.maxx - this.minx
}
else
temp = this.maxy - this.miny
ctx.rect(this.minx,this.miny,temp,temp);
// else
// ctx.rect(this.minx,this.miny,this.maxx - this.minx,this.maxy - this.miny )
ctx.fill();
if (selected) {
ctx.moveTo(this.minx,this.miny);
ctx.lineTo(this.maxx,this.maxy);
ctx.moveTo(this.minx,this.maxy);
ctx.lineTo(this.maxx,this.miny);
}
ctx.stroke();
},
mousedown: function(event) {
downPos=event;
rectangle.construct(downPos,drawObject[containingBox4point(downPos)]);
inDrag=true;
},
mousemove: function(event) {
if (!inDrag)
{
drawPrevious();
drawCursor(event,containingBox4point(event));
return;
}
upPos=event;
if (upPos.x>downPos.x) {
obj.minx=downPos.x;
obj.maxx=upPos.x;
}
else {
obj.minx=upPos.x;
obj.maxx=downPos.x;
}
if (upPos.y>downPos.y) {
obj.miny=downPos.y;
obj.maxy=upPos.y;
}
else {
obj.miny=upPos.y;
obj.maxy=downPos.y;
}
drawPrevious();
obj.draw(containingBox(obj)==(-1));
drawCursor(event,containingBox4point(upPos));
},
mouseup: function(event) {
// commit rectangle
rectangle.mousemove(event);
if (!inDrag)
return;
if (containingBox(obj)==(-1))
trace("U and ur box are evil . . .");
else
{
drawObject.push(obj);
trace("Rectangle props for new box "+String(drawObject.length-1)+
": filled with "+ fillColor+
" stroked with "+strokeColor+
" # thickness "+ strokeThickness);
}
inDrag=false;
drawPrevious();
},
mouseout: function(event) {
inDrag=false;
drawPrevious();
}
};
})(); // rectangle
To force the resulting rectangle to be only a square, you need to modify your rectangle mousemove method.
The modification would enforce that this is always true:
Math.abs(obj.maxx-obj.minx) == Math.abs(obj.maxy-obj.miny).
It’s up to you to determine how your want to enforce that result.
For example, assuming upPos is right and down from downPos:
You could let the horizontal length win:
obj.maxy = obj.miny+(obj.maxx-obj.minx);
You could let the vertical length win:
obj.maxx = obj.minx+(obj.maxy-obj.miny);
You could even let the minx/miny float to create a square:
obj.minx = obj.maxx – (obj.maxy-obj.miny);
// or
obj.miny= obj.maxy – (obj.maxx-obj.minx);