html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

// create data table on loaded data

var dataTable = anychart.data.table();

dataTable.addData([

['2014-01-02', 2011.08, 2022.37, 1999.77, 2006.6801, 1666780032],

['2014-01-05', 2020.78, 2047.36, 2020.78, 2047.36, 2362909952],

['2014-01-06', 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096],

['2014-01-07', 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936],

['2014-01-08', 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080],

['2014-01-09', 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936],

['2014-01-12', 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984],

['2014-01-13', 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096],

['2014-01-14', 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048],

['2014-01-15', 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888],

['2014-01-16', 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016],

['2014-01-20', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],

['2014-01-21', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],

['2014-01-22', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],

['2014-01-23', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],

['2014-01-26', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],

['2014-01-27', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],

['2014-01-28', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952],

['2014-01-29', 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000],

['2014-01-30', 2068.3601, 2078.8799, 2058.54, 2066.1499, 1931180032],

['2014-01-31', 2020.78, 2047.36, 2020.78, 2047.36, 2362909952],

['2014-02-01', 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096],

['2014-02-02', 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936],

['2014-02-03', 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080],

['2014-02-04', 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936],

['2014-02-05', 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984],

['2014-02-06', 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096],

['2014-02-07', 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048],

['2014-02-08', 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888],

['2014-02-09', 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016],

['2014-02-10', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],

['2014-02-11', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],

['2014-02-12', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],

['2014-02-13', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],

['2014-02-16', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],

['2014-02-17', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],

['2014-02-18', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952],

['2014-02-19', 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000],

['2014-02-20', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],

['2014-02-21', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],

['2014-02-22', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],

['2014-02-23', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],

['2014-02-26', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],

['2014-02-27', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],

['2014-02-28', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952]

]);

​

// map loaded data

var ohlc_mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4, 'volume': 5});

var line_high_mapping = dataTable.mapAs({'value': 2});

var line_close_mapping = dataTable.mapAs({'value': 4});

​

// create stock chart

var chart = anychart.stock();

​

// create first plot on the chart with column series

var plot = chart.plot(0);

var series = plot.ohlc(ohlc_mapping);

var line_high_series = plot.line(line_high_mapping);

var line_close_series = plot.line(line_close_mapping);

​

// colors

series.fallingStroke("#bbb");

series.risingStroke("#888");

line_high_series.stroke("#FF6D00");

line_close_series.stroke("#1565C0");

​

series.name("OHLC");

line_high_series.name("High values of the ACME Sales");

line_close_series.name("Close values of the ACME Sales");

​

var legend = plot.legend();

// enables legend

legend.enabled(true);

​

// turn the title on and set the position

legend.title(false);

​

// add a background

legend.background("#E1F5FE");

​

// change size in height

legend.height(35);

​

// adjust the paginator

legend.paginator(true);

legend.paginator().orientation("right");

​

// icons

var item = series.legendItem();

var item_h = line_high_series.legendItem();

var item_c = line_close_series.legendItem();

// set stroke of icons

item.iconStroke("#000")

item_h.iconStroke("#FF6D00");

item_c.iconStroke("#1565C0");

// set type of icon marker

item.iconType("ohlc");

item_h.iconType("line");

item_c.iconType("line");

​

// set legend position and items layout

legend.itemsLayout('horizontal');

legend.position('top');

legend.itemsFormat(function(){

if (this.open !== undefined){

    return "Open: " + this.open+ " High: " + this.high+ " Low: " + this.low+ " Close: " + this.close

}

});

​

// setting the space between the items

legend.itemsSpacing(10);

​

// enable the scroller

chart.scroller().enabled(true);

​

// adjust the scroller

chart.selectRange('2014-01-02','2014-02-03');

​

// set container id for the chart

chart.container('container');

​

// adjust the scroller axis

var labels = chart.scroller().xAxis().labels();

var minorLabels = chart.scroller().xAxis().minorLabels();

​

​

// initiate chart drawing

chart.draw();

});