What whould be the best approach to do something like ?
I think I need to do 2 charts or can I do it in the same ? I don't know how to separate the 2 parts.
Labels translate by "Late" and "Next". It's 2 different series
One method is to make your "red" series use negative values and your "blue" series use positive values. To make the labels on the xAxis be positive you would make the xAxis label formatter use an absolute value of this.value.
Related
I am using an area plot - normal stacking - plotting 3 series. I have data-points of series 1 and series 2, but data-points for series 3 are based on relation: (100-(series1 + series2)). After I calculate points of 3rd series and assign it to series object, Highcharts grouping is applied to it, but relation described above does not hold after grouping. Seems like Highcharts applies grouping on one series at a time. So relationship goes away after it comes out of approximation function. How can I apply grouping so that relationship holds after coming out of approximation function in dataGrouping? Any input will be appreciated.
You can edit approximation function for 3rd series, so it will have values as you want it to have.
Depending on what do you expect to have as a 3rd series approximation you can use one of available approximations - like "average" or "sum" - or set up a custom function.
More info in API reference: http://api.highcharts.com/highstock#series.dataGrouping.approximation
Is there any workaround to have tickMarkPlacement set as "between" on a datetime Axis? I am aware is not supported by the API but I was hoping to find some sort of hack/plugin.
You can fudge it with the x axis label's x property.
Example:
http://jsfiddle.net/jlbriggs/3qtZr/36/
[[update after comments:
if you mean that you want the data points to also line up 'between', then there isn't a good easy way.
My approach would be
1) make sure there is only one data point per axis tick, ideally
2) adjust the x value of the data point to push it to the right in a way that corresponds with the label offset
3) adjust tooltip formatters to correct the date for display
or, 4) just go with categories
However, if you can explain why you want to do this, what effect you're going for, perhaps there's more that can be done.
{{further updates:
After playing around a little more, I found another way to fudge the data point placement, though I am unclear whether you need that.
Example here:
http://jsfiddle.net/jlbriggs/3qtZr/39/
It uses the pointPlacement property.
The catch is that the pointPlacement property doesn't work if there is not a columns series present with as many data points as the line series, it seems.
So this method adds and hidden dummy column series in order to make the pointPlacement property affect the line series.
Not elegant, but it beats having to adjust the data values and then re-adjust them in the formatter.
I'm facing an issue with my Highcharts-powered component.
Considering the basic column chart JSFiddle example: http://www.highcharts.com/demo/column-basic
My goal is to get the series name (Tokyo, New York, etc...) instead of Jan, Feb, Mar... on the x Axis.
Of course, I also need the columns to be grouped according to the series name. So, in this case, it would be 4 group of columns.
How can I do this ? Should I modify the categories block ?
Thanks a lot
EDIT
I've found the solution and updated the fiddle: http://jsfiddle.net/j658R/1/
But now, I need another bahvior. How can I specify more than one value for each serie ? For example, for "s1", how can I put 4 values for this series and so get 4 bars above the "s1" label on the X axis ?
Thanks
By separating each data point into a separate series, Highcharts will automatically group the data.
So the first data point of each series will be set to the first category. The second data point of series to the second category, etc.
All you need to do is set this up as a single series:
http://jsfiddle.net/j658R/6/
I want to create a histogram in Highcharts. The bin series has about 8 elements. The series for the the distribution curve has about 200 elements. Since Highcharts infers the xAxis from the number of elements in the series, the xAxis stretches out to 200. How do I get the curve series to fit to the bin series on the xAxis?
I would suggest using 2 x axes for this. It is far easier than trying to make the points match on a single axis.
See my example here:
http://jsfiddle.net/FnhRV/19/
Well, first I advice to get familiar with Highcharts docs/tutorials. Like this one.
In general, you can manage distance between points, it's called pointInterval, for example: http://jsfiddle.net/Dd9Py/1/
When you have 8 columns, on xAxis you should have scale - according to pair [x,y] of values.
Another solution is to use two different xAxis, one for column and one for spline. Example: http://jsfiddle.net/Dd9Py/2/
Looking at this jsFiddle. Things I notice is that your xAxis is linear - meaning that each point is plotted consecutively. So, since your bar series only has 8 points they are plotted int he first 8 positions. Your curve contains 200 points and are also plotted first come first served. You need to link up your xAxis so that each series is linked. What are your xAxis increments/categories?
Maybe I am not understanding the area chart properly but here is an image to properly display what the problem is and what I am looking for:
Can someone explain why stacking: normal display values like it does? And how to possibly fix it? I have tried stacking: null, and stacking: percent, but both do not give the desired results.
EDIT: I see my error, however, I'm not sure how to fix it. I need to graph the two series in a group so that they are rendered together and not normalized. Any ideas?
When stacking is used, the values of each series for a certain x-value is added together (stacked), and the y-value corresponds to the total of the accumulated series. So the upper graphs looks ok I think.
For 2010-08 its adding 2 + 4 = 6 which is the value of the y-axis and,
for 2010-09 its adding 4 + 4 = 8.
To make your data work with stacking, you want to subtract the 'in-service' from 'total'. Or maybe have two series named 'in-service' and 'out-of-service'. When stacking those two series you will get the total.