I am using highstock to draw a histogram, when i try add a new point using addpoint api,i need to add a new object that contains x, y and color.
This is the way i do it:
chart.series[0].addPoint({color: color, y: value, x: time });
but i get this error taht says:Can't add object point configuration to a long data series
Highcharts error #20: http://www.highcharts.com/errors/20
Related
I want to implement line chart like this image. I have already bar chart implemented which display proper value based on scaling like
barView.transform = CGAffineTransform.init(scaleX: 1, y: self.projectionValue)
Now i want to do same in line chart but using transformation as i can not change height of bar but move to view on specific value so how can i do this?
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
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.