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 () {

​

    // create data

    var data = [

      {x: Date.UTC(2015, 4, 1), open:18.23, high:19.36, low:18.18, close:19.31},

      {x: Date.UTC(2015, 4, 2), open:19.50, high:19.89, low:19.00, close:19.29},

      {x: Date.UTC(2015, 4, 3), open:19.13, high:19.15, low:18.43, close:18.75},

      {x: Date.UTC(2015, 4, 6), open:18.54, high:18.76, low:18.27, close:18.76},

      {x: Date.UTC(2015, 4, 7), open:18.76, high:19.14, low:18.63, close:18.76}

    ];

​

    // set the chart type

    var chart = anychart.ohlc();

​

    // set the series type

    series = chart.ohlc(data);

​

    // set the chart title

    chart.title("Switching the Series Type");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// switch the series type

function switchType() {

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

  series.seriesType(select.value);

}