How to add markers at particular points (x,y) in high-chart line graph?
I have tried this:-
marker: {
symbol: 'square'
}
Am adding x and y values as dynamic array.I need to iterate the array in a loop and plot markers manually at certain points .Is it possible?
probably the best way to do it is to add a data series that represents the marker, so it would be something like this (pseudo-code):
var myMarkerPosition = myValueFromArray;
mychart.addSeries(myMarkerPosition);
and you can then do something like:
mychart.series[1].update({ symbol: square });
later on if you want to. Don't forget to replace your marker if you want to move it to another position by updating it.
Related
I have a scatter plot where some of the values are so close to each other that only one marker is drawn. Is there a way to indicate that there a re more then one entry on this place. I'd like to add a number with items on this location.
You can catch datalabels.formatter and use loop on each series / and each point to check if any points has the same coordinates. Then sum it and return in the funcion.
I am trying to achieve this: I gather data from various sources, and one of these has a value that I want to mark on the series that I draw (which is coming from a different source).
So file A has 1.3.5.7.9,10 (my main series for the chart)
while file B has 5 (but it can be something different every day, this is the value to use as marker)
I would like to mark on the serie that I draw, using file A, the point that is in file B, and make it different (either bigger, or a different color; doesn't really matter)
I've extracted the data; done the work on the chart to find the value, but I don't know how you tell point [n] to change its appearance on the series
something like
var values=chart.yAxis[0].series[0].yData;
var thepoint=values[1];
[change thepoint and color it red or make it bigger]
Can this be done? I tried to look at the API but can't really find out how do you actually plug it in.
Use point.update(), something like this:
var values=chart.yAxis[0].series[0].data;
var thepoint=values[1];
thepoint.update({ color: 'red', marker: { radius: 20 } });
I'd like to add an element (a circle) above some of the columns in a Highchart generated chart. In this chart, columns are stacked, to visually compare two series. But sometimes I need to draw a circle above some of these columns to show this year something special happened. I've tried to create a dummy serie, with bubbles but it doesn't work. So I believe that draw api is a better option, but I don't know how to calculate where I have to draw, to set element attributes x and y.
You can use image renderer http://api.highcharts.com/highstock#Renderer.image() or more user friedly, scatter series which allows to define your own markers (like images). http://jsfiddle.net/cKKhF/
{
type:'scatter',
showInLegend:true,
data:[10,9,11,11,8],
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}
I looking for a way to only draw part of the data set in area chart. There is a slider above the chart that can limit the range of one series in the chart while other stile rendered in whole. I wonder whats the best way to do this. The only idea at the moment is to redraw the chart every time the slider moves but I'm afraid this could result in worse performance. Maybe this could be done with something like mask on the SVG element.
I came up with a simple solution by just clipping the svg graph with an clip path:
//var chart is the actual HighChartsInstance;
var renderer = chart.renderer;
var group = renderer.g().add();
var clipPath = renderer.createElement("clipPath");
clipPath.element.id = 'clip';
var rect = renderer.rect(0, 0, 200, 400).add(clipPath);
this.clippingMask = rect.element; //reference to the clipping rect which width is changed by the slider
clipPath.add(group);
chart.series[1].group.element.setAttribute('clip-path', "url(#clip)");
chart.series[1].group.element.childNodes[0].setAttribute('clip-path', "url(#clip)");
You have a few ways
use highstock which contains "slider" http://www.highcharts.com/stock/demo/
use highstock.js and highcharts chart with scroller http://jsfiddle.net/UCmUx/
scrollbar:{
enabled:true
},
use highcharts chart without scroller http://jsfiddle.net/UCmUx/1/ and in case when you move your own scroller, then use setExtremes() http://api.highcharts.com/highcharts#Axis.setExtremes()
I think one option is to modify the series data which you want to restrict, and then call:
chart.series[n].setData(newData);
where 'n' is the number of the series you are truncating. newData is a copy of the series data with the unwanted points taken out. You will need to specify x and y values in the series in order for it to be plotted in the correct position.
I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series - 1 candlestick, 1 volume, and 1 set of flags. This all works fine.
I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.
The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.
I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?
Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
Per request, I created a JS Fiddle that demonstrates the general issue.
Any help is much appreciated.
SOLVED
This doesn't seem to come for free with Highcharts. Or if it does I did not find out the technique.
I had to use both the load and redraw events of the chart object contained in my StockChart.
On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.
On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.
The end result is that on each redraw event, the lines appear to move with the chart, when they're really being destroyed and recreated.