html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var dataSet = anychart.data.set([

        ['Day 1', 19, 1],

        ['Day 2', 1, 2],

        ['Day 3', 25, 1],

        ['Day 4', 18, 1],

        ['Day 5', 28, 1],

        ['Day 6', 48, 1],

        ['Day 7', 1, 24],

        ['Day 8', 1, 32],

        ['Day 9', 25, 1],

        ['Day 10', 20, 1]

    ]);

​

    var ridingData = dataSet.mapAs({x: 0, value: 1});

​

    var hikingData = dataSet.mapAs({x: 0, value: 2});

​

    var chart = anychart.line();

    chart.legend(true);

​

    var ridingSeries = chart.line(ridingData);

    ridingSeries.name('Riding');

​

    var hikingSeries = chart.line(hikingData);

    hikingSeries.name('Hiking');

    hikingSeries.stroke('#458b00');

​

    var numberOfPoints = ridingSeries.getStat('seriesPointCount');

​

    var latestPointRiding = ridingSeries.getPoint(numberOfPoints - 1);

    var latestPointHiking = hikingSeries.getPoint(numberOfPoints - 1);

​

    // Get the values of the latest points from both series

    var titleText = 'Distance (km) Today: Riding ~ ' + latestPointRiding.getStat('value') + ', Hiking ~ ' + latestPointHiking.getStat('value');

​

    chart.title({text: titleText, useHtml: true});

​

    chart.listen('pointsSelect', function(e){

        var selectedPointYear = e.point.getStat('categoryName');

        var subtitleText = "<span style='font-size:12'>" + selectedPointYear + ': ';

        for (var i = 0; i < e.points.length; i++) {

            subtitleText += e.points[i].getSeries().name() + ' ~ ' + e.points[i].getStat('value') + ', ';

        }

        subtitleText = subtitleText.slice(0, subtitleText.length - 2) + '</span>';

        chart.title(titleText + '<br>' + subtitleText);

    });

​

    chart.container('container');

    chart.draw();

});