I am tired of one issue which I faced with few days ago and still do not solve it. I have a Highstock chart with two series:
{
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
legend: {
useHTML: Highstock.hasBidiBug
},
series: [
{
name: 'MAX',
data: this.chartData.maxValuesArr
},
{
name: 'MIN',
data: this.chartData.minValuesArr
}]
}
As you can see I use range for a one week by default, I got from BE array with 1600 values since 2014 year and it scales good and shows me the last week by default, but, also I have prices updates every 30(more/less) seconds, I have tried a lot of ways to add those values in such way that dont break the scale of the chart! On the picture you can see that 18 of jule is bigger than other days and all it became like that because I added updated point to it.
The question is how can I add(update) chart dynamically and dont break the scale. For range I use buttons(see config) thats why I cannot use chart.setExtremes()
I ll be very thankful!
Related
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/
UPDATE AGAIN - Now I added yAxis property but it's showing nothing:
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr,
yAxis:1
},
{
name:'UPV',
data:upv_arr,
yAxis:2
},
{
name:'PPV',
data:ppv_arr,
yAxis:3
}
]
});
It will show nothing - literally nothing, not even the title of the chart. But a blank area.
UPDATE - Now I am using this but still not working...
$('#highchart').highcharts({
chart: {
type: 'line'
},
title: {
text: 'My Data'
},
subtitle: {
text: 'By Day'
},
xAxis: {
categories: date_arr
},
yAxis: [{title: {text: 'PV'}},
{title: {text: 'UPV'}},
{title: {text: 'PPV'},opposite: true}
],
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
name: 'PV',
data: pv_arr
},
{
name:'UPV',
data:upv_arr
},
{
name:'PPV',
data:ppv_arr
}
]
});
It's like this (the new labels are ready but the metric is still in the old way):
-- original post --
I am using HighCharts to show some data for a website visitors
In this picture above. the Blue and Dark Blue lines are very big because they are page visits. And the Green one is the Page Views/Unique Page Views. That is a very small number comparing to the visit number. How can I set up a second y-axis system as Microsoft Excel can do?
BTW, the dates on the x-axis is too crowded, is there anyway to make them stay in one line automatically? (sometimes there are only 7 days data)
Thanks
You can define array of yAxis and then set index of axis in each serie.
yAxis: [{
title: {
text: 'yAxis 1',
},
}, {
title: {
text: 'yAxis 2',
},
opposite: true
}],
Example:
- http://www.highcharts.com/demo/combo-multi-axes
You can also disable align ticks by option alignTicks.
chart: {
alignTicks: false
},
refer this Fiddle ,It has three yAxis to show three stacked series
for label relted issues ,you can use tickInterval to show date after an interval
xAxis: {
tickInterval: 24 * 3600 * 1000// One day (change here whatever you prefer)
}
If your labels collapsed with each other you can use staggerLines property in xAxis to show alternate label one step down.
As the title states, highcharts is only loading the title and subtitle, yet none of the subsequent chart information or it's relevant theme. Hitting my head against a wall trying to get this to work. Really hoping someone else here has had this problem.
jsfidizzle
The first half of the fiddle is the highcharts theme. All the logic starts kicking off at #transitfunding
Very simple fix... you need to move your series data outside of your plotOptions: like so:
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
A working fiddle can be seen here.
you have misplace the series section.
series(that contains data) is the sibling of plotOptions not its child.
so it should be like
plotOptions: {
column: {
stacking: 'normal'
},
},
series: [{
name: 'Other',
data: [0, 0, -5400000, 1, 1, 0, 3, 0, 8016805, -8435419, -28900000]
}, {
name: 'Gas Tax',
data: [119221, 627705, 234646, 6685080, 1341871, 1990937, 3187208, 6911715, 10002605, -14282137, -10555715 ]
}]
I've updated your js fiddle here
I'm trying to display some data using HighStock. Everything works quite fine beside the fact that I cannot display less than 6 days.
As you can see below, I have selected 3 days as range but the chart still shows 6 columns.
Moreover, if I try to select any day after April 18 as "from" value, the value is ignored and April 18, 2013 is considered. Finally, I have the same behavior if I try to pinch the navigator, I cannot display less than 6 days.
I have looked into HighStock API Reference but I cannot find any reference to the fact that 6 is de default number of days/values shown.
Below I report my js:
$('#container').highcharts('StockChart', {
chart: {
backgroundColor: '#E5E7EB'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
count: 1,
text: 'Ytd'
},{
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000 // daily
},
yAxis: {
offset: 8,
title: {
text: yAxisTitle
},
labels: {
align:'right'
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: seriesOptions
});
Am I missing anything? How may I display less than 6 days/values?
Thanks and have a nice day.
You should set minRange http://api.highcharts.com/highstock#xAxis.minRange
In your example: 3 * 24 * 3600 * 1000 (which means 3 days)
I'm trying to tweak a Highcharts scatter plot with this date series
series: [{
data: [[1,2],[2,5]]
}]
so that i can put a name on each point, I want to show the name in the tooltip.
The API doc says an object of named values can be defined like this
series: [{
data: [{
name: 'Point 1',
x: 1,
y: 2
}, {
name: 'Point 2',
x: 2,
y: 5
}]
}]
but it seems the x and y values are not picked up. See my jsfiddle example.
This answer works for Highcharts 4.1.9.
Took me a long time to figure out hence I want to pass it on in case someone is looking for this as well.
Your mileage may vary for other versions.
plotOptions: {
scatter: {
dataLabels: {
format: "{point.name}",
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Projects',
data: [{"name":"Point 1", "x":1,"y":2}, {"name":"Point 2", "x":4,"y":5}]
}]
What are the key points?
Ensure that the scatter.dataLabels is enabled and the format is {point.name}
Ensure that the data is in the format of {"name":"Point 1", "x":1,"y":2}
As mentioned in this comment, what works for me in Highcharts 5.0.6 is:
{
type: 'scatter',
tooltip: { headerFormat: '<strong>{point.key}</strong><br>' },
data: [{ x: 0, y: 1, name: 'Whatever' }, ...]
}
As stated in the documentation, the name field is the name of the point as shown in the legend, tooltip, dataLabel, and so on. I updated your fiddle to include the highcharts library, and I am seeing this behaviour (i.e. if I hover over a point, its label is displayed).
If you want the x-axis labels set correctly, you need to ensure that the xAxis section of your chart configuration does not have a categories key.
You could also show names in the legend section. Updated the selected answer above here
series: [{
name: 'Point 1',
data: [[3, 3]]
}, {
name: 'Point 2',
data: [[4, 8]]
}, {
name: 'Point 3',
data: [[9, 15]]
}]
This is a new feature in HighCharts 3.0. You have to define the xAxis type to 'Category' and give the name of the point in the data if you want it to appear on the xAxis:
xAxis: {
//categories: ['Green', 'Pink'],
type: 'category'
},
...
data: [{
name: 'Green',
x: 1,
y: 2
}, {
name: 'Pink',
x: 2,
y: 5
}]
See your jsFiddle code updated :here.
Note that I have added the tooltip formating feature to show that point.x has no more meaning in this context, only point.name remains relevant. Also, you cannot have two points with different 'name' at the same x position.
I struggled with this issue and after finding the solution in the documentation I must say the behavior as designed feels a bit unexpected.
Per the docs (here: https://api.highcharts.com/highcharts/plotOptions.scatter.tooltip), the tooltip does not show all fields you can add to a data point, but rather
Defaults to x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>.
To show the data point name (and any other fields you want to), simply change the HTML rendered by the tooltip. For example, you can display the point name and coordinates in the tooltip while removing the series name as follows:
chart: {
type: "scatter",
}
tooltip: {
headerFormat: '',
pointFormat: 'Name: <b>{point.name}</b><br/>Load time: <b>{point.y}</b><br/>Requests: <b>{point.x}</b>',
},