How to display the plotted value correctly to the exact milliseconds on the chart? How place a point or tooltip to exact milliseconds?
xAxis: {
type: 'datetime',
plotLines: [{
color: '#FF0000',
width: 2,
value: 1366113390066
}]
}
JSFiddle Link
Your series is not showing because your data array is not in a usable format.
this:
data: [{
'value': 731,
'timestamp': 1366032438641
}
should be either
this:
data: [{
'x': 1366032438641,
'y': 731
}
or, more simply, this:
data: [[1366032438641,731]]
reference: http://api.highcharts.com/highcharts#series.data
You'll have to clarify what you mean about the other part of your question.
EDIT:{
If you want actual millisecond precision, you will have to have enough width in your chart to specify a pixel per millisecond. This is not going to happen in any real chart obviously.
There's no way to draw a 2 pixel wide line in a ~600 pixel wide chart displaying 20+ hours and have it be precise to a millisecond.
That's about 72 million milliseconds in 600 pixels, which works out to 0.0000083 pixels per millisecond... (or 120,000 milliseconds per pixel)
:)
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.
with this part of code in the code below
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x',
},
I am getting the following charts:
https://jsfiddle.net/62jq6zsd/
But I am not getting the right result.
Putting your code into a fiddle, I can see that nothing is plotted:
http://jsfiddle.net/jlbriggs/3d3fuhbb/225/
Looking at your data, the reason is apparent. You have your data set up as;
{
x: 1483358580000,
y: 1
}
But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.
In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.
It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.
And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.
If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.
Example from the Highcharts demo:
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)
Demo Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/
{{ EDIT }}
Using your chart as a base, here is an updated version.
Code (data based on yours, edited for demonstration)
xAxis: {
categories: ['', 'Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[1,1483338000000,1483338010000],
[1,1483338030000,1483338070000]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/
{{ Edit again for comments }}
To reduce space between the series, you have a variety of options
1) reduce the height of your chart
2) increase the width of your bar
1/2) do both!
3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.
Option one, in a fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/1/
Option three:
http://jsfiddle.net/jlbriggs/qdza1032/2/
I got some problem with highcharts.
Try to transform the highcharts series or series group on correct.
ch1
Bottom "grid" cut my spline and I dont know why. Try to formate like this:
ch2
It is because of the plot area which is limited by the axes. You should set yAxis min to be a little lower than the cut point and set yAxis.startOnTick to false.
yAxis: {
lineWidth: 2,
startOnTick: false,
min: -2,
example: http://jsfiddle.net/jecp8jac/
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/
I have a time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin