i would like do make highchart like this:
http://www.highcharts.com/stock/demo/dynamic-update
The data will be received realtime.
First time i pull data (quote and timestamp).
After this the data will be pushed.
My code:
//drow chart - pull
var highChart = function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Intraday chart'
},
exporting: {
enabled: false
},
series : [{
name : 'DAX DATA',
data :
}]
});
}
var setHighChart = function(lastPriceTimestamp,lastPrice) {
highChart.series[0].setData([lastPriceTimestamp,lastPrice]);
};
...
//push data
setHighChart(lastPriceTimestamp,lastPrice);
Maby you could help me
thx
Related
I am trying to bring highcharts to show only hours and minues in xAxis, presently it's showing the full timestamp including the date. I am using the following code:
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'Temperatur' },
series: [{
showInLegend: false,
data: IstTemp
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M' },
categories: reading_time
},
yAxis: {
title: { text: 'Temperatur (Celsius)' }
},
credits: { enabled: false }
});
Where is my mistake?
You can't use datetime and category axis type at the same time. As a solution you can:
Use datetime axis and preprocess your data to the format: [timestamp, y]
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var seriesData = IstTemp.map(function(dataEl, index){
return [new Date(reading_time[index]).getTime(), dataEl];
});
Live demo: http://jsfiddle.net/BlackLabel/7gdvzfo6/
Use categories with modified string
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var processedCategories = reading_time.map(function(dateStr){
return dateStr.split(' ')[1].split(':').slice(0, 2).join(':');
});
Live demo: http://jsfiddle.net/BlackLabel/2udw738c/
I want to use a button to make the candlestick visible by day, week, and month, but I want the moving average line to not change automatically (only the day moving average line).
_chart = new Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
series: [{
type: 'ohlc',
id: 'aapl',
name: 'AAPL Stock Price',
data: data
}, {
type: 'sma',
linkedTo: 'aapl'
}, {
type: 'sma',
linkedTo: 'aapl',
params: {
period: 50
}
}]
});
});
change(function() {
var unit = $(this).val();
console.log(123123);
_chart.series.forEach(function(ser) {
ser.update({
dataGrouping: {
units: [ [unit, [1]] ]
}
}, false);
});
console.log(unit);
_chart.redraw(unit);
console.log(_chart);
});
I have a map of the US and its 600 x 400. How do I force it to use the Abbreviated State names which I see in the examples but am unable to reproduce in my own code.
I'm using the below code with some sample data to show the format of the code I'm passing. I'm having to parse the data out of a larger json response.
var data = [{"code":"AK","value":225}, {...} ];
This is the map:
$('#ha-worst-map-1').highcharts('Map', {
title : {
text : result.data[1][2] + ': ' + result.data[1][4]
},
subtitle : {
text : 'stuff and things'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
colorAxis: {
min: 0
},
credits: {
text: '',
href: ''
},
series : [{
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
name: 'metric',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
},
tooltip: {
valueSuffix: ''
}
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
color: 'silver',
showInLegend: true,
enableMouseTracking: true
}]
});
I want to manipulate the var series before I configure the highchart-code.
But I get 68 series!! instead of my 2 series I defined before.
What can be the error?
var series;
function refresher() {
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]";
$.getJSON(url,
function(data) {
chart = new Highcharts.StockChart
({
chart: { renderTo: 'container', zoomType: 'x', type: 'line', width: 900 },
legend: { enabled: true, verticalAlign:'bottom' },
title: { text: 'You see the data of the last measured hour!' },
credits: { enabled: false },
xAxis: { type: 'datetime', title: { text: 'time' } },
yAxis: { title: { text: 'hallo' } },
rangeSelector:{ enabled: false },
navigator : { enabled: false },
series: series,
tooltip: { xDateFormat: '%e. %b.%Y %H:%M:%S', valueDecimals: 2, },
exporting: { enabled: true },
});
// Format the y-data.
Highcharts.numberFormat(this.y, 2, '.', ',');
});
};
The problem is in the series variable.
1st of all, it's a string, and not an object.
I don't know why you are using it like that but if you really want it to be a string, you'll have to eval it when given it to the series object:
...
series: eval(series)
...
Also, it's not:
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]"
The equal signs are incorrect.
It has to be:
series = "[{ name: 'test1', data: data[0]},{ name: 'test', data: data[1]}]"
(I've replaced the equal signs by colons.)
I am creating a highchart where I would like the scrollbar to be enabled. My scroll bar is not working, any ideas what I might be missing here?
$('#add_trans').highcharts('StockChart', {
chart: {
borderColor: '#801500',
borderRadius: 20,
borderWidth: 1,
type: 'line',
events: {
load: function(chart) {
this.setTitle(null, {
});
}
},
zoomType: 'x'
},
exporting: {
enabled: true
},
legend: {
enabled: true
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 60,
text: 'hourly'
}, {
type: 'all',
text: 'All'
}],
// selected: 1
},
scrollbar: {
enabled: true
},
navigator : {
enabled : true
},
xAxis: {
labels: {
enabled: true
}
},
yAxis : {
title : {
text : 'Response Time'
},
tickInterval: 100
},
});
Some mistakes possible for error:
There is no series:{} in your highcharts code, so no data for your chart is in the code.
extra commas causes the issues so remove the:
code:
yAxis : {
title : {
text : 'Response Time'
},
tickInterval: 100
},//comma from here if there is no section after it
and:
rangeSelector: {
buttons: [{
type: 'minute',
count: 60,
text: 'hourly'
}, {
type: 'all',
text: 'All'
}], //from here if next statement is commented
// selected: 1
},
If your code still doesn't work, you could try changing this :
<script type="text/javascript" src="js/highcharts.js"></script>
with this :
<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>