Is it possible to drag the marker, currently clicking on the charts able to get new marker using the plotline in highcharts!
is it possible to hold/grab the marker line and drag it on the chart?
CLICK ON THE PLOTLINE
var chart = this.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.xAxis[0].value,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
Check out Highcharts' draggable plugin: jsfiddle.net/highcharts/AyUbx/
See this: http://api.highcharts.com/highcharts#xAxis.plotLines.events
Supported properties are click, mouseover, mouseout, mousemove. These events are not enough to implement the dragging option for the marker(PlotLine). Atleast not in a neat way.
You can do it by assigning an on event to the svg element:
http://jsfiddle.net/yem93w5o/1/
var line, clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickY = e.pageY - line.translateY;
}
var step = function (e) {
line.translate(0, e.pageY - clickY)
}
var stop = function () {
$(document).unbind('.line');
}
(...)
line = chart.highcharts().yAxis[0].plotLinesAndBands[0].svgElem.translate(0,0).on('mousedown', start);
Related
In a Highcharts heatmap, I define a click event as usually:
options.plotOptions = {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
/* action */
}
}
}
}
};
How can I get the xAxis and yAxis information in this function?
For example, in this demo, when I click 0.67 at the top left conner, I want to alert "Friday, Alexander".
Can I pass arguments to this function? Or is there any other approach?
Thanks! : )
The event has the point attached to it. So, you can do something like this:
click: function (event) {
var str = event.point.series.yAxis.categories[event.point.y] + ',' +
event.point.series.xAxis.categories[event.point.x]
alert(str);
}
http://jsfiddle.net/blaird/3UWaA/26/
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I have a pie chart and need to slice out some point (for examle, second slice in jsfiddle example) by clicking a buttom. How can I do it?
I've tried some updating, but it doesn't work
$('#button').click(function() {
var Chart2 = $('container').highcharts();
Chart2.options.series[0].data[1].sliced = true;
Chart2.options.series[0].data[1].selected = true;
Chart2.redraw();
})
jsfiddle example
The method you need is 'select' on the point object. This is on series, but not in options as you tried:
$('#button').click(function() {
chart.series[0].data[1].select();
})
e.g.
http://jsfiddle.net/JWFm5/
You can also use slice() function.
http://jsfiddle.net/wu3jY/2/
$('#button').click(function() {
chart.series[0].data[0].slice();
});
I have a stock chart with the fixed tooltip like the one shown in the stock tooltip positioner example. Now I want to add some flags on the series. Each flag's tooltip should be adjacent to the flag when it is "mouse over", like the default positioning/format of a tooltip. Also, each flag's tooltip has its own text and should not affect the fixed tooltip when displayed (eg. the fixed tooltip would show the stock price and the flag tooltip would show some text associates with the flag)
Do you have any related sample code I can take a look at? thx!
This is not directly supported but possible to achieve, take a look: http://jsfiddle.net/hzYhQ/2/
1) Add custom property for a chart with mouseout/mouseover events for flags:
plotOptions: {
flags: {
events: {
mouseOver: function(){
this.chart.flagTooltip = true;
},
mouseOut: function(){
this.chart.flagTooltip = false;
}
}
}
}
2) Add checking where tooltip should be displayed according to that flag:
positioner: function (w,h,p) {
var x = 10,
y = 35;
if(this.chart.flagTooltip) {
x = p.plotX;
y = p.plotY;
}
return { x: x, y: y };
}
Using this example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
When you hover over points on the chart, you get a nice vertical line showing you which point you're currently on. I want to modify the click event so that the vertical line stays when I hover away after a click. Changing the line color would be ideal on click, but not necessary.
If I click another point I'd want to remove any previous lines. Any ideas on how I could accomplish this?
The above solution like I said, is really cool, but is kind of a hack (getting the path of the crosshair) into the implementation details of highcharts, and may stop working in future releases, may not be totally cross browser (esp since <IE8 do not support SVG, the adding path may still work as it should be handled by highchart's add path method, but getting the crosshair's path may not work, I may be wrong, am an SVG noob). So here I give you the alternate solution of dynamically adding plotLines. PlotLines also allow some additional features like dashStyles, label etc.
get the axis and x value of point clicked (may not exactly overlap the crosshair)
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
Or
EDIT If you want to have the plotLine at the location of the crosshair and not the click position, you can use following formula (No direct API to get this, obtained from source code hence may stop working if code changes)
var chart = this;
var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index].x;
Add plotline
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
You can cleanup existing plotline
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
OR
try {
xAxis.removePlotLine(myPlotLineId);
} catch (err) {}
Putting the pieces together
var myPlotLineId="myPlotLine";
...
var chart=this;
index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft;
var xValue = chart.series[0].tooltipPoints[index];
// var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
...
Add plot lines at click position # jsFiddle
Persist crosshair/cursor as plot lines on click # jsFiddle
You can do it in several ways
Highchart has a very cool renderer that allows you to add various graphics to the chart. One of the options is to add a path I will be illustrating the same here.
We shall reuse the path of the crosshair and add the same to the chart with some additional styles like color you mentioned. The path of the crosshair can be optained as this.tooltip.crosshairs[0].d this is in string form and can be easily converted to an array using the Array.split() function
click: function() {
this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
This will accomplish adding the line. You can store the returned object into a global variable and then when you are about to add another such line, you can destroy the existing one by calling Element.destroy()
var line;
...
chart:{
events: {
click: function() {
if (line) {
line.destroy();
}
line = this.renderer.path(this.tooltip.crosshairs[0].d.split(" ")).attr({
'stroke-width': 2,
stroke: 'red'
}).add();
}
}
...
Persist tooltip / crosshair on click # jsFiddle
Assuming you don't have much meta data to be shown along with the line, this is the easiest (or the coolest :) ) approach. You can also attach meta data if you want to using the renderer's text object etc.
An alternate way could be adding vertical plotLines to the xAxis
UPDATE
Refer my other solution to this question, that would work with zoom,scroll,etc