When I load all my data into a chart the xaxis gets cluttered and unreadable. I have maybe 120 records per hour that with a certain value. Is there a way in highcharts to load all the data I have and have the xaxis showing the values per hour? As pictured below:
http://i.imgur.com/uWkKZ0c.png
Have you tried http://api.highcharts.com/highcharts#plotOptions.line.pointInterval? I would assume setting pointInterval to 3600*1000 = 1 h would achieve what you want? By default this value is 1, hence the cluttering.
plotOptions: {
series: {
pointInterval: 3600 * 1000 // 1 h
}
},
Also check this fiddle; samples/highcharts/plotoptions/series-pointstart-datetime/
Related
i have a highchart with 4 series. I also only set the min value for each y-axis to 0 cause there arent any negative values possible. now highchart is calculating the max value by itself what is nice BUT i need this for each series itself. The reason is that i have 2 series with very high values from the range up to 5000 and the other two values are relativ small from 0 to 50.
The max value highcharts calculates is used for all four series - so the chart looks like this:
As you can see you can only see the two high value series - the other two arent really visible at the bottom of the chart.
When i disable the two series with the high values the chart looks nice for the other two values:
is there any flag i can use so highchart will calculate the max value / scale per series? Or have i really calculate it by myself - also on zoom and so on.
I found this: https://github.com/highcharts/highcharts/issues/4248
But i thought thats some basic functionality with is needed very often so there has to be something..
greetings
Maybe it would be better to use logarithmic axis type? Your chart would have only one axis adjusted to much difference between the values of series points. When it comes to differences between units of measurement, always you can set the different tooltip.pointFormat definition for specific series.
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
yAxis: {
type: 'logarithmic',
},
series: [{
data: [1, 20, 30, 22, 16, 32, 45, 24, 11, 2],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} km/h</b>'
}
}, {
data: [4500, 3450, 4242, 2348, 5216, 3212, 4564, 3128, 5256, 4512],
pointStart: 1,
tooltip: {
pointFormat: '<b>{point.y} kW/h</b>'
}
}]
});
Live example: https://jsfiddle.net/bfnj4mp8/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.line.tooltip.pointFormat
I've an API that is returning the following data:
[1466274600000, 166.409],
[1466274900000, 138.266],
[1466275200000, 160.668],
[1466275500000, 147.300],
[1466275800000, 147.778],
[1466276100000, 136.043]
I've loaded this into Highstock, which gives me this chart
However, the values are actually the rate of change between the timestamp and the next timestamp. So, the difference between the value at 1466274600000 and 1466274900000 is 166.409, etc. so I'd like the charts to represent this by appearing over the gap between the ticks.
Is this possible? I can change the output of the API if necessary...
Fiddle here: http://jsfiddle.net/bLrah/157/
Is this what you're looking for?
http://jsfiddle.net/strince/bLrah/159/
var data = [
[1466274600000, 166.409],
[1466274900000, 138.266],
[1466275200000, 160.668],
[1466275500000, 147.300],
[1466275800000, 147.778],
[1466276100000, 136.043]
];
var columnWidth = $("#chart").width() / data.length;
...
plotOptions: {
column: {
pointPadding: 1,
borderWidth: 1,
pointWidth: columnWidth
}
},
I'm creating a line chart using Highstock. However, I found an issue when the date range is less than a specific number of days, duplicate x labels appear. I set formatter to show only days. Here is the example: http://jsfiddle.net/ry4DQ/
labels: {
formatter: function() {
return Highcharts.dateFormat('%m/%d', this.value);
}
}
When I change the start date to be for example 2011-05-07, you'll see two labels for each day on x axis.
Is there any way to avoid this issue?
I tried the setExtremes event, to set tickInterval to 1 day when the date range is less than some value, and it works. However, when the chart is resized smaller, label text overlaps.
Any help or info is highly appreciated!
Labels are duplicated because you define label as %m/%d for each extremes. I.e when you have: 18:00 / 22:00 (date range from 2011-05-07), then these values are overlapped by formatter (%m%d). So as a result is duplicated.
tickInterval / minrange should be defined as time in miliseconds, so one day is 24 * 3600 * 1000.
If you remove the formatter from xAsis.labels, the issue will go away. You might not like the date format though. Here's the fiddle, and screenshot:
The solution by #sebastian-bochan led me in the right path: you can still use your formatter (contrary to #dan-dascalescu 's answer), just make sure to also set the interval to the correct millisecond amount!
if hour_axis == true
date = 'h:MMTT'
interval = 3600 * 1000
else
date = 'm/d/yy'
interval = 24 * 3600 * 1000
xAxis =
xAxis:
tickInterval: interval
tickPositions: 0
type: 'datetime'
labels:
formatter: ->
dateFormat(#value, date)
This worked for me:
xAxis: {
type: 'datetime',
tickPositions: 0,
tickInterval: 24 * 3600 * 1000,
tickPixelInterval: 110,
maxTickPixelInterval: 125,
minTickInterval: 100,
labels: {
format: '{value:%m/%d/%y}',
enabled: true
}
},
I am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.
Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.
I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.
In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).
$.getJSON('url.json', function(data) {
var min = data[0][0], // min
max = data[500][0]; // max - e.g. max = min + 24 * 3600 * 1000; as one day
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
xAxis: {
min: min,
max: max
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I'm displaying a number of series in a highstock chart. I chose highstock because I want to show at least 4 hours of data with the option of scrolling if the user adds data points beyond those 4 hours (but I don't want the rangeSelector or navigator enabled, if that pertains to the problem I'm having).
I thought this would be straightforward, but I'm having problems showing 15-minute intervals on the x-axis. When one data point is dynamically added, the graph correctly shows the 15-minute tick intervals, but when more data points are added, the x-axis starts to scale the times incorrectly. If I then refresh the page and display a graph with multiple data points, I get really weird tickIntervals.
Here are my xAxis options:
xAxis: {
type: 'datetime',
min: 1361815200000,
max: 1361829780000,
tickInterval: 15 * 60 * 1000,
minTickInterval: 15 * 60 * 1000, // 15 minute intervals
gridLineWidth: 2,
labels: {
formatter: function () {
var d = new Date(this.value);
return (d.getMinutes() == 0) ? '<b>' + Highcharts.dateFormat('%H:%M', this.value) + '</b>' : d.getMinutes();
}
}
}
You can see the rest here: http://jsfiddle.net/pxCsX/
What am I missing? I've tinkered with minRange, type and other xAxis and series attributes and scoured the highstock docs, but I keep coming up with bupkis.
Setting ordinal to false solves the problem:
xAxis: {
ordinal: false
}