How to use the d3fc.series function in d3fc

return null;
            } else {
                // This stops the brush data being overwritten by the point data
                return this.data;
            }
        });

    var brushMask = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; })
        .decorate(function(selection) {
            selection.enter().attr('fill', 'url("#brush-gradient")');
        });

    var brushLine = fc.series.line()
        .xValue(function(d) { return d.date; })
        .yValue(function(d) { return d.close; });

    var layoutWidth;

    var sampler = fc.data.sampler.largestTriangleThreeBucket()
        .x(function(d) { return xScale(d.date); })
        .y(function(d) { return yScale(d.close); });

    var brushMaskMulti = fc.series.multi()
        .series([brushMask, brushLine])
        .xScale(xScale)
        .yScale(yScale);

    function setHide(selection, brushHide) {
        selection.select('.plot-area')

var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();

    var navChart = fc.chart.cartesian(xScale, yScale)
        .yTicks(0)
        .margin({
            bottom: bottomMargin      // Variable also in navigator.less - should be used once ported to flex
        })
        .xOuterTickSize(0)
        .yOuterTickSize(0);

    var viewScale = fc.scale.dateTime();

    var area = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; });

    var line = fc.series.line()
        .xValue(function(d) { return d.date; })
        .yValue(function(d) { return d.close; });
    var brush = d3.svg.brush();
    var navMulti = fc.series.multi()
        .series([area, line, brush])
        .decorate(function(selection) {
            var enter = selection.enter();

            selection.selectAll('.background, .extent')
                .attr('height', extentHeight)
                .attr('y', borderWidth);

export default function() {
    var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();
    var trackingLatest = true;
    var yAxisWidth = 60;

    var multi = fc.series.multi();
    var chart = fc.chart.cartesian(xScale, yScale)
        .plotArea(multi)
        .xTicks(0)
        .yOrient('right')
        .margin({
            top: 0,
            left: 0,
            bottom: 0,
            right: yAxisWidth
        });
    var zoomWidth;

    function secondary(selection) {
        selection.each(function(model) {
            xScale.discontinuityProvider(model.discontinuityProvider);

);
    ohlcOption.option.extentAccessor = ['high', 'low'];

    var line = fc.series.line().xValue(function(d) {
      return d.date;
    });
    line.id = util.uid();
    var lineOption = model.menu.option(
      'Line',
      'line',
      line,
      'bf-icon-line-series'
    );
    lineOption.option.extentAccessor = 'close';

    var point = fc.series.point().xValue(function(d) {
      return d.date;
    });
    point.id = util.uid();
    var pointOption = model.menu.option(
      'Point',
      'point',
      point,
      'bf-icon-point-series'
    );
    pointOption.option.extentAccessor = 'close';

    var area = fc.series.area().xValue(function(d) {
      return d.date;
    });
    area.id = util.uid();
    var areaOption = model.menu.option(

dispatch.crosshairChange(undefined);
      });
    crosshair.id = util.uid();

    var gridlines = fc.annotation.gridline()
      .xTicks(0);
    var closeLine = fc.annotation.line()
      .orient('horizontal')
      .value(currentYValueAccessor)
      .label('')
      .decorate(function(g) {
          g.classed('close-line', true);
      });
    closeLine.id = util.uid();

    var multi = fc.series.multi()
        .key(function(series) { return series.id; })
        .mapping(function(series) {
            switch (series) {
            case closeLine:
                return [this.data[this.data.length - 1]];
            case crosshair:
                return crosshairData;
            default:
                return this.visibleData;
            }
        })
        .decorate(function(selection) {
            selection.enter()
                .select('.area')
                .attr('fill', 'url("#primary-area-series-gradient")');
        });

function initialiseSeriesSelector() {
    var candlestick = candlestickSeries();
    candlestick.id = util.uid();
    var candlestickOption = model.menu.option(
      'Candlestick',
      'candlestick',
      candlestick,
      'bf-icon-candlestick-series'
    );
    candlestickOption.isSelected = true;
    candlestickOption.option.extentAccessor = ['high', 'low'];

    var ohlc = fc.series.ohlc();
    ohlc.id = util.uid();
    var ohlcOption = model.menu.option(
      'OHLC',
      'ohlc',
      ohlc,
      'bf-icon-ohlc-series'
    );
    ohlcOption.option.extentAccessor = ['high', 'low'];

    var line = fc.series.line().xValue(function(d) {
      return d.date;
    });
    line.id = util.uid();
    var lineOption = model.menu.option(
      'Line',
      'line',

function initialiseIndicatorOptions() {
    var secondary = chart.secondary;

    var movingAverage = fc.series
      .line()
      .decorate(function(select) {
        select.enter().classed('movingAverage', true);
      })
      .xValue(function(d) {
        return d.date;
      })
      .yValue(function(d) {
        return d.movingAverage;
      });
    movingAverage.id = util.uid();

    var movingAverageOption = model.menu.option(
      'Moving Average',
      'movingAverage',
      movingAverage,

);
    lineOption.option.extentAccessor = 'close';

    var point = fc.series.point().xValue(function(d) {
      return d.date;
    });
    point.id = util.uid();
    var pointOption = model.menu.option(
      'Point',
      'point',
      point,
      'bf-icon-point-series'
    );
    pointOption.option.extentAccessor = 'close';

    var area = fc.series.area().xValue(function(d) {
      return d.date;
    });
    area.id = util.uid();
    var areaOption = model.menu.option(
      'Area',
      'area',
      area,
      'bf-icon-area-series'
    );
    areaOption.option.extentAccessor = 'close';

    var config = model.menu.dropdownConfig(null, false, true, true);

    var options = [
      candlestickOption,
      ohlcOption,

export default function() {
    var dispatch = d3.dispatch(event.viewChange);
    var volumeBar = fc.series.bar()
      .xValue(function(d) { return d.date; })
      .yValue(function(d) { return d.volume; });

    var chart = base()
        .series([volumeBar])
        .yTicks(4)
        .on(event.viewChange, function(domain) {
            dispatch[event.viewChange](domain);
        });

    function volume(selection) {
        selection.each(function(model) {
            var paddedYExtent = fc.util.extent()
                .fields(['volume'])
                .pad(0.08)(model.data);
            if (paddedYExtent[0] < 0) {