html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create a stage    

    stage = anychart.graphics.create("container");

​

    // set the data

    var table = anychart.data.table('x');

    table.addData(data_us_population());

    // map the data

    mapping = table.mapAs({x:'x', value:'value'});

​

    // set the chart type

    var chart = anychart.stock();

​

    // set the series type and title

    var series = chart.plot(0).line(mapping);

    series.name("Population");

​

    // format y-axis labels

    chart.plot(0).yAxis().labels().format("{%Value}m");

​

    // set the chart title and padding

    chart.title('Switching the Series Type in Stock Charts');

    chart.title().padding(20);

​

    // create a scroller series with values

    var scrollerSeries = chart.scroller().area(table.mapAs({'value': 'value'}));

​

    // set the chart container and initiate drawing the chart

    chart.container(stage);

    chart.draw();

​

    // create a label for switching to the line series

    createLabel("Switch to Line", 10, function() {

// change the series type

series.seriesType("line");

scrollerSeries.seriesType("line");

chart.title("Switching the Series Type in Stock Charts \n Line");

    });    

​

    // create a label for switching to the column series

    createLabel("Switch to Column", 127, function() {

// change the series type

series.seriesType("column");

scrollerSeries.seriesType("column");

chart.title("Switching the Series Type in Stock Charts \n Column");

    });    

​

    // create a label for switching to the area series

    createLabel("Switch to Area", 265, function() {

// change the series type

series.seriesType("area");

scrollerSeries.seriesType("area");

chart.title("Switching the Series Type in Stock Charts \n Area");

    });    

​

});

​

// a helper function for creating buttons

function createLabel(text, offset, action){

    var label = anychart.standalones.label();

    label.background({fill: "#1976d2"});

    label.text(text);

    label.fontColor("#fff");

    label.padding(5);

    label.parentBounds(offset, 5, 130, 100);    

    label.listen("click", action);

    label.container(stage);

    label.draw();

    label.listen("mouseOver", function(){

label.background().fill("#1976d2 0.5")

document.body.style.cursor = "pointer";

label.draw();

    });

    label.listen("mouseOut", function(){

label.background().fill("#1976d2")

document.body.style.cursor = "auto";

label.draw();

    });    

    return label;

}   

​

// a helper function for setting the data

function data_us_population() {

return [

    {x:'1790-01-01', value:3.929214},

    {x:'1795-01-01', value:4.390561},

    {x:'1800-01-01', value:5.236631},

    {x:'1805-01-01', value:5.989289},

    {x:'1810-01-01', value:7.239881},

    {x:'1815-01-01', value:8.722382},

    {x:'1820-01-01', value:9.638453},

    {x:'1825-01-01', value:10.923857},

    {x:'1830-01-01', value:12.866020},

    {x:'1835-01-01', value:15.454230},

    {x:'1840-01-01', value:17.069453},

    {x:'1845-01-01', value:19.234543},

    {x:'1850-01-01', value:23.191876},

    {x:'1855-01-01', value:28.347121},

    {x:'1860-01-01', value:31.443321},

    {x:'1865-01-01', value:34.098412},

    {x:'1870-01-01', value:38.558371},

    {x:'1875-01-01', value:44.728322},

    {x:'1880-01-01', value:49.371340},

    {x:'1885-01-01', value:53.989443},

    {x:'1890-01-01', value:62.979766},

    {x:'1895-01-01', value:71.883243},

    {x:'1900-01-01', value:76.212168},

    {x:'1905-01-01', value:85.023411},

    {x:'1910-01-01', value:92.228496},

    {x:'1915-01-01', value:100.378232},

    {x:'1920-01-01', value:106.021537},

    {x:'1925-01-01', value:118.323005},

    {x:'1930-01-01', value:123.202624},

    {x:'1935-01-01', value:126.232034},

    {x:'1940-01-01', value:132.164569},

    {x:'1945-01-01', value:144.773641},

    {x:'1950-01-01', value:151.325798},

    {x:'1955-01-01', value:160.460555},

    {x:'1960-01-01', value:179.323175},

    {x:'1965-01-01', value:188.232951},

    {x:'1970-01-01', value:203.211926},

    {x:'1975-01-01', value:215.789873},

    {x:'1980-01-01', value:226.545805},

    {x:'1985-01-01', value:239.905274},

    {x:'1990-01-01', value:248.709873},

    {x:'1995-01-01', value:272.119084},

    {x:'2000-01-01', value:281.421906},

    {x:'2005-01-01', value:299.456285},

    {x:'2010-01-01', value:308.745538},

    {x:'2015-01-01', value:318.914629}

]};