Highchart autoscalling

Question

http://jsfiddle.net/Fr4CR/

In the above chart, if the values falls within x-axis 14 to -14 and y-axis 1 to -1 , it's plotting perfectly.

When the values falls outside x-axis 14 to -14 and y-axis 1 to -1 , it's not plotting.

Here I have created chart,all points are not plotting

http://jsfiddle.net/Fr4CR/3/

$(function () {
new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'container',
        showAxes: true
    },
    xAxis: {
        tickInterval: 2,
        min: -14,
        max: 14,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        min: -1,
        max: 1,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    series: [{
        data: []
    }]
}, function (chart) {

    var xData = [1, 2, 3, 4, 5, 10],
        yData = [0.5356899, -20.5356899, 0.6356899,
                 0.2356899, 0.3356899, 40.1356899],
        series = chart.series[0],
        i = 0;

    setInterval(function () {
        var shift = series.data.length > 20,
            x = xData[i],
            y = yData[i];

        if (!x || !y)
            return;

        series.addPoint([x, y], true, shift);
        i++;
    }, 1000);


    var renderer = chart.renderer,
        xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        step = 2 * Math.PI / 72,
        theta = 0,
        d = ['M'],
        h = 0,
        k = 0,
        r = 1,
        x,
        y;

    for (;  theta < 2*Math.PI; theta += step) {
        x = h + 10 * r * Math.cos(theta);
        y = k - 0.5 * r * Math.sin(theta);

        d.push(xAxis.toPixels(x), yAxis.toPixels(y), 'L');
    }

    d[d.length - 1] = 'Z';

    renderer.path({
        d: d,
        stroke: 'red',
        strokeWidth: 2
    }).add();
});

});

Answer 1

It's caused by setting min and max values for both, xAxis and yAxis. You need to use chart.x/yAxis.setExtremes() function to set new extremes and draw new (or update old one) ellipse.

Answer 2

It is because you have bound the minimum and maximum values on both X-axis and Y-axis.

Replace this portion of code

xAxis: {
        tickInterval: 2,
        min: -14,
        max: 14,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        min: -1,
        max: 1,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]

With this one

xAxis: {
        tickInterval: 2,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]