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_acme_stock());

    // map the data

    mapping = table.mapAs({'open':"o",'high': "h", 'low':"l", 'close':"c"});

    var chart = anychart.stock();

​

    // set the series type and title

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

    series.name("ACME Corp. stock prices");

​

    // 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 o/h/l/c values

    var scrollerSeries = chart.scroller().ohlc(table.mapAs({'open':"o",'high': "h", 'low':"l", 'close':"c"}));

​

    // set the chart container and initiate drawing the chart

    chart.container(stage);

    chart.draw();

​

    // create a label for switching to the OHLC series

    ohlcLabel = createLabel("Switch to OHLC", 10, function() {

// change the series type

series.seriesType("ohlc");

scrollerSeries.seriesType("ohlc");

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

    });    

​

    // create a label for switching to the Japanese candlestick series

    jcLabel = createLabel("Switch to Japanese Candlestick", 140, function() {

// change the series type

series.seriesType("candlestick");

scrollerSeries.seriesType("candlestick");

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

    });    

​

    // create label switching to the range area series

    rangeAreaLabel = createLabel("Switch to Range Area", 375, function() {

// change the series type

series.seriesType("rangeArea");

scrollerSeries.seriesType("rangeArea");

chart.title("Switching the Series Type in Stock Charts \n Range 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_acme_stock (){

return[

{'x': '2015-04-01', 'o': 18.23, 'h': 19.36, 'l': 18.18, 'c': 19.31},

{'x': '2015-04-02', 'o': 19.50, 'h': 19.89, 'l': 19.00, 'c': 19.29},

{'x': '2015-04-03', 'o': 19.13, 'h': 19.15, 'l': 18.43, 'c': 18.75},

{'x': '2015-04-06', 'o': 18.54, 'h': 18.76, 'l': 18.27, 'c': 18.76},

{'x': '2015-04-07', 'o': 18.76, 'h': 19.14, 'l': 18.63, 'c': 18.76},

{'x': '2015-04-08', 'o': 18.97, 'h': 19.62, 'l': 18.96, 'c': 19.19},

{'x': '2015-04-09', 'o': 19.45, 'h': 19.70, 'l': 19.22, 'c': 19.67},

{'x': '2015-04-13', 'o': 19.69, 'h': 19.85, 'l': 19.37, 'c': 19.59},

{'x': '2015-04-14', 'o': 19.44, 'h': 19.55, 'l': 19.00, 'c': 19.35},

{'x': '2015-04-15', 'o': 19.21, 'h': 19.25, 'l': 18.51, 'c': 18.83},

{'x': '2015-04-16', 'o': 19.16, 'h': 19.78, 'l': 18.99, 'c': 19.76},

{'x': '2015-04-17', 'o': 19.69, 'h': 19.69, 'l': 19.00, 'c': 19.20},

{'x': '2015-04-20', 'o': 18.89, 'h': 18.95, 'l': 18.57, 'c': 18.61},

{'x': '2015-04-21', 'o': 18.59, 'h': 19.08, 'l': 18.57, 'c': 18.97},

{'x': '2015-04-22', 'o': 18.76, 'h': 19.19, 'l': 18.70, 'c': 18.78},

{'x': '2015-04-23', 'o': 18.92, 'h': 18.94, 'l': 18.47, 'c': 18.92},

{'x': '2015-04-24', 'o': 19.82, 'h': 21.20, 'l': 19.50, 'c': 20.91},

{'x': '2015-04-27', 'o': 20.55, 'h': 20.82, 'l': 20.28, 'c': 20.40},

{'x': '2015-04-28', 'o': 20.25, 'h': 20.27, 'l': 19.79, 'c': 19.93},

{'x': '2015-04-29', 'o': 20.11, 'h': 20.89, 'l': 20.06, 'c': 20.25},

{'x': '2015-04-30', 'o': 20.60, 'h': 21.10, 'l': 20.01, 'c': 20.26},

{'x': '2015-05-01', 'o': 20.19, 'h': 20.35, 'l': 19.86, 'c': 20.24},

{'x': '2015-05-04', 'o': 20.37, 'h': 20.40, 'l': 19.98, 'c': 20.19},

{'x': '2015-05-05', 'o': 20.14, 'h': 20.24, 'l': 19.64, 'c': 19.79},

{'x': '2015-05-06', 'o': 20.06, 'h': 20.07, 'l': 19.61, 'c': 19.79},

{'x': '2015-05-07', 'o': 19.96, 'h': 19.99, 'l': 19.14, 'c': 19.32},

{'x': '2015-05-08', 'o': 19.46, 'h': 19.64, 'l': 19.14, 'c': 19.42},

{'x': '2015-05-11', 'o': 19.20, 'h': 19.73, 'l': 19.01, 'c': 19.32},

{'x': '2015-05-12', 'o': 19.51, 'h': 20.06, 'l': 19.47, 'c': 19.89},

{'x': '2015-05-13', 'o': 19.92, 'h': 20.00, 'l': 19.67, 'c': 19.75},

{'x': '2015-05-14', 'o': 19.83, 'h': 20.23, 'l': 19.80, 'c': 20.06},

{'x': '2015-05-15', 'o': 20.13, 'h': 20.50, 'l': 19.98, 'c': 20.22},

{'x': '2015-05-18', 'o': 20.36, 'h': 20.60, 'l': 20.24, 'c': 20.60},

{'x': '2015-05-19', 'o': 20.51, 'h': 20.74, 'l': 20.25, 'c': 20.31},

{'x': '2015-05-20', 'o': 20.41, 'h': 20.69, 'l': 20.22, 'c': 20.38},

{'x': '2015-05-21', 'o': 20.14, 'h': 20.23, 'l': 19.51, 'c': 19.82},

{'x': '2015-05-22', 'o': 19.93, 'h': 20.17, 'l': 19.47, 'c': 19.75},

{'x': '2015-05-26', 'o': 19.54, 'h': 20.45, 'l': 19.45, 'c': 20.34},

{'x': '2015-05-27', 'o': 20.25, 'h': 20.60, 'l': 20.07, 'c': 20.13},

{'x': '2015-05-28', 'o': 20.32, 'h': 20.63, 'l': 20.05, 'c': 20.45},

{'x': '2015-05-29', 'o': 20.56, 'h': 20.94, 'l': 20.30, 'c': 20.89},

{'x': '2015-06-01', 'o': 21.00, 'h': 21.50, 'l': 20.86, 'c': 21.40},

{'x': '2015-06-02', 'o': 21.36, 'h': 21.98, 'l': 21.20, 'c': 21.40},

{'x': '2015-06-03', 'o': 21.31, 'h': 21.76, 'l': 21.29, 'c': 21.73},

{'x': '2015-06-04', 'o': 21.77, 'h': 21.90, 'l': 21.58, 'c': 21.83},

{'x': '2015-06-05', 'o': 21.96, 'h': 22.31, 'l': 21.81, 'c': 22.14},

{'x': '2015-06-08', 'o': 21.98, 'h': 22.32, 'l': 21.63, 'c': 22.05},

{'x': '2015-06-09', 'o': 22.06, 'h': 22.32, 'l': 21.88, 'c': 22.08},

{'x': '2015-06-10', 'o': 22.17, 'h': 22.62, 'l': 22.12, 'c': 22.55},

{'x': '2015-06-11', 'o': 22.59, 'h': 23.26, 'l': 22.57, 'c': 22.83},

{'x': '2015-06-12', 'o': 22.90, 'h': 23.38, 'l': 22.74, 'c': 23.33},

{'x': '2015-06-15', 'o': 23.23, 'h': 23.54, 'l': 23.02, 'c': 23.42},

{'x': '2015-06-16', 'o': 23.47, 'h': 24.11, 'l': 23.44, 'c': 23.45},

{'x': '2015-06-17', 'o': 23.50, 'h': 23.82, 'l': 23.17, 'c': 23.68},

{'x': '2015-06-18', 'o': 23.62, 'h': 23.69, 'l': 23.30, 'c': 23.50},

{'x': '2015-06-19', 'o': 24.04, 'h': 24.34, 'l': 23.75, 'c': 24.07},

{'x': '2015-06-22', 'o': 23.95, 'h': 23.95, 'l': 23.25, 'c': 23.28},

{'x': '2015-06-23', 'o': 23.38, 'h': 23.66, 'l': 23.21, 'c': 23.34},

{'x': '2015-06-24', 'o': 23.45, 'h': 23.75, 'l': 23.36, 'c': 23.47},

{'x': '2015-06-25', 'o': 23.43, 'h': 23.92, 'l': 23.20, 'c': 23.79},

{'x': '2015-06-26', 'o': 23.57, 'h': 23.69, 'l': 23.32, 'c': 23.35},

{'x': '2015-06-29', 'o': 23.60, 'h': 24.03, 'l': 23.55, 'c': 23.86},

{'x': '2015-06-30', 'o': 23.97, 'h': 24.24, 'l': 23.63, 'c': 23.77},

{'x': '2015-07-01', 'o': 24.05, 'h': 24.30, 'l': 23.96, 'c': 24.04},

{'x': '2015-07-02', 'o': 23.76, 'h': 24.04, 'l': 23.21, 'c': 23.37}

]};