Long array of small data points is rendered as a jagged line

Question

The Goal

I'm attempting to render a long series of data (around 200 ticks, from small float values like 1.3223) into a line chart.

The Issue

When I use a series of data that changes only a small amount (around 0.0001 every tick), the chart is rendered as very jagged (scissor like). I would like to somehow fix it to have a "saner" radius between each point on the graph.

A Good Example

On the other hand, when rendering higher values (around 1382.21) with bigger difference between ticks (from 0.01 to 0.05 +/-) the graph is rendered more smooth and aesthetically pleasing.

Edit: As user Arie Shaw pointed out, the actual low or high values don't make a difference and it remains an issue of representing small "monotonous" changes is a less jagged form.

The Code

var initChart = function(data, container) {
    new Highcharts.Chart({
        chart: {
            type: "area",
            renderTo: container,
            zoomType: 'x'
        },
        title: {
            text: ''
        },
        xAxis: {
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        color: '#A3D8FF',
        plotOptions: {
            area: {
                fillColor: '#C6E5F4',
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: "TEST",
            data: data
        }]
    });
};

Both graphs, and sample data sets are presented in the following fiddle: http://jsfiddle.net/YKbxy/2/

Answer 1

The problem you're experiencing is unavoidable: If you have a lot of small variations over time, the graph is going to appear jagged provided that you show each data point.

The key point is that last phrase.

One way to 'smooth out' the rough parts would be to average the data. For example:

var myData = []; //... Some array of data; assuming just numbers

var averageData = function (data, factor) {
    var i, j, results = [], sum = 0, length = data.length, avgWindow;

    if (!factor || factor <= 0) {
        factor = 1;
    }

    // Create a sliding window of averages
    for(i = 0; i < length; i+= factor) {
        // Slice from i to factor
        avgWindow = data.slice(i, i+factor);
        for (j = 0; j < avgWindow.length; j++) {
            sum += avgWindow[j];
        }
        results.push(sum / avgWindow.length)
        sum = 0;
    }
    return results;
};

var var initChart = function(data, container) {
    new Highcharts.Chart({
        series: [{
            name: "TEST",
            data: averageData(myData, 2)
        }]
    });
});

This method also has the advantage that you could (potentially) reuse the function to compare the averaged data to the regular data, or even toggle between how much to average the data.