html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

anychart.onDocumentReady(function () {

    anychart.data.loadCsvFile('https://cdn.anychart.com/csv-data/csco-daily.csv', function (data) {

        var dataTable = anychart.data.table()

        dataTable.addData(data)

        var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4, 'value': 4})

​

        var chart = anychart.stock()

        chart.scroller().enabled(false)

​

        var candlesPlot = chart.plot(0)

        candlesPlot.yGrid(true).xGrid(true)

        candlesPlot.yAxis(0).labels().position('inside')

        candlesPlot.yAxis(0).ticks().enabled(false)      

        candlesPlot.yAxis(0).orientation('right')

​

        var candlesLegend = candlesPlot.legend()

        candlesLegend.title(false)

        candlesLegend.fontSize(10)

​

        // Simple Moving Average

        candlesPlot.sma(mapping, 5).series()

        candlesPlot.sma(mapping, 10).series()

        candlesPlot.sma(mapping, 20).series()

        // Exponential Moving Average

        // candlesPlot.ema(mapping, 5).series()

        // candlesPlot.ema(mapping, 10).series()

        // candlesPlot.ema(mapping, 20).series()

​

        // Bollinger Bands indicator

        // candlesPlot.bbands(mapping)      

​

        var candleSeries = candlesPlot.candlestick(mapping)

        candleSeries.name('CSCO')

        candleSeries.legendItem().iconType('rising-falling')

        candleSeries.risingStroke("#24C780")

        candleSeries.risingFill("#24C780")

        candleSeries.fallingStroke("#FF694E")

        candleSeries.fallingFill("#FF694E")  

​

        candleSeries.maxLabels()

          .enabled(true)

          .position('center-top ')

          .format("{%high}")

          .fontWeight('bold')

          .fontColor('#6da632')

​

        candleSeries.minLabels()

          .enabled(true)

          .position('center-bottom')

          .format("{%low}")

          .fontWeight('bold')

          .fontColor('#d81e05')      

        // Volume

        var volumeMapping = dataTable.mapAs({

          'value': 5,

          'type': 'average'

        })      

        var volumePlot = chart.plot(1)

        volumePlot.height('20%')

        var volSeries =volumePlot.column(volumeMapping).name('Volume')

        volSeries.risingStroke("#24C780")

        volSeries.risingFill("#24C780")

        volSeries.fallingStroke("#FF694E")

        volSeries.fallingFill("#FF694E")        

        volumePlot.xAxis().enabled(false)

        volumePlot.yAxis().enabled(false)

        volumePlot.crosshair().yLabel().format('{%Value}{scale: (1000000)|(mln), decimalsCount: 0}')

        var volumeLegend = volumePlot.legend()

        volumeLegend.title(false)

        volumeLegend.fontSize(10)

        volumeLegend.title(false)

        // MACD

        var macdPlot = chart.plot(2)

        macdPlot.height('20%')

        macdPlot.xAxis().enabled(false)

       macdPlot.yAxis().enabled(false)

        var macdLegend = macdPlot.legend()

        macdLegend.fontSize(10)            

        macdLegend.title(false)

        var macd = macdPlot.macd(mapping, 12, 20, 9)

        macd.macdSeries().stroke('#0094FF')

        /*

        // RSI

        var rsiPlot = chart.plot(2)

        rsiPlot.height('20%')

        rsiPlot.xAxis().enabled(false)

        rsiPlot.yAxis(0).labels().position('inside')

        rsiPlot.yAxis(0).ticks().enabled(false)      

        rsiPlot.yAxis(0).orientation('right')

        var rsiLegend = rsiPlot.legend()

        rsiLegend.fontSize(10)            

        rsiLegend.title(false)

        var rsi7 = rsiPlot.rsi(mapping, 7).series()

        var rsi14 = rsiPlot.rsi(mapping, 14).series()

        var rsi21 = rsiPlot.rsi(mapping, 21).series()

      */

        var grouping = chart.grouping()

        grouping.maxVisiblePoints(50)

        // set chart selected date/time range

        chart.selectRange('2008-10-25', '2009-07-01')

        chart.container('container')

        chart.draw()

    })

})