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 would like to know how to format the x-axis in hours format.

 d3.json('get_data.php', function (error, myData) {
  // Renders a line chart
  (function () {
      nv.addGraph(function () {  
          var chart = nv.models.lineWithFocusChart();
          chart.xAxis                
            .tickFormat(d3.format(''));
          chart.yAxis
            .tickFormat(d3.format(''));
          chart.y2Axis
            .tickFormat(d3.format(''));

          d3.select("#chart svg")               
              .datum(myData)
              .transition().duration(500)
              .call(chart);    //Define transition and pass the d3.selection to our lineChart.


          nv.utils.windowResize(chart.update);

          return chart;   //Must return the enclosed chart variable so the global rendering queue can store it.
          //});
      });
  })();  });

Here is the sample json data in myData. Do I need to manipulate it in anyway?

[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }] Any help is appreciated.

Answer 1

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 2

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 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
                },
            }
        }