If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array
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/
Consider the following chart toy example which contains a missing value:
$('#container').highcharts({
chart: {
type: 'scatter',
},
plotOptions: {
scatter: {
lineWidth:1,
}
},
series: [{data:[[-3.8,0.4],[-3.3,-0.2],null,[-4.9,-0.7],[-4.8,-0.3]]}]
});
The points lie in the left side on the chart and don't span all its width, as it happens when you remove the missing point from the data series. In other words, the automatic min and max x-axis values seems to not be correctly computed.
In another one of my real examples the issue is more dramatic: all the data points are accumulated on a tiny strip on the left while the remainder of the chart area is completely empty.
What's wrong? It's a bug? There's a solution or a workaround?
You can't have a null x value in Highcharts.
If you want the null point to work as you've described, you need to provide an x value in order to tell the chart where the null y value is.
You've supplied your data in [x,y] pairs, so you must do that for all data points, including the null value.
Updated example, using [-3,null]:
http://jsfiddle.net/jlbriggs/2rNzr/69/
We have column chart, but it will display very ugly when it have lot of column, we enable the scrollbar but its not working properly. Please see the below image.
Please help me on,
How to add margin between group of column.
Or any other way to display the column chart with huge amount of data.
jsFiddle :
`http://jsfiddle.net/utq6zjh5/4/`
Try something like this :
xAxis: {
min: 100
},
Fiddle here: http://jsfiddle.net/utq6zjh5/5/
Try setting some max to xAxis that will work,
setting both min and max to the xAxis will make a pericular range of values to be hown and the chart will be scrollable now,
xAxis: {
max: 3 //3 is just a smple, just check which will work in your case
}
updated your fiddle here
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
}
}]
...
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]