My series data looks like this:
[Date.UTC(2017,03,25,09,32,21),0.7695],
//Date.UTC(yyyy,MM,dd,hh,mm,ss)
...
...
but I can only zoom till the days......
How can i zomm till the secounds?
You need to set
tickInterval: 1000
and mingRange to at least 1000(1 second)
minRange: 1000
I made a fiddle with a zoom button, right bellow the chart to the left, that will zoom to the center of the chart showing the seconds, or you can manually zoom multiple times until you can see the seconds(about 5-6 times)
http://jsfiddle.net/vv0weLcn/5/
The data i used was your starting point, then i added 1 hour, 100 times
You can zoom as far as your data let you do this - so this is really depends on your data granularity. Zooming is about setting min/max in your axis scale.
series: [{
pointStart: Date.UTC(2016, 1, 1),
pointInterval: 1000, // point every 1 sec
data: [...Array(1000)].map(() => Math.random()) // 1000 points with random values
}]
example: http://jsfiddle.net/vxg315oj/
Related
I have a highstock chart with more than 1000 points and 3 series, one of them is just a line series with a few data for some dates and i want them to be visible in every zoom, but right now with zoom in and to that point it show up, how can i make highstock check for every single point and show it's marker without considering any thing beside?
i already tried below but it have no effect:
plotOptions: {
series: {
turboThreshold: 0,
},
},
in here i put an example and you see marker not appear in first load, but afrer zooming to end, it show up:
jsFiddle
I am facing a strange problem with highcharts(highstock) datagrouping. I want to show grouped data in week or month and at the same time zoom the chart to a specific period (I am using chart.yAxis[0].min = ). When the width of the overall chart is high and when I set the the zoom level to a short period (say a few months), data is not grouped to the period I specify.
Refer to the fiddle link below. I have specified datagrouping as 'month' ({units:[['month',[1]]], enabled:true}) and yAxis[0].min as 29 Jul 2010. You will observe that data is not grouped in months.
Now try to reduce the width jsfiddle result panel by dragging the divider. When the size of the result area (or the chart) is reduced, datagrouping starts working.
http://jsfiddle.net/amit657/of1mv8yv/2/
Any idea how can I force datagrouping and at the same zoom the chart to show data for a specific period?
To force data grouping set forced in dataGrouping to true.
Example: http://jsfiddle.net/of1mv8yv/4/
...
dataGrouping: {
units: [
['month', [1]]
],
enabled: true,
forced: true
}
...
I am using highcharts to draw a stock graph. It start with zero data, then add one data point per minute. after whole day, it fill with 240 data points.
The x axis is fix length, and designed for the whole 240 data points. When the data points have not grow to 240 yet, we want the corresponding part of chart of the missed data to be empty.
I've check the highcharts API, and cannot find options to do that. It looks like all the highcharts demo are filled the chart with data available.
thanks!
In short, you set xAxis.min and xAxis.max.
For example if you have two points in your data:
// January 1st 2015, 00:00 and 00:01
data : [[1420070400000, 3], [1420070460000, 7]]
Then you'd set the min and max to allow space for all the points that will eventually be added:
xAxis: {
min: 1420070400000,
max: 1420070400000 + 86400000 // 60 * 60 * 24 * 1000 added
}
As in this demonstration, which has two points and space for the entire day.
I have a graph showing rankings over a time periods, but I can't figure out how to get the y axis to start at 1 and also label it as 1.
This is the closest I have got
yAxis: {
min: 1,
startOnTick: false,
reversed: true
},
http://jsfiddle.net/270dj43o/
The y-axis starts at 1, but it fails to show it as a tick on the y-axis. (In this example all I need is a 1 above the 2.5 on the y-axis)
This is a graph ranking someones performance over multiple time periods, so it needs to always show 1 instead of 0.
Note I know that setting the tickInterval to 1 makes it display 1, but that isn't viable option in my situation.
There is a tickPositioner function which you can apply on yAxis so you can apply your own tick points : http://jsfiddle.net/270dj43o/3/
EDIT: Apart of tickPositioner, you can use also tickPositions.
I am using highstock by HighChart
When I provided certain data to HighStock, Handles of Navigators are unable to move.
its fiddle is http://jsfiddle.net/AbdulQ/ZvK7s/8/
Why its navigator handles are unable to move for specific data?
[1396310400000,40189.80078125],
[1398902400000,168386.40625],
[1401580800000,101377.5]
, but not for a large range of data? fiddle with large data is http://jsfiddle.net/AbdulQ/ZvK7s/9/
You should define minRange parameter, not range. Additionally, you have too much value.
check out code
xAxis: {
range: 86400000 * 30*6, // 6 months
minRange: 2,
labels: {
zIndex: 6,
},
tickInterval: 30*24*3600*1000, // 30 days
},
minRange: Number
The minimum range to display on this axis. 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.
http://jsfiddle.net/patelrachith/ZvK7s/11/