I have data that can either be weekly or monthly that gets returned as json.
Can somebody explain how I can just return the series in the payload to group by each series? That is, display the x-axis as the label?
I want to use one chart to display (weekly, monthly, daily) with a json data payload but use only one chart to display that json payload for either time slice.
For example:
Weekly Payload:
[
{
"date-label":"Week 24",
"series1":789118,
"series2":49475,
},
{
"date-label":"Week 25",
"series1":5759546,
"series2":286657,
}
]
Monthly Payload:
[
{
"date-label":"June",
"series1":789118,
"series2":49475,
},
{
"date-label":"July",
"series1":5759546,
"series2":286657,
}
]
How many points do you have?
If there is only a couple (~10?) you can use categories, and then result should be:
new Highcharts.Chart({
xAxis: {
categories: ['June', 'July' ... ]
},
series: [{
data: [123, 124 ...]
}, {
data: [123, 124 ...]
}]
});
If you have more points, so it wouldn't be possible to display all categories, you need to change format from 'Week 24' or 'June' to timestamp, so something like this:
new Highcharts.Chart({
xAxis: {
type: 'datetime'
},
series: [{
data: [[timestamp, 123], [timestamp, 124] ...]
}, {
data: [[timestamp, 123], [timestamp, 124] ...]
}]
});
Where timestamp is in milliseconds.
Related
I need to use a "name" attribute for the X axis, so I can put the name of the month.
I can not therefore use an array of values within the data attribute. So I can not use something of this kind data:[12,13,45];
Using something like this:
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
series: [{
colorByPoint: true,
data: [{
name: 'Septiembre',
y: 1687
}, {
name: 'Octubre',
y: 2085
}]
}],
});
Reproduction online
I'm trying to draw two lines in HighStocks using JavaScript with their example candlestick with intraday code. For some reason I can't get it to work
I am trying to just generate two extra lines at the end of my candlestick data, here is what i have (testing with just one line but it wont work). You can see the line im trying to put in is called test
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}]
series: [{
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
});
});
});
First of all, you should not add two series arrays in your chart options object. You should use one series array and inside this array add new series object:
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}, {
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
The problem with this case is that you didn't give any x values to your line points, so it will start from 1970 year right now.
You need to add x values so line will start just where you want.
Here you can see an example: http://jsfiddle.net/uj0kzL4c/
I have created a spline chart in highcharts, where the x-axis is datetime values, which do not necessarily align between series. Tooltips only appear to snap based on the horizontal position of the mouse, making it extremely awkward to see tooltips for certain points. Code below + fiddle link
$('#container').highcharts({
chart: {
type: 'spline'
},
xAxis: {
type: "datetime"
},
series: [{
"name": "series 1",
"data": [
[Date.parse("2014-12-16T10:41:30.000Z"), 62],
[Date.parse("2015-01-16T10:41:30.000Z"), 64]
]
}, {
"name": "series 2",
"data": [
[Date.parse("2014-12-16T10:44:10.000Z"), 26],
[Date.parse("2015-01-16T10:44:10.000Z"), 26]
]
}, {
"name": "series 3",
"data": [
[Date.parse("2014-12-16T10:44:17.000Z"), 104],
[Date.parse("2015-01-16T10:44:17.000Z"), 104]
]
}]
});
fiddle
It is almost impossible to view the tooltips for 'series 2' with this data.
How can I make the tooltips snap based on distance to the points?
This issue is fixed in the newest master-branch
I'm trying to use Highstock and am having a problem. When I have multiple series' on the chart, I want the points from the same day to match up, but currently they don't because Highstock takes the time into account.
Here is an example chart:
$('#chart').highcharts('StockChart', {
plotOptions: {
series: {
animation: {
duration: 0
}
}
},
yAxis: {
labels: {
align: 'right',
x: -4,
formatter: function() {
return '$' + Math.round(this.value);
},
},
tickPixelInterval: 40
},
series : [
{
"name": "Series 1",
"data": [
[
1389486123000,
200
],
[
1389578849000,
200
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
},
{
"name": "Series 2",
"data": [
[
1389486240000,
100
],
[
1389578849000,
100
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
}
]
});
JSFiddle: http://jsfiddle.net/EdvVW/
As you can see in JSFiddle, the second two points match up (and when you hover your mouse over them, they both show up in the tooltip, which is what I'm wanting), but even though the first two points are from the same day they don't match up because their timestamps are different.
Is there any way to decrease the accuracy of the rendered points so that data points from the same day match up regardless of time?
No, it's not possible. You need to have the same timestamp to match points.
You can preprocess your data: go over all points, create date from timestamp, then use Date.UTC(year, month, day); as x-value for a point.
I thought a newly added series should not affect old ones, but when I tried to add a scatter series with custom markers, empty spaces will be created between candlesticks where the new points are. I know set ordinal option on xAxis to false will avoid it, but the problem of that is it may be possible that some of the data points for candlesticks are missing, creating gaps on the candlestick series. Hence, what I want is a scatter series does not change the look of the candlestick series.
This is the options that I pass to highstock series:
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
In a word, I just want to get rid of the empty space on the candlestick series when a scatter series is created.
Here is the fiddle http://jsfiddle.net/vRDNZ/. Thank you for your help!
In general this is exactly how ordinal axis should work. There is simple workaround for this, use second xAxis, which is linked to first one, and connect scatter series to that axis. Example: http://jsbin.com/oyudan/267/
xAxis: [{
opposite: false
}, {
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
xAxis: 1,
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]