We Keep Coding

Show data as a live stream, Highcharts

So What I have is a set of data stored, which I am able to access in Highchart easily. but Now what I need is to show the data as a live stream
like the following example :
https://www.highcharts.com/demo/dynamic-update
What I have done so far is Here :
<script type="text/javascript">
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line'
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
</script>.
How can my data flow like the above example? in 10 10 patches.
Here is the Working JSFiddle:
https://jsfiddle.net/abnitchauhan/3vj2afnt/

You can initially add only the first 10 points and then use chart load event function and set interval to add remaining points with shift argument:
var xValues = [],
counter = 11,
startValues;
xValues = [...];
startValues = xValues.slice(0, counter);
var chart = Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function() {
var chart = this,
interval = setInterval(function() {
chart.series[0].addPoint(xValues[counter], true, true);
counter++;
if (counter === xValues.length - 1) {
clearInterval(interval);
}
}, 1000);
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/7x9vrLqm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

In your code event is missing which will trigger change per sec.
Something like this. I have used random number.
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = Math.random();
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
Working fiddle

html button not firing event to the required graph container firing to different graph in Highchart JS

i have 2 graph in 2 different div(container1,container2) and have two set of buttons. both set of buttons triggering to the graph 2 only.when 1 click buttons of graph 1 it should change the graph 1 and when i click graph 2 buttons it should change the graph 2. but graph 1 and graph 2 buttons both are triggering to the graph 2 only.
JS fiddle code http://jsfiddle.net/h5t4c8hj/7/
code
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
},
subtitle: {
text: 'plain'
},
xAxis: {
categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
},
series: [{
type: 'column',
colorByPoint: false,
data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
showInLegend: false
}],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
}, function(chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
$('#plain').click(function() {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function() {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'inverted'
}
});
});
$('#polar').click(function() {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});

Yuu have named the two char with the same name
You must use a chart1 for second char and refer to this in update
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart1.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
http://jsfiddle.net/6h9o5m2w/

It's because they have the same variable name. Consider naming them properly
// first chart
var chart1 = Highcharts.chart('container'
// second chart
var chart2 = Highcharts.chart('container1'
then trigger the events you wanted using their respective variables
hope that helps

You declared both charts over the same variable chart. So the latest declared chart overrides the first one. So:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
Becomes:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
You also targeted the same variable on each clickevent:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart.update({
...
});
});
Becomes:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart1.update({
...
});
});
Here is your working fiddle

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

Highcharts exporting background image with chart?

Here is my HighCharts chart code:
chart = new Highcharts.Chart({
chart: {
type: 'bubble',
renderTo: 'graph',
backgroundColor: 'transparent',
events: {
load: function() {
this.renderer.image(backgroundImageURL, 230, 55, 720, 720).add(); // add image(url, x, y, w, h)
}
},
height: 788
},
plotOptions: {
bubble: {
color: 'white',
marker: {
fillColor: 'transparent'
},
// minSize: 100,
// maxSize: 700,
// zMin: 0,
// zMax: 100
},
series: {
cursor: 'pointer',
point: {
events: {
mouseOver: function(event) {
$('.rankings-column').find('span').removeClass('selected');
if (!this.selected) {
$('span#' + this.id).addClass('selected');
}
var donorrank = $('span#' + this.id).attr('id');
$report.html(donorrank + '. ' + this.name + ' <span>' + this.score + '%</span>');
$report.addClass('active');
},
mouseOut: function(event) {
$('.rankings-column span').each(function() {
$(this).removeClass('selected');
});
$report.removeClass('active');
$report.html('Donor Scoring');
},
click: function(event) {
if (!this.selected) {
window.open(this.url, '_self');
}
},
}
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
},
min: 0
,max: 100
},
xAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
offset: 0,
margin: 0
},
legend: {
enabled: false
},
series: [{
data: dataForChart
}]
});
backgroundImageURL is a JS var being passed through from the PHP page on which the chart displays.
This is in Worpress. Here is the PHP for that:
$styleSheetURI = get_stylesheet_directory_uri();
$backgroundImageURL = $styleSheetURI.'/img/ATI-graphs-main.png';
Here is how I turn it into a JS var:
<script type="text/javascript">
jQuery(document).ready(function($){
backgroundImageURL = <?php print(json_encode($backgroundImageURL)); ?>;
});
</script>
Here is the php echo:
http://www.thewebsite.org/wp-content/themes/ati/img/ATI-graphs-main.png
It alerts exactly the same from JS
The export works, but the image is not included.
Any ideas?
Thanks
Jacques

How to configure Highcharts so that it displays some pre-defined value

I have been searching and struggling to find a solution for my problem for a long time but no luck.
I have a simple screen where i ask user to enter their score. Once they enter their score my graph shows up with my pre-defined average score and highest score. In this case, my average score is 1450 and the highest score is 1900.
What i want to do is that once my page is loaded i want my graph displays the average and highest score already. Once user enter his score then it shows up.
Below is my code and you can see it here: http://jsfiddle.net/8jomr1wd/
Any idea?
$(function () {
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}],
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
})
});

$(document).ready(function () {
$(function () {
create(0)
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
create(val1);
});
});
});
function create(val1){
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}]
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
}