adding new points in a scatter plot
I would like to add new points to the scatter plot in a async manner. For
that, there is an api in scatter plot "addpoint" that adds newly sent data
to the chart without refreshing the scatter plot. The code used in this is
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function(){
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0,
63.0], [155.8, 53.6],
]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5,
72.6], [187.2, 78.8],
]
}]
});
function requestData() {
var chart = $('#container').highcharts();
var points = [
{
x: Math.random() * 100,
y:Math.random() * 80
}
]
var series = chart.series[0];
var data;
chart.series[1].addPoint([Math.random() * 100,Math.random() * 80]);
// call it again after one second
setTimeout(requestData, 1000);
}
requestData();
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto"></div>
</body>
</html>
The fiddle is here : http://jsfiddle.net/anirbankundu/T8GT3/1/
Can anyone let me know if there is any possible way to add an array of
points instead of adding each point step by step. I will be fetching
around 1000 points for each call and the total number of points can go
above 100K
Thanks, Anirban
No comments:
Post a Comment