f[b] is not a function in techan.js

[shamisheikh]

I am removing the left axis then grid lines are distrubed and get a error like f[b] is not a function. here it is my code as if(clstatus == true) has false then it gives an error like f[b] is not a function.

here it is my code.

function AppleDataInCandlestic(days) { $("#infobar").css("display", 'block'); var svg = d3.select("svg").remove(); var margin = { top: 0, right: 0, bottom: 30, left: 50 }, width = 1010 - margin.left - margin.right, height = 526 - margin.top - margin.bottom;

        var parseDate = d3.timeParse("%d-%b-%y");

        var x = techan.scale.financetime()
                        .range([0, width]);

        var y = d3.scaleLinear()
                .range([height, 0]);

        var zoom = d3.zoom()
            .on("zoom", zoomed);

        var zoomableInit;

        var candlestick = techan.plot.candlestick()
                .xScale(x)
                .yScale(y);

        var yVolume = d3.scaleLinear()
               .range([y(0), y(0.2)]);

        var sma0 = techan.plot.sma()
                .xScale(x)
                .yScale(y);

        var sma0Calculator = techan.indicator.sma()
                .period(10);

        var sma1 = techan.plot.sma()
                .xScale(x)
                .yScale(y);

        var sma1Calculator = techan.indicator.sma()
                .period(20);

        var volume = techan.plot.volume()
                .accessor(candlestick.accessor())   // Set the accessor to a ohlc accessor so we get highlighted bars
                .xScale(x)
                .yScale(yVolume);

        var xAxis = d3.axisBottom()
                .scale(x)
         .tickSizeInner(-height)
    .tickSizeOuter(0)
    .tickPadding(10);

        var yAxis = d3.axisLeft()
                .scale(y)
        .tickSizeInner(-width)
    .tickSizeOuter(0)
    .tickPadding(10);

        var zAxis = d3.axisRight()
            .scale(y)
            .tickSizeInner(-width)
            .tickSizeOuter(0)
            .tickPadding(10);

        var volumeAxis = d3.axisRight(yVolume)
               .ticks(3)
               .tickFormat(d3.format(",.3s"));

        var timeAnnotation = techan.plot.axisannotation()
                .axis(xAxis)
                .orient('bottom')
                .format(d3.timeFormat('%Y-%m-%d'))
                .width(65)
                .height(20) //show time box height & width
                .translate([0, height]);

        //var closeAnnotation = techan.plot.axisannotation()
        //.axis(zAxis)
        //.orient('right')
        //.format(d3.format(',.2f'))
        //.translate([x(1), 0]);

        if (clStatus == true) {
            var ohlcAnnotation = techan.plot.axisannotation()
                    .axis(yAxis)
                    .orient('left')
                    .format(d3.format(',.2f'));
        }
        if (crStatus == true) {
            var ohlcRightAnnotation = techan.plot.axisannotation()
                        .axis(zAxis)
                        .orient('left')
                        .format(d3.format(',.2f'))
                        .accessor(candlestick.accessor())
                        .translate([width, 0]);
        }

        var volumeAnnotation = techan.plot.axisannotation()
                .axis(volumeAxis)
                .orient('right')
                .width(35);

        var dataOHLC;

        var crosshair = techan.plot.crosshair()
                .xScale(x)
                .yScale(y)
                .xAnnotation(timeAnnotation)
                .yAnnotation([ohlcAnnotation, volumeAnnotation])
                .on("move", move);

        var svg = d3.select("#DivChartShow").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .attr("class", "chartCandlestick")
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        d3.csv("/Content/data2.csv", function (error, data) {

            // for filter data by days
            if (days != undefined) {

                var today = new Date();
                today.setDate(today.getDate() - days);

                var dd = today.getDate();
                var mm = today.getMonth() + 1;
                var yyyy = today.getFullYear();

                if (dd < 10) {
                    dd = '0' + dd;
                }
                if (mm < 10) {
                    mm = '0' + mm;
                }
                var today = mm + '/' + dd + '/' + yyyy;

                var cutoffDate = moment(today).format('DD-MMM-YY');

                data = data.filter(function (i) {
                    return parseDate(i.Date) > parseDate(cutoffDate);
                });
            }
            var accessor = candlestick.accessor();
            data = data.slice(0,200).map(function (d) {
                return {
                    date: parseDate(d.Date),
                    open: +d.Open,
                    high: +d.High,
                    low: +d.Low,
                    close: +d.Close,
                    volume: +d.Volume
                };
            }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

            dataOHLC = data;

            var FirstRecord = data[0];

            var defs = svg.append("defs");

            defs.append("clipPath")
                    .attr("id", "ohlcClip")
                .append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                // Right Axis
                .attr("z", 0)
                    .attr("width", width)
                    .attr("height", height);

            // .attr("class", "graph-svg-component");

            var ohlcSelection = svg.append("g")
                    .attr("class", "candlestick")
                    .attr("transform", "translate(0,0)");

            ohlcSelection.append("g")
                    .attr("class", "volume")
                    .attr("clip-path", "url(#ohlcClip)");

            ohlcSelection.append("g")
                    .attr("class", "candlestick")
                    .attr("clip-path", "url(#ohlcClip)");

            ohlcSelection.append("g")
                    .attr("class", "indicator sma ma-0")
                    .attr("clip-path", "url(#ohlcClip)");

            ohlcSelection.append("g")
                    .attr("class", "indicator sma ma-1")
                    .attr("clip-path", "url(#ohlcClip)");

            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")");

            //svg.append("g")
            //        .attr("class", "y axis")
            //        .append("text")
            //        .attr("transform", "rotate(-90)")
            //        .attr("y", 6)
            //        .attr("dy", ".71em")
            //        .style("text-anchor", "end")
            //        .text("Price ($)");
            if (clStatus == true) {
                svg.append("g")
                  .attr("class", "y axis");

                //svg.append("g")
                //        .attr("class", "y axis")
                //        .append("text")
                //        .attr("transform", "rotate(-90)")
                //        .attr("y", 6)
                //        .attr("dy", ".71em")
                //        .style("text-anchor", "end")
                //        .text("Price ($)");

            }
            if (crStatus == true) {
                svg.append("g")
               .attr("class", "y axis right")
               .attr("transform", "translate(" + width + ",0)");

                //svg.append("g")
                //.attr("class", "y axis")
                //.attr("transform", "translate(" + width + ",0)")
                //.call(yAxis);

                // svg.append("g")
                //.attr("transform", "translate(" + width + ",0)")
                //.call(d3.axisRight(y));

                //svg.append("g")
                //.attr("class", "y axis right")
                //.attr("transform", "translate(" + width + " ,0)")
                //.style("fill", "red")
                //.call(zAxis);
            }

            //svg.append("g")
            //       .attr("class", "volume axis");

            svg.append('g')
                    .attr("class", "crosshair ohlc");

            //coordsText = svg.append('text')
            //   .style("text-anchor", "end")
            //   .style("font-size", "15px")
            //   .style("fill", "#666")
            //   .attr("class", "coords")
            //   .attr("x", 370)
            //   .attr("y", 32)

            svg.call(zoom);

            x.domain(data.map(candlestick.accessor().d));
            y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());

            yVolume.domain(techan.scale.plot.volume(data).domain());

            svg.selectAll("g.candlestick").datum(data);
            svg.selectAll("g.volume").datum(data);
            //svg.selectAll("g.volume.axis").datum(data);

            // Data to display initially
            //draw(data.slice(0, data.length - 20)); // to show partially data
            draw(data.slice(0, data.length));   // to show all data
            // Only want this button to be active if the data has loaded
            d3.select("#btnUpdate").on("click", function () { draw(data); }).style("display", "inline");
            zoomableInit = x.zoomable().clamp(false).copy();

            d3.select("#infoopen").text(FirstRecord.open);
            d3.select("#infohigh").text(FirstRecord.high);
            d3.select("#infolow").text(FirstRecord.low);
            d3.select("#infoclose").text(FirstRecord.close);

            if (FirstRecord.close > FirstRecord.open) {
                d3.select("#infoopen").style('color', '#00AA00'); //for green
                d3.select("#infohigh").style('color', '#00AA00'); //for green
                d3.select("#infolow").style('color', '#00AA00'); //for green
                d3.select("#infoclose").style('color', '#00AA00'); //for green
            }
            else {
                d3.select("#infoopen").style('color', '#FF0000');  // for red
                d3.select("#infohigh").style('color', '#FF0000');
                d3.select("#infolow").style('color', '#FF0000');
                d3.select("#infoclose").style('color', '#FF0000');
            }
        });

        function draw(data) {

            //x.domain(data.map(candlestick.accessor().d));
            //y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());
            //svg.selectAll("g.candlestick").datum(data).call(candlestick);

            svg.selectAll("g.candlestick").call(candlestick);
            svg.selectAll("g.x.axis").call(xAxis);
            svg.selectAll("g.y.axis").call(yAxis);
            //Right Axis
            // svg.selectAll("g.z.axis").call(zAxis);

            //svg.selectAll("g.volume.axis").call(volumeAxis);

            //svg.select("g.candlestick").datum(data).call(candlestick);
            //svg.select("g.sma.ma-0").datum(sma0Calculator(data)).call(sma0);
            //svg.select("g.sma.ma-1").datum(sma1Calculator(data)).call(sma1);
            //svg.select("g.volume").datum(data).call(volume);

            svg.select("g.crosshair.ohlc").call(crosshair);
            svg.select("g.volume").call(volume);
        }

        function zoomed() {
            var rescaledY = d3.event.transform.rescaleY(y);
            yAxis.scale(rescaledY);
            candlestick.yScale(rescaledY);

            // Emulates D3 behaviour, required for financetime due to secondary zoomable scale
            x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());

            draw();

        }

        function move(coords) {
            //coordsText.text(
            //         "Date : " + timeAnnotation.format()(coords.x) + "     Price : " + ohlcAnnotation.format()(coords.y) //+ "     Open : " + closeAnnotation.format()(coords.close) + "     Close : " +(coords.abc)
            //);

            d3.select("#infoopen").text(ohlcAnnotation.format()(getOpen(dataOHLC, coords.x)));
            d3.select("#infohigh").text(ohlcAnnotation.format()(getHigh(dataOHLC, coords.x)));
            d3.select("#infolow").text(ohlcAnnotation.format()(getLow(dataOHLC, coords.x)));
            d3.select("#infoclose").text(ohlcAnnotation.format()(getClose(dataOHLC, coords.x)));
        }

        function getLow(data, coord) {
            var myData = $.grep(data, function (e) { return e.date == coord; });
            if (myData.length > 0)
            {
                if (myData[0].close > myData[0].open)
                {
                    d3.select("#infoopen").style('color', '#00AA00'); //for green
                }
                else
                {
                    d3.select("#infoopen").style('color', '#FF0000');  // for red
                }
                return myData[0].low;
            }
            else
            {
                return null;
            }

        }
        function getHigh(data, coord) {
            var myData = $.grep(data, function (e) { return e.date == coord; });
            if (myData.length > 0) {
                if (myData[0].close > myData[0].open) {
                    d3.select("#infohigh").style('color', '#00AA00'); //for green
                }
                else {
                    d3.select("#infohigh").style('color', '#FF0000');  // for red
                }
                return myData[0].high;
            }
            else {
                return null;
            }
        }
        function getOpen(data, coord) {
            var myData = $.grep(data, function (e) { return e.date == coord; });
            if (myData.length > 0) {
                if (myData[0].close > myData[0].open) {
                    d3.select("#infolow").style('color', '#00AA00'); //for green
                }
                else {
                    d3.select("#infolow").style('color', '#FF0000');  // for red
                }
                return myData[0].open;
            }
            else {
                return null;
            }
        }
        function getClose(data, coord) {
            var myData = $.grep(data, function (e) { return e.date == coord; });
            if (myData.length > 0) {
                if (myData[0].close > myData[0].open) {
                    d3.select("#infoclose").style('color', '#00AA00'); //for green
                }
                else {
                    d3.select("#infoclose").style('color', '#FF0000');  // for red
                }
                return myData[0].close;
            }
            else {
                return null;
            }
        }
    }