html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

select {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // 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

    series = chart.plot(0).area(mapping);

    series.name("Population");

​

    // format y-axis labels

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

​

    // set the chart title

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

​

    // create a scroller series with values

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

    });    

​

// switch the series type

function switchType() {

  var select = document.getElementById("typeSelect");

  // switch the type of the main series

  series.seriesType(select.value);

  // switch the type of the scroller series

  scrollerSeries.seriesType(select.value);

}

​

// create 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}

]}