NVD3 time formatting , line with focus chart

Question

I\'m using a fairly simple example of nvd3 line with focus chart. myData returns a JSON object from my php file of which the x-cordinates are numbers from 0-23. I w

Answer 1

After a lot of searching got it to work with this code.

chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());

var tickMultiFormat = d3.time.format.multi([ ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour ["%-I%p", function(d) { return d.getHours(); }], // not midnight ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st ["%Y", function() { return true; }] ]);

chart.xAxis.tickFormat(function (d) { return tickMultiFormat(new Date(d)); });

Answer 2

Following didn't work for me. chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());

In latest nvd3, you have to use following to update xScale. chart.xScale(d3.time.scale()); chart.focus.xScale(d3.time.scale());

Hope it helps someone.

Answer 3

also my solution for angular version:

var tickMultiFormat = d3.time.format.multi([
            ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour
            ["%-I%p", function(d) { return d.getHours(); }], // not midnight
            ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month
            ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st
            ["%Y", function() { return true; }]
        ]);


$scope.fraud_cases_area_options = {
            chart: {
                type: 'lineWithFocusChart',
                height: 300,
                noData: $scope.noDataMessage || 'No Data Available.',
                margin: {
                    top: 20,
                    right: 20,
                    bottom: 30,
                    left: 40
                },
                color: ['#d62728', '#5DB56A', '#9E9E9E', '#aec7e8'],
                x: function (d) {
                    "use strict";
                    return d[0];
                },
                y: function (d) {
                    "use strict";
                    return d[1];
                },
                xScale: d3.time.scale(),
                focus: {
                    xScale: d3.time.scale(),
                },
                useVoronoi: false,
                clipEdge: true,
                duration: 100,
                useInteractiveGuideline: true,
                showControls: false,
                showTotalInTooltip: true,
                xAxis: {
                    showMaxMin: false,
                    tickFormat: function (d) { return tickMultiFormat(new Date(d)); }
                    /*function (d) {
                        "use strict";
                        return d3.time.format("%d.%m.%Y")(new Date(d))
                    }*/,
                },
                x2Axis: {
                    showMaxMin: false,
                    tickFormat: /*function (d) { return tickMultiFormat(new Date(d)); }*/
                    function (d) {
                     "use strict";
                     return d3.time.format("%d.%m.%Y")(new Date(d))
                     },
                },
                yAxis: {
                    tickFormat: function (d) {
                        "use strict";
                        // console.log("error",d3.format(',.2f')(d));
                        return d3.format(',.0f')(d);
                    }
                },
                zoom: {
                    enabled: false,
                    scaleExtent: [1, 10],
                    useFixedDomain: false,
                    useNiceScale: false,
                    horizontalOff: false,
                    verticalOff: true,
                    unzoomEventType: 'dblclick.zoom'
                },
                interactiveLayer: {
                    "tooltip": {
                        "duration": 0,
                        "gravity": "w",
                        "distance": 25,
                        "snapDistance": 0,
                        "classes": null,
                        "chartContainer": null,
                        "enabled": true,
                        "hideDelay": 0,
                        "fixedTop": null,
                        "headerEnabled": true,
                        "headerFormatter": function (d) {
                            return 'at ' + d3.time.format("%-I:%M%p")(new Date(d));
                        },

                        "hidden": true,
                        "data": null,
                    },
                    "margin": {
                        "left": 0,
                        "top": 0
                    },
                    "width": null,
                    "height": null,
                    "showGuideLine": true,
                    "svgContainer": null
                },
            }
        }