I have a highchart chart that displays the current time against euro/dollar currency pair. I am getting live data from a currency layer per second api.
This is the chart http://jsfiddle.net/15vsdy63/25/
This is the javascript code
$(document).ready(function () {
window.setInterval(function(){
$.get( "http://firmbridgecapital.com/live.php", function( data ) {
localStorage.setItem("data", data);
});
}, 5000);
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -150; i <= 0; i += 25) {
data.push({
x: time,
y: parseInt(localStorage.getItem("data"))
});
}
return data;
}())
}]
});
});
I have theorized that in a worst case scenario, Euro/Dollar will never go past 4 usd for 1 euro, so in the Y-axis, i am thinking of having value 0 to 4 and x- axis will have the current time.
In my example above, i cant display 0 to 4 in the y axis. Also i would love the area under the curve to have some color like blue.
How can i make the y -axis show 0 to 4 and
How can i have area under the curve to have a color like blue?
Thanks.
For the y-axis to show values between 0 & 4 use max: your value and for the curve to have a color like blue just change the chart type to area chart:{type:area, .... Here is your example: https://jsfiddle.net/68oe1oLf/
Related
I have this example code where I wanna update my chart every time on event "onmessage" but it doesnt update the chart.
A console.log() shows me that the callback is executed with the right values but nothing appears in the chart.
HTML part
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript Part:
setting the options....
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
},
plotOptions: {
series: {
turboThreshold: 0 // 0 to disable https://api.highcharts.com/highcharts/plotOptions.series.turboThreshold
}
}
});
creating the chart with a timespan of 1 hour:
var chart = Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live Test.sensor.val'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'Test.sensor.val',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -60 * 60; i <= 0; i += 1) { //defines the visible timespan on x axis
data.push({
x: time + i * 1000,
y: null
});
}
return data;
}())
}]
});
here I am hoping to get the values into the chart but it is not working...
Just the console.log() shows me the values but nothing is updated in the chart.
var ev = new EventSource("/incommingEventHandler.ashx");
ev.onmessage = function (e) {
var dat = e.data;
var x = (new Date()).getTime(), // current time
y = dat;
console.log(x, y); //showing values correctly but no update on chart? Why?
chart.series[0].addPoint([x, y], true, true);
};
});
Thanks Dieter
it was my fault.
Server sent events seams to be transmitted as strings.
Therefore my value from e.data is from type string.
I casted it via parseFloat(y) and everything is working fine now.
Expected behaviour
I hope to let the chart also dynamic update when I drag scrollbar and it is not in left boundary or right boundary.
Thanks for your help.
Actual behaviour
It is a Stationary state when I selected a range via scrollbar and it is not in left boundary or right boundary
Live demo with steps to reproduce highstock dynamic update demo:
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
jsfiddle
Product version
highstock version : 6.0.7
I'm using highcharts and am I trying to develop a chart, which can handle live data.
Here is my first try:
var data = [],
chart_interval = undefined;
Highcharts.setOptions({
global: {
useUTC: false
}
});
function addRandomData(dataSet, frequency, yMax, count) {
for (var i = 1; i <= count; i++) {
var x = new Date((new Date()).getTime() + i * frequency),
y = Math.random() * yMax;
dataSet.push({
x: x,
y: y
});
}
return dataSet;
}
function addDataInterval(dataSet, frequency, yMax) {
return setInterval(function() {
var x = new Date(dataSet[dataSet.length - 1].x.getTime() + frequency),
y = Math.random() * yMax;
dataSet.push({
x: x,
y: y
});
}, frequency);
}
// Parameters: dataSet, frequency, yMax, count
addRandomData(data, 1000, 10000, 60);
// Parameters: dataSet, frequency, yMax
addDataInterval(data, 500, 10000);
// Create the chart
Highcharts.stockChart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
series.update({
data: data
}, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: data
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Problem: If already existing data has different time intervals, such as the newly generated data, the freely selectable zoom don't work.
Have I somewhere make mistake or is this a bug of highcharts?
Highcharts wants time values as timestamps in milliseconds instead of Date objects:
What format does the highcharts js library accept for dates?
Highcharts X-Axis time from JS date
Change how you generate your x values, and the zooming magically starts working again:
var x = (new Date()).getTime() + i * frequency,
...
var x = dataSet[dataSet.length - 1].x + frequency,
https://jsfiddle.net/74zdsvbo/
I'm new in Laravel, so I'm still facing problems whenever I try to add js functions to my code.
I need to add a highchart to my laravel project. As a beginning, I just copied the code of one of the charts available on highcharts.com and pasted it in the main view, but nothing is being displayed.
When I added the same code to a normal html file, the graph was displayed normally.
Here's my javascript code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
and the html code
<div id="container" style="width:100%; height:400px;"></div>
Any suggestions how to display the graph?
Thanks in advance.
I think the problem is with the syntax you are creating the chart with: $('#container').highcharts...
It seems highcharts function is not defined using laravel.
There is another way that you can try:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
...
},
...
});
I want to use Highcharts graph and update y axis dynamically. Actually I want to update nsw, Tas, ACT every 5 sec. How do I do it ?
Here is my code.
$(function () {
$('#container').highcharts({
title: {
text: 'Histogram',
x: -20 // center
},
subtitle: {
text: 'Source: www.trove.com',
x: -20
},
xAxis: {
categories: ['NSW', 'Tas', 'ACT','QLD','VIC','SA','WA']
},
yAxis: {
title: {
text: 'Hits'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'States',
data: [nsw, Tas, ACT,qld,vic,sa,wa]
}]
});
});
});
In the Documentation you can find an example from Highcharts in jsfiddle. Check it out http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/. In the example every second a new point will be added. Here comes the relevant code part:
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
`
The easiest way to do it would be to use the javascript function "setInterval()" to call it.
Here is a link where you can find a way to do it :
http://www.w3schools.com/js/js_timing.asp
If you are not really good at javascript, you might need this declaration of functions : var functionName = function() {} vs function functionName() {}
Use:
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random(),
l = series.data.length;
for(var i = 0; i < l; i++) {
series.data[i].update({
y: getHits(i) // or something else
});
}
}, 5000); // 5 seconds
}
}
Where index is index (count from 0) of nsw/Tas/ACT in data array. (for nsw = 0, for Tas = 1 etc.)