I have a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
Related
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
I am playing with a chart with a one data point.
Here is the jsfiddle demo: http://jsfiddle.net/mddc/mfwyoj7j/7/
I notice that if I add
minRange: 1
-1 or 1 will show up on both sides of the data point on the X axis.
I am new to Highcharts. What does minRange=1 mean here? If it is useless, then it should not create any problems, right?
Is this a bug in Highcharts?
Thanks and regards.
See highcharts API doc here: http://api.highcharts.com/highstock#xAxis.minRange
minRange: the minimum range to display. The entire axis will not be allowed to
span over a smaller interval than this. For example, for a datetime
axis the main unit is milliseconds. If minRange is set to 3600000, you
can't zoom in more than to one hour.
So it is used to limit the zoom-in: you will not be able to zoom if the xAxis display less than 1
I have a series of data collected every 15 minutes for a few weeks. Unfortunately, there's a week of missing data in the middle. This is just a fact of my business. When I use Highcharts to chart this data, it compresses the x-axis (time), skewing the chart. For example, the x-axis has major ticks every 2 hours until the missing week. Then it jumps to major ticks of days.
Regardless of the data, I need the x-axis to remain consistent. If this causes a large gap in the diagram, so be it.
I have skimmed the documentation but found nothing. If anyone could direct me to the relevant page that would be great. Thanks!
Refer: https://stackoverflow.com/a/13439281/1566575
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
Linear x-axis | Highstock # jsFiddle
Docs:
http://api.highcharts.com/highstock#xAxis.ordinal
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/
I am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement