html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    //create data set on our data,also we can pud data directly to series

    var dataSet = anychart.data.set([

        ['Jan', 22, 43, 75],

        ['Feb', 34, 45, 56],

        ['Mar', 16, 26, 67],

        ['Apr', 12, 86, 42],

        ['May', 41, 35, 17],

        ['Jun', 47, 31, 12],

        ['Jul', 39, 27, 9],

        ['Aug', 28, 16, 23],

        ['Sep', 21, 27, 47],

        ['Oct', 18, 31, 58],

        ['Nov', 24, 42, 69],

        ['Dec', 29, 39, 71]

    ]);

​

    //map data for the first series,take value from first column of data set

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

​

    //map data for the second series,take value from second column of data set

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

​

    //map data for the third series, take x from the zero column and value from the third column of data set

    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});

​

    //create line chart

    var chart = anychart.line();

​

    //turn on chart animation

    chart.animation(true);

​

    //turn on the crosshair

    chart.crosshair().enabled(true).yLabel().enabled(false);

    chart.crosshair().enabled(true).xLabel().enabled(false);

    chart.crosshair().enabled(true).yStroke(null);

​

    //set container id for the chart

    chart.container('container');

    chart.padding([10, 20, 5, 20]);

​

    //set yAxis title

    chart.yAxis().title('Times happened per month');

​

    /** We can edit series stroke by function in which context available

     *  @param color - stroke color

     *  @param style - dash lines style

     *  @return string/Object - acgraph.vector.Stroke type (string/Object)

     */

    var seriesStrokeFunction = function (color, style) {

        return {color: color, dash: style};

    };

​

​

    /** Helper Function to setup series

     *  @param series - stroke color

     *  @param name - stroke series name

     */

    var seriesConfiguration = function (series, name) {

        series.name(name);

        series.tooltip().title(false);

        series.tooltip().separator(false);

        series.tooltip().format(function () {

            return this.value + ' times'

        });

        series.hovered().markers().enabled(true).size(4);

        series.tooltip().position('right').anchor('left-bottom').offsetX(2).offsetY(5);

    };

​

    //temp variable to store series instance

    var series;

​

    //we can use local variables to change series settings

    series = chart.line(seriesData_1);

    series.stroke('#000000');

    seriesConfiguration(series, 'Purchase Returns');

​

​

    //or just use chaining calls

    series = chart.line(seriesData_2);

    series.stroke(seriesStrokeFunction('#6C6C6C', '3 5 10 5'));

    seriesConfiguration(series, 'Delivery Failure');

​

    //or access series by index from chart

    series = chart.line(seriesData_3);

    series.stroke(seriesStrokeFunction('#C8C8C8', '3 5'));

    seriesConfiguration(series, 'Order Cancellation');

​

    chart.interactivity().hoverMode('by-x');

    chart.tooltip().displayMode('separated');

    chart.tooltip().positionMode('point');

    //turn the legend on

    chart.legend().enabled(true).padding([0, 0, 10, 0]);

​

    //initiate chart drawing

    chart.draw();

});