CODEWITHSUNDEEP
javascripthighcharts
Anirban
Anirban

Reputation: 589

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

Upvotes: 0

Views: 1702

Answers (1)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26310

Use chart.series[1].data to get the current serie data and then use chart.series[1].setData to update it's data.

function requestData() {
    var chart = $('#container').highcharts(),
        serie = chart.series[1];

    // get serie data
    var data = serie.data;

    // append points to data
    for (var i = 0; i < 1000; i++) {
        data.push([
            Math.random() * 100,
            Math.random() * 80
        ]);
    }

    // update serie data
    serie.setData(data);
}

You can see it working here.

Update - Append points to the current data

function requestData() {
    var chart = $('#container').highcharts();

    // append points to data
    for (var i = 0; i < 1000; i++) {
        chart.series[1].addPoint([
            Math.random() * 100,
            Math.random() * 80
        ], false);
    }

    chart.redraw();
}

Demo

Upvotes: 1

Related Questions