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.
Related
I'm drawing a chart in an iOS app and I want the gridlines to start in the x axis but end in the data point instead of extending all the way up to the top.
Is this possible?
Thanks in advance.
NC
Disclaimer: I work for ShinobiControls
The shinobicharts framework doesn't currently support this as an out-of-the-box feature.
A workaround may exist though. You may be able to add your own gridline subviews by using the SChartAxis method pixelValueForDataValue: to work out where in the plot area coordinate space you should draw your vertical line up to for a given data point.
Once you have your coordinates there are various ways you could draw your gridlines:
Add a canvas view behind or in front of the chart (depending on what effect you want). Then use your coordinates to draw your gridlines using CoreGraphics or some other drawing technique.
Create individual UIViews that each represent a gridline using your coordinates and add these behind or in front of the chart.
One thing to be aware of with this technique is that the gridlines will not automatically update when you pan and zoom. In order to do this you will need to override one of the chart's delegate methods that notify you of range changes and update your drawn gridlines to match the new data point positions.
Another potential workaround could be to use a column series to mimic gridlines. If you create a column series and feed it the same data points as your original series this will result in columns that go up to the y-value of each data point. You could then use the property interSeriesSetPadding on SChartAxisStyle to cause the columns to appear very thin.
I hope that information is useful!
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
Is it possible to update a chart's option (marginRight for example) and call redraw() to have that new value reflected in the chart? Or does a new instance of the chart need to be created for these types of changes?
I think it may be the latter because it sounds like only data or axis values can be altered after the chart is created. I see the documentation for redraw states:
Redraw the chart after changes have been done to the data or axis extremes
And the new dynamic feature in 3.0 states:
Through a full API you can add, remove and modify series and points or modify axes at any time after chart creation.
Thank you in advance.
Update
My reason for wanting to do this was I had a vertical layout and right-aligned legend that was overlapping my chart. I just realized Highcharts automatically sets the correct marginRight to accommodate for this if one isn't explicitly specified.
Unfortunately you cannot modify margin parameter dynamically, so you need to destroy old chart and create new instance.
This feature is one of our target in the nearest future.
Say you got a chart initialized like this:
chart = new Highcharts.Chart({
...
You can change trivial attributes, like its title, like this:
chart.setTitle({text: "New title"});
And you can refresh the dataset it's using with a new one, like this:
chart.series[0].setData(newChartData, true);
Where newChartData will contain the array with new data you wish to display
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.