Stock_chart_modified

simple-stock-chart.js

import Ember from 'ember';

export default Ember.Route.extend({
  // chart instance
  chart: undefined,

  model: function() {
    let self = this;

    // load data from file
    return Ember.$.getJSON("stock-data.json").then(function(data) {
      return {
        chart: self._createChart(data),
        afterDraw: self.afterChartDraw
      };
    });
  },

  _createChart: function(data){
    // create data table on loaded data
    let dataTable = anychart.data.table();
    dataTable.addData(data);

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

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

    // create first plot on the chart
    let plot = this.chart.plot(0);
    plot.xGrid().enabled(true);
    plot.yGrid().enabled(true);
    plot.xMinorGrid().enabled(true);
    plot.yMinorGrid().enabled(true);

    // create EMA indicators with period 50
    plot.ema(dataTable.mapAs({'value': 4})).series().stroke('1.5 #455a64');

    let series = plot.candlestick(mapping).name('CSCO');
    series.legendItem().iconType('risingfalling');

    // create scroller series with mapped data
    this.chart.scroller().candlestick(mapping);
    
    this.chart.title('Click on plot');

    // set chart selected date/time range
    this.chart.selectRange('2007-01-03', '2007-05-20');
            //get xScale object
        var xScale = this.chart.xScale();
        var chartInst =  this.chart;
    this.chart.listen('click', function(event) {
          clickHandler(event);
        });

        //right click event handler
        function clickHandler(event) {
                
                var x = event.offsetX;  //X click coordinate on plot
                
                var plotWidth = chartInst.plot(0).getPixelBounds().width;   //plot bounds related to chart container
                var plotLeftoffset = chartInst.plot(0).getPixelBounds().left;   //plot left margin

                //is click on data area
                if (x < plotLeftoffset || x > plotLeftoffset + plotWidth) {
                    return;
                }

                //get date of click related to xScale
                var ratio = (x - plotLeftoffset) / plotWidth;
                var xDate = xScale.inverseTransform(ratio);

                //get data from clicked point
                var selectable = mapping.createSelectable();
                var interval = chartInst.grouping().getCurrentDataInterval();
                selectable.selectAll(interval.unit, interval.count);
                var select = selectable.search(xDate, "nearest");
                //get point value
                var value = select.get('close');
                //get point date (in milliseconds)
                var key = select.getKey();
                //format date and parse to string
                var pointDate = new Date(key);
                var pointDateString = String(pointDate.getFullYear())+ '.' + String(pointDate.getMonth() + 1) + '.' + String(pointDate.getDate());
                //get series ID from mapping properties
                var seriesId = mapping.seriesID;

                console.log('Series ID: ' + seriesId + ', Date: ' + pointDateString + ', Close: ' + value);
                
                chartInst.title('Series ID: ' + seriesId + ', Date: ' + pointDateString + ', Close: ' + value);
        }

    return this.chart;
  },

  afterChartDraw: function(chart){
    // create range picker
    let rangePicker = anychart.ui.rangePicker();
    // init range picker
    rangePicker.render(chart);

    // create range selector
    let rangeSelector = anychart.ui.rangeSelector();
    // init range selector
    rangeSelector.render(chart);
  }

});