Price Channels

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/csv-data/csco-daily.csv
      anychart.data.loadCsvFile(
        'https://cdn.anychart.com/csv-data/csco-daily.csv',
        function (data) {
          // create data table on loaded data
          var dataTable = anychart.data.table();
          dataTable.addData(data);

          // map loaded data for the ohlc series
          var mapping = dataTable.mapAs({
            open: 1,
            high: 2,
            low: 3,
            close: 4,
            value: {
              column: 4,
              type: 'close'
            }
          });

          // map loaded data for the scroller
          var scrollerMapping = dataTable.mapAs();
          scrollerMapping.addField('value', 5);

          // create stock chart
          var chart = anychart.stock();

          // create first plot on the chart
          var plot = chart.plot();
          plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);

          // create candlestick series
          var series = plot.candlestick(mapping).name('CSCO');

          // set legend icon type for candlestick series
          series.legendItem().iconType('rising-falling');

          // create price channels indicator
          var priceChannels = plot.priceChannels(mapping);

          // set indicator's range series high and low stroke settings
          priceChannels.rangeSeries().highStroke('navy');
          priceChannels.rangeSeries().lowStroke('orange');

          // set indicator's range series fill settings
          priceChannels.rangeSeries().fill('black .1');

          // set indicator's middle series stroke settings
          priceChannels.middleSeries().stroke('green', 2);

          // create scroller series with mapped data
          chart.scroller().line(mapping);

          // set chart selected date/time range
          chart.selectRange('2004-11-15', '2005-11-16');

          // create range picker
          var rangePicker = anychart.ui.rangePicker();

          // init range picker
          rangePicker.render(chart);

          // create range selector
          var rangeSelector = anychart.ui.rangeSelector();

          // init range selector
          rangeSelector.render(chart);

          // set container id for the chart
          chart.container('container');

          // initiate chart drawing
          chart.draw();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Price Channels

Price Channels
