HighCharts Tester

Paste in Highcharts Code--the HighCharts Library is already loaded. Fork to save a chart in a more persistent way.

by abbylangner

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 490px; height: 500px; margin: 0 auto"></div>
<button id="add-point" style="display: block; margin: 0 auto;">Add Point</button>

JavaScript

$(document).ready(function(){
    var chart = new Highcharts.Chart({
	chart: {
        renderTo: 'container',
		type: 'scatter',
	},
	credits: {
        enabled: false
	},
	title: {
        text: "Basic Scatter Plot"
	},
	yAxis: {  
		min: -10,
        max: 10,
		title: { text: 'y', rotation: 0 },
        tickInterval:1,
        plotLines:[{
            value:0,
            color:'#000',
            width:2
        }],
        gridLineWidth:1
	},
    xAxis: {
		min: -10,
        max: 10,
		title: { text: 'x' },
        tickInterval:1,
        plotLines:[{
            value:0,
            color:'#000',
            width:2
        }],
        gridLineWidth:1
	},
	series: [
        {
            id: 'series-1',
			name: 'Default',
            data: [{x:1,y:2},{x:-4, y:1},{x:7, y:-6}]
		}
    ],
    legend: {
        enabled:false
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.series.name +'</b><br/>'+
                '('+this.x +', '+ this.y+')';
        }
    },
});
    
    var seriesDynamic = {
        id: 'series-2',
        name: 'Dynamic',
        data: []
    }
    
    $("#add-point").click(function(){
        var xval = Math.floor(Math.random() * (10 - -10 + 1)) + -10;
        var yval = Math.floor(Math.random() * (10 - -10 + 1)) + -10;
        seriesDynamic.data.push({x:xval, y:yval})
        chart.addSeries(seriesDynamic);
    });
    
    
});