CODEWITHSUNDEEP
d3.jsdc.jscrossfilter
pramod24
pramod24

Reputation: 1116

how to display dates in selected month and year dc.js

I have a barchart and yearwise, monthwise, datewise linecharts. All the graphs are showing the data correctly.

When I select the particular year and particular month I want the datewise linechart and datewise barchart to display only the selected month. But now it's displaying all the dates of the year.

My code is:

        skuRowChart = dc.rowChart("#chart-row-spenders");
        yearPieChart = dc.pieChart("#chart-pie-year");
        yearLineChart = dc.lineChart('#Yearly-move-chart');
        spendHistChart22 = dc.barChart("#chart-hist-spend22");
        moveChart1 = dc.lineChart('#monthly-move-chart1');
        monthBarChart = dc.barChart("#chart-row-barchart");
        movelineChart = dc.lineChart("#monthly-move-chart");

        function reduceAdd(p, v) {
            ++p.count;
            p.total += v.sr;
            p.average = p.count ? p.total / p.count : 0;
            return p;
        }

        function reduceRemove(p, v) {
            --p.count;
            p.total -= v.sr;
            p.average = p.count ? p.total / p.count : 0;
            return p;
        }

        function reduceInitial() {
            return {
                count: 0,
                total: 0,
                average: 0
            };
        }

        var parseDate = d3.time.format("%m/%d/%Y").parse;
        var yearFormat = d3.time.format('%Y');
        var dayformat = d3.time.format('%Y-%m-%d');
        var monthFormat = d3.time.format("%m");
        //var monthNameFormat = d3.time.format("%b");
        var monthNameFormat = d3.time.format('%m.%b');

        var spendData = [{
                ct: 'KF',
                kw: 'Amazon',
                sr: '35978',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Amazon',
                sr: '32178',
                sd: '11/2/2016'
            },
            {
                ct: 'KF',
                kw: 'Amazon',
                sr: '30978',
                sd: '1/2/2017'
            },
            {
                ct: 'KF',
                kw: 'Amazon',
                sr: '28978',
                sd: '1/15/2017'
            },
            {
                ct: 'KF',
                kw: 'Build',
                sr: '28343',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Build',
                sr: '29653',
                sd: '11/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Build',
                sr: '26343',
                sd: '10/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Build',
                sr: '28343',
                sd: '2/2/2017'
            },
            {
                ct: 'KF',
                kw: 'Build',
                sr: '28343',
                sd: '3/26/2017'
            },
            {
                ct: 'KF',
                kw: 'Homedepot',
                sr: '221206',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Homedepot',
                sr: '203206',
                sd: '11/27/2016'
            },
            {
                ct: 'KF',
                kw: 'Homedepot',
                sr: '193206',
                sd: '10/2/2016'
            },
            {
                ct: 'KF',
                kw: 'wayfair',
                sr: '77794',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'wayfair',
                sr: '71794',
                sd: '11/9/2016'
            },
            {
                ct: 'KF',
                kw: 'wayfair',
                sr: '70794',
                sd: '1/9/2017'
            },
            {
                ct: 'KF',
                kw: 'wayfair',
                sr: '74794',
                sd: '2/19/2017'
            },
            {
                ct: 'KF',
                kw: 'wayfair',
                sr: '74794',
                sd: '3/21/2017'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '408684',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '42684',
                sd: '11/22/2016'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '46684',
                sd: '10/2/2016'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '496684',
                sd: '1/2/2017'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '49684',
                sd: '2/2/2017'
            },
            {
                ct: 'KF',
                kw: 'Houzz',
                sr: '49664',
                sd: '3/2/2017'
            },
            {
                ct: 'KF',
                kw: 'express',
                sr: '32004',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'express',
                sr: '30004',
                sd: '11/2/2016'
            },
            {
                ct: 'KF',
                kw: 'express',
                sr: '35004',
                sd: '10/2/2016'
            },
            {
                ct: 'KF',
                kw: 'express',
                sr: '35004',
                sd: '12/2/2016'
            },
            {
                ct: 'KF',
                kw: 'yahoo',
                sr: '115618',
                sd: '12/29/2016'
            },
            {
                ct: 'KF',
                kw: 'yahoo',
                sr: '12546',
                sd: '10/2/2016'
            },
            {
                ct: 'KF',
                kw: 'yahoo',
                sr: '65423',
                sd: '11/29/2016'
            },
            {
                ct: 'KF',
                kw: 'yahoo',
                sr: '25698',
                sd: '10/29/2016'
            },
            {
                ct: 'KF',
                kw: 'google',
                sr: '404991',
                sd: '1/29/2017'
            },
            {
                ct: 'KF',
                kw: 'google',
                sr: '404991',
                sd: '2/2/2017'
            },
            {
                ct: 'KF',
                kw: 'google',
                sr: '404991',
                sd: '3/12/2017'
            },
            {
                ct: 'KF',
                kw: 'google',
                sr: '404991',
                sd: '3/3/2017'
            },
            {
                ct: 'KF',
                kw: 'pingserach',
                sr: '273944',
                sd: '12/29/2016'
            }
        ];
        // d3.csv("hhh.csv", function (error, salesrank) { 
        spendData.forEach(function(d) {
            d.sr = +d.sr;
            d.Date = parseDate(d.sd);
            d.Year = yearFormat(d.Date);
            d.date11 = dayformat(d.Date);
            d.Month = monthNameFormat(d.Date);
        });
        var ndx = crossfilter(spendData);
        var all = ndx.groupAll();
        SkuDim = ndx.dimension(function(d) {
            return d.kw;
        });
        spendPerSku = SkuDim.group().reduceCount();
        yearDim = ndx.dimension(function(d) {
            return d.Year;
        });
        year_total = yearDim.group().reduceCount(function(d) {
            return d.sr;
        });
        exptAvgGroup = yearDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
        monthDim = ndx.dimension(function(d) {
            return d.Month;
        });
        exptAvgGroup11 = monthDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
        month_total = monthDim.group().reduceCount(function(d) {
            return d.sr;
        });
        daillyDim = ndx.dimension(function(d) {
            return d.date11;
        });
        dailly_total = daillyDim.group().reduceCount(function(d) {
            return d.sr;
        });
        exptAvgGroup111 = daillyDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

        skuRowChart
            .width(350)
            .height(300)
            .dimension(SkuDim)
            .group(spendPerSku)
            .elasticX(true)
            .x(d3.scale.linear().domain([6, 20]))
            .ordering(function(d) {
                return -d.value
            })
            // .cap(40)
            //.margins({top: -30, left: 0, right: 0, bottom: 0})
            .controlsUseVisibility(true);
        skuRowChart.data(function(group) {
            return group.top(50);
        });



        yearPieChart
            .width(250).height(250)
            .dimension(yearDim)
            .group(year_total)
            .innerRadius(60)
            .controlsUseVisibility(true);



        yearLineChart
            .width(380)
            .height(280)
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .renderArea(true)
            .valueAccessor(function(p) {
                //console.log("p.value.average: ", p.value.average) //displays the avg fine
                return d3.round(p.value.average, 0);
            })
            //.brushOn(true)
            .elasticY(true)
            .xAxisLabel('Years')
            .yAxisLabel('Review Count')
            //.dimension(moveMonths)
            .dimension(yearDim)
            .group(exptAvgGroup)
            //.margins({ top: 10, left: 60, right:40, bottom: 60 }) 
            .margins({
                top: 0,
                left: 60,
                right: 30,
                bottom: 60
            })


        spendHistChart22
            .width(400).height(280)
            .dimension(monthDim)
            //.dimension(dateeddim)
            // .group(dateeddimGroup)
            .group(month_total)
            .xAxisLabel('Months')
            .yAxisLabel('')
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .ordering(function(d) {
                return d.key
            })
            .elasticX(true)

            .elasticY(true)
            .margins({
                top: 10,
                left: 60,
                right: 40,
                bottom: 60
            })

            .controlsUseVisibility(true)
        spendHistChart22.xAxis().tickFormat(d => d.substr(3))


        moveChart1
            .width(380)
            .height(310)
            //.x(d3.scale.ordinal().domain(map(function (d) {return d.Month;})))
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .valueAccessor(function(p) {
                //console.log("p.value.average: ", p.value.average) //displays the avg fine
                return d3.round(p.value.average, 0);
            })
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .renderArea(true)
            //.clipPadding(10)
            //.brushOn(false)
            .elasticY(true)
            .xAxisLabel('Months')
            .yAxisLabel('')
            .dimension(monthDim)
            .group(exptAvgGroup11)

            .margins({
                top: 40,
                left: 60,
                right: 30,
                bottom: 60
            })
        moveChart1.xAxis().tickFormat(d => d.substr(3))

        monthBarChart
            .width(400).height(280)
            .dimension(daillyDim)
            .group(exptAvgGroup111)

            .xAxisLabel('Dates')
            .yAxisLabel('salesrank(average)')
            .valueAccessor(function(p) {
                return d3.round(p.value.average, 0);
            })
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .ordering(function(d) {
                return d.key
            })
            .elasticX(true)
            .elasticY(true)
            .margins({
                top: 10,
                left: 70,
                right: 40,
                bottom: 80
            })
            .controlsUseVisibility(true)
            .renderlet(function(chart) {
                chart.selectAll("g.x text").attr('dx', '-30').attr('dy', '4').attr('transform', "rotate(-45)");
            });
        // monthBarChart.xAxis().tickFormat(d => d.substr(3))

        movelineChart
            .width(380)
            .height(300)
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .renderArea(true)
            .valueAccessor(function(p) {
                //console.log("p.value.average: ", p.value.average) //displays the avg fine
                return d3.round(p.value.average, 0);
            })
            //.brushOn(true)
            .elasticY(true)
            .xAxisLabel('Dates')
            .yAxisLabel('salesrank(average)')
            .dimension(daillyDim)
            .group(exptAvgGroup111)
            .margins({
                top: 40,
                left: 70,
                right: 30,
                bottom: 80
            })
            .renderlet(function(chart) {
                chart.selectAll("g.x text").attr('dx', '-30').attr('dy', '4').attr('transform', "rotate(-45)");
            });



        dc.renderAll();

my Fiddle here: https://jsfiddle.net/pramod24/q4aquukz/4/

Upvotes: 1

Views: 1037

Answers (1)

Gordon
Gordon

Reputation: 20140

You may need to modify remove_empty_bins() if, for example, your data is aggregated as objects.

Here you just need to specify the total field instead of looking at the whole object (which is never equal to zero):

                function remove_empty_bins(source_group) {
                    return {
                        all: function () {
                            return source_group.all().filter(function (d) {
                                return d.value.total != 0;
                            });
                        }
                    };
                }

Also you neglected to set elasticX(true) for the line chart.

Fork of your fiddle: https://jsfiddle.net/gordonwoodhull/1q87gufL/1/

The transitions are kind of crazy looking, see e.g. #1262.

Upvotes: 2

Related Questions