I'm trying to update the highchart line graph say every minute. something like shown in this link jsfiddle
Right now, I use a periodic javascript call to the function that draws the graph. The problem is that it starts to draw it from beginning.
Is it possible to just add the new data point to the existing line?
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php? filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
you should use the addPoint function in the data series...
here is an example of a chart that updates every second
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/
Related
How to make changes in highcharts time series zoomable chart to get similar to the one mentioned in below link:
https://www.highcharts.com/demo/line-time-series
Used JS :
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
I am using histogram bell curve for a project, everything is working fine except flag position like given in picture.
Here is link of my jsfiddle https://jsfiddle.net/8q1t3mwb/4
var data = [1,2,3,4,5,6,7,8,9,10];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
id:'dataseries',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
}]
});
See full code here, https://jsfiddle.net/8q1t3mwb/4
You see the points where they currently are because your flags are on the scatter axis. If you turn on the scatter points, you will see that.
Therefore, if you set the following for the flag series:
{
yAxis: 1,
xAxis: 1,
name: 'Pointer',
type: 'flags',
...
}
And adjust your x value according to the number on the bell curve you will be able to see the flag connected to the curve.
Working example: https://jsfiddle.net/ewolden/8q1t3mwb/6/
Hey I have an example of Highchart timeseries.
In this example, I get all the points as array of small arrays(each array is a pair of x and y).
I would like to know if I could color specific point in current format using the fillColor attribute,if so how can I do it?
I want to highlight specific points in the time series graph, how can I do it?
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You have two possibilites,
1) declare the color in the point object
{
x: 0,
y: 10,
color: 'red'
}
2) set a color by point.update()
chart.series[0].data[0].update({
color: 'red'
});
I have a chart that is getting user input selection from a drop down list in jsf and generate chart based on the item selection. It is working perfectly. But If I want to select multiple items at a time and want to show multiple lines at a time, how is that possible? I know I have to use another jsf component instead of dropdown list. But I am not getting how can I pass multiple data series at the same time to highcharts. The sample code I used to generate chart based one single item selection is as following:
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 20
},
title: {
text: ''
},
xAxis: {
startOnTick:true,
showFirstLabel: true,
endOnTick : true,
showLastLabel:true,
categories: dateAndTimeArray,
tickInterval: 20,
labels:{
rotation:0.1,
align: 'left',
step: 12,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series: [{
type: 'line',
name: 'Value',
/* pointInterval: 0.75 * 3600 * 1000,
pointStart: Date.UTC(2013, 1, 1), */
data: chartData,
marker: {
enabled: false
}
}]
});
});
You do not include your code for updating the chart with the data selected. So, this is just a general answer. The highchart series object can contain multiple elements:
series: [{series 1}, {series 2}]
You could get the list of the selected items in your ddl and then iterate over your data sets to find matches and use that to addSeries.
I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.
Here is some of the code I've tried playing with:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.
Any help on this would be greatly appreciated!
Firstly, A js-fiddle example would be highly appreciate to understand your problem.
From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
my fiddled code # http://jsfiddle.net/U2Z2x/1/
Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle update # http://jsfiddle.net/U2Z2x/2/