Spline Chart

Select a theme:

                     anychart.onDocumentReady(function () {
    // create data set on our data
    var dataSet = anychart.data.set(getData());

    // map data for the first series, take x from the zero column and value from the first column of data set
    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});

    // map data for the second series, take x from the zero column and value from the second column of data set
    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});

    // create line chart
    var chart = anychart.line();

    // adding dollar symbols to yAxis labels
    chart.yAxis().labels().format('${%Value}');

    // turn on chart animation
    chart.animation(true);

    // turn on the crosshair
    chart.crosshair()
            .enabled(true)
            .yLabel({enabled: false})
            .yStroke(null)
            .xStroke('#cecece')
            .zIndex(99);

    chart.yAxis()
            .title('The Share Price')
            .labels({'padding': [5, 5, 0, 5]});
    chart.xAxis().title('Month/Day');

    // set chart title text settings
    chart.title('The cost of ACME\'s shares\ncompared with their main competitor during month');

    // create first series with mapped data
    var series_1 = chart.spline(seriesData_1);
    series_1.name('ACME Share Price');
    series_1.markers().zIndex(100);
    series_1.hovered().markers()
            .enabled(true)
            .type('circle')
            .size(4);

    // create second series with mapped data
    var series_2 = chart.spline(seriesData_2);
    series_2.name('The Competitor\'s Share Price');
    series_2.markers().zIndex(100);
    series_2.hovered().markers()
            .enabled(true)
            .type('circle')
            .size(4);

    // turn the legend on
    chart.legend()
            .enabled(true)
            .fontSize(13)
            .padding([0, 0, 20, 0]);

    // set container id for the chart
    chart.container('container');

    // initiate chart drawing
    chart.draw();
});

function getData() {
    return [
        ['9/1', 10, 30],
        ['9/2', 12, 32],
        ['9/3', 11, 35],
        ['9/4', 15, 40],
        ['9/5', 20, 42],
        ['9/6', 22, 35],
        ['9/7', 21, 36],
        ['9/8', 25, 31],
        ['9/9', 31, 35],
        ['9/10', 32, 36],
        ['9/11', 28, 40],
        ['9/12', 29, 42],
        ['9/13', 40, 40],
        ['9/14', 41, 38],
        ['9/15', 45, 40],
        ['9/16', 50, 40],
        ['9/17', 65, 38],
        ['9/18', 45, 36],
        ['9/19', 50, 30],
        ['9/20', 51, 29],
        ['9/21', 65, 28],
        ['9/22', 60, 25],
        ['9/23', 62, 28],
        ['9/24', 65, 29],
        ['9/25', 45, 30],
        ['9/26', 55, 40],
        ['9/27', 59, 32],
        ['9/28', 52, 33],
        ['9/29', 53, 34],
        ['9/30', 40, 30],
        ['9/31', 45, 35]
    ]
}

Spline Charts are quite similar to Line Charts, but there is a function that is piecewise-defined by polynomial functions, and which possesses a high degree of smoothness at the places where the polynomial pieces connect (which are known as knots), and this function is used to “smooth” the corners. Spline chart is used to show changes in time, continuous data that be represented in a table on a worksheet, like temperature or rates changes.

The difference between line and spline chart is in series display: while the Line Chart series look like a polyline, Spline Charts’ series look smooth and soft.

This simple spline chart shows rise and fall of the ACME Corp. and its main competitor’s share prices during one month, there are two series, one for each company. The vertical crosshair is enabled to see both points in the same category. A tooltip is shown when any point is hovered; the title of the tooltip is the category name and the rest of the information (series names and values) is shown in the tooltip body.