With a big load of data in the highchart, chart.xAxis[0].setExtremes(min, max) seems to take too much time. I wonder if I can set the extremes directly at the creation of the chart, for example when I define the xAxis:
xAxis: [{
categories: periods
}],
How can I do that? I don't find anything in the reference api.
You need to set xAxis.min & xAxis.max properties.
Related
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
I'm able to create in Excel a chart where...
The data is in a different date frequency based on the x axis
Two different chart types - line over bars
So for example, I can have a bar chart on the primary x-axis / y-axis that is aggregated by year. Then another series as a line that changes on a daily basis. What allows the line to show up as a daily time series (raw values) is the option to turn on the secondary x-axis. With this on, the two time series can work off a different date frequency.
Is this possible in highcharts? I've only been able to find examples of where it's possible to enable the secondary y-axis but both time series is in the same date frequency
Yes. The method to add a second x axis is exactly the same as it is to add a secondary y axis - you just make the changes to the xAxis properties instead of the yAxis properties, and specify the xAxis for you series instead of specifying the yAxis.
Example:
xAxis: [{
}, {
opposite: true
}]
And:
series: [{
data: [...data...]
}, {
xAxis: 1,
type: 'line',
data: [...data...]
}]
Fiddle example:
http://jsfiddle.net/jlbriggs/ko7ton0w/
I have a chart with multiple yaxis, 3 data series. I'm trying to duplicate this demo example
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,...
with my own jsfiddle.
What I don't understand is the correlation between "opposite: true" declared in yAxis and "yAxis: 1, 2 ..." declared in series. I've tried countless variations to no avail. Am I missing something simple? Didn't quite understand the docs
any help would be greatly appreciated
Update As per your comments I understood your actual issue. you need to place the series in same order as those yAxis were defined . see the working fiddle here
yAxis: 0,1,2,3 means : in which order your yAxis are to be stacked/put in a order. If yAxis: 0 then it means it will be first series (fir yAxis) in your multiple yAxis series.
While opposite just change the position of labels as stated by #Havor Strand in above comment.
yAxis :0 //in what order yAxis of Series
See this fiddle for stack yAxis multiple seires
and see this fiddle of your code , your points are so close,means data is too much but if you zomm your graph you can see that properly.
I have a series of points that has fast changing values, which makes it very spiky and uneasy to read when zooming out.
I would like to know if there is a way to draw above the already existing series, another one that would represent the average of, for exemple: every 10 points, or every point in a minute?
I've looked into dataGrouping but can't seem to make it work, is that what I'm looking for ?
Thanks for reading.
There is no current built-in method to do this. You would need to create a second series that is the running average and add it to the chart.
The main issue here is that HS has dataGrouping enabled by default for all series. So, when you add your second series that has dataGrouping enabled with params you want - it is also applied to the initial series. You only see one series on the chart because the 2 series are identical and overlap each other.
To fix this set dataGrouping off in the "real" series. Then have dataGrouping on in the averaged series. See this example.
...
series: [{
name: 'MSFT',
data: MSFT,
dataGrouping: {
enabled: false
}
}]
...
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]