Is there a way to create monthly candlesticks using daily data in highcharts
for example, I have daily close price as follows.
[
[1270425600000,33.57],
[1270512000000,34.03],
[1270598400000,34.25],
[1270684800000,34.35],
[1270771200000,34.49],
[1271030400000,34.60],
[1271116800000,34.55],
[1271203200000,35.04],
[1271289600000,35.11],
[1271376000000,35.51],
[1271635200000,35.29],
[1271721600000,35.51], etc
I want to create monthly candles based on that. Is there a way to do it with highcharts? Appreciate any help.
Highstock has data grouping feature - series.dataGrouping - and you can set options, so the data will be grouped into 1 month interval.
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
forced: true,
units: [
['month', 1]
]
}
}]
example: http://jsfiddle.net/uyrz7bz1/
Related
Here is a jsFiddle to my issue:
Highcharts.chart('container', {
xAxis: {
categories: [full arrray in fiddle],
labels: {
step: 1
}
},
series: [{
data: Array.from(Array(690).keys())
}]
});
https://jsfiddle.net/qws90dux/
The chart seems to only take the first and last label, why is this?
I think the reason this did not work is because of the amount of time needed to process each category which are long dates, this is basically what is written here
The solution was just to use xAxis.tickInterval instead, with the same interval as before.
I'm trying to display two splines (xAsis: Date, yAxis: Number) in one plot for comparision. Problem here that x axis values is totaly different from spline to spline. I need to stack them somehow. I tried to use different x axis, but splines draws one after another. Is there a way to do this using Highstock or Highcharts API?
Here is screenshot of plot with two axis
You need to use separate xAxis for the series:
xAxis: [{
type: 'datetime'
}, {
type: 'datetime'
}],
series: [{
type: 'spline',
data: [...]
}, {
xAxis: 1,
type: 'spline',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/ch9Lu56s/
API Reference: https://api.highcharts.com/highcharts/series.spline.xAxis
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 have here https://jsfiddle.net/ezhp5a4j/6/ an area and a stacked bar chart But I need to achieve something like : adding another series:column behind this actual but not stacked, starting from jan. 2010 and end dec. 2010 with a certain position in y axis, my need is quiet simple, but I don't know how achieve, I think I need another X axis ?
Actually I have:
xAxis: {
type: 'datetime',
ordinal: false
},
Maybe I need add array to this or so?
You could do this with a second axis, but it's not necessary.
If you add your new data series, with some additional parameters to control the size and spacing, it can all use the same x axis.
Example:
{
"name": 'Summary',
type: 'column',
grouping: false, <-- make sure they don't group with the other series
stacking: false, <-- make sure they don't stack on the other series
color: 'rgba(0,0,0,0.5)',
pointRange: 86400000 * 365, , <-- 1 year; set to desired time frame
pointInterval: 86400000 * 365, <-- 1 year; set to desired time frame
pointPadding: 0.01,
groupPadding: 0,
data: [10000, 15000, 9000, 13000]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/15/
Output:
EDIT for comment:
To add a second axis, you change the xAxis object to an array of objects, like this:
xAxis: [{
type: 'datetime',
ordinal: false
},{
linkedTo: 0,
type: 'datetime',
ordinal: false
}]
If they are going to have different scales, I am not sure that it makes any sense to plot them together, but in that case, you would remove the linkedTo: 0
Then, in your data, you need to specify which data series are plotted on the second axis, by adding xAxis: 1 to the series options (you don't need to specify xAxis: 0 for the other series, as 0 is the default.
Since you have specified a pointStart in your plotOptions, if the series plotted on the second axis will have a different scale, you will need to specify a separate pointStart in that series options.
Update example fiddle:
https://jsfiddle.net/jlbriggs/ezhp5a4j/16/
I am working on a line chart. I have many readings for 1 day and I need to display data for 30 days. How can I display the average for each day instead of showing every data points?
If you are using datetime xAxis you can use Highstock and use the dataGrouping property for that:
plotOptions: {
line: {
enabled: true,
forced: true,
dataGrouping: {
approximation: 'average',
units: [
[
'month', [1]]
]
}
}
}
This will automatically group your daily data to average of month. Here's the DEMO