Highstock - force x-axis displayed range regardless of data - javascript

I am creating a candlestick chart with grouped data and would like to be able to show a specific range based on a defined pixel width of each candle regardless of missing data.
plotOptions: {
candlestick: {
pointWidth: 10,
pointPadding:5
}
},
So if the total plotWidth is 700px and each candle is approx 15px and the dataGrouping is 1 minute there would be approx 47 mins in the xAxis.
I would imagine i could caculate and add the missing data/points but is there some way to force the xAxis to display a range and plot whatever data i have automatically?

First of all: you can use or pointPadding or pointWidth, where width has higher priority.
Anyway, you can user ordinal axis (which is default behavior) to remove missing data between points. It means that points will be evenly spaced on a chart. You have only 10 points? Each will take the same amount of space, x-value will have lower priority.
This is example: http://jsfiddle.net/WbynW/
You can observe only 5 points, but each is 10px width, and each has the same distance between next one. Note xAxis labels (1. Jan, 11. Jan etc.)

Related

How to make a chart display only a certain number of labels out of total labels in chartjs?

So I have a chart that has over 400 values on the x-axis, taken throughout the day at a certain equal interval. I want to show only 24 labels at the bottom, representing the 24 hrs of the day and the rest be shown the points on the chart itself but not on the x-axis. It's a line chart with currently having labels as an array of 400+ values and spread at multiples of 8 starting from 0000.

Gapped data issues in highcharts

I'm having an issue with Highcharts which is not actually the framework's fault, but rather mine. The data I want to plot may have gaps sometimes in the middle of it, and when trying to plot the points the framework doesn't consider the density of the points and link the gaps when, in my case, it's not supposed to. As you can see in the image below the purple serie wasn't supposed to be linked, but rather leave a gap around 16:00 and 08:00.
One other problem that I face because of the gaps I have is that my chart is many times unproportional like in the image shown below where November takes 1/4 of the chart area, while the other months take the rest of the space. Also between August and September the space is larger than the other monthly intervals.
Last but not least there's finally the issue that I set my chart's X Axis accordingly to a date picker I have on my webpage and I'd love it to start and end at the dates picked, but it instead starts and ends at where the points start and end. I'm setting my limits like this:
xAxis: {
type: 'datetime',
min: min,
max: max,
minRange: $scope.minRange || Time.MINUTE,
events: {
afterSetExtremes: onLazyLoad
}
}
You can see the gap linking points problem over here
The unproportional chart problem here

Preserve time spacing ratio of gaps in Highstock charts

In Highstock charts, any gap will always have the same width (it seems the width of the smallest distance between points) regardless of the time interval of the gap, resulting in narrowing of the time/x axis, while this doesn't happen in the "navigation" series.
Is there any easy way to make the chart preserve the spacing of the gap according to its duration, as it already happens in the navigation bar (thus keeping the x axis without narrowing)?
Standard Highstock chart is using ordinal xAxis by default.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.
You can try disabling this parameter by setting xAxis.ordinal to false http://api.highcharts.com/highstock/xAxis.ordinal
xAxis: {
ordinal: false
},

Make X axis labels show each day in Gantt chart

I have a Gantt chart, and I need to make the duration scale to one day. Currently there's a label for every other day only.
See image below:
The axis chooses granularity and number of labels / grid lines based on available space, so that it does not look crammed.
You can influence it in a number of ways:
1) Set (reduce) minHorizontalGap for your value axis.
This setting defines how much free space there should be between labels. The less the number the more labels the chart will display.
OR
2) Disable autoGridCount and set gridCount manually.
With both approaches you might need to play around with the numbers to find the one that works for your chart setup and available space.

Reduce the amount of rendered datapoints in a zoomable areaspline with highcharts

I have a graph that will present sold entrance tickets over a quarter with a granularity of 1 datapoint per hour.
To make this presentable, I am using highcharts zoom feature together with a stacked areaspline.
My problem is that the graph gets really spiky when zoomed out, since it has to render a lot of datapoints that could fluctuate between a few hundred to zero in an hour or two, so I am wondering if there is a way to limit the amount of rendered datapoints per x-axis tick, to smooth the spline out further?
An example would be if the x-axis is fully zoomed out, it would label the months and render 4 datapoints per month, when I then zoom in on the beginning of say July, it would label first of july through fourth of july and render 4 datapoints per day.
BR Fredrik

Categories

Resources