Getting dynamic values from database for dynamic chart plotting

[westside]

I want to retrieve values dynamically from the database and plot using Highcharts spline graph. The problem is I cant figure out a way to pass the values to Javascript function without refreshing the whole function, this will plot the whole graph from the scratch. The current code contains an array where it just plots using an array and a random function to generate new values. I want to find a way to insert new values on to that array from the database using PHP. Problem is I don't know how to keep on calling the database query without affecting the graph. Some help on plotting the graph dynamically using the dynamic values from the database would be helpful.\[code\]$(function () { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', 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: 'Trend analysis' }, xAxis: { labels: { rotation: 320 }, type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: 'Value' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, credits:{ enabled:false }, 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 = http://stackoverflow.com/questions/15492524/[], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; })() }] }); });});\[/code\]