Aakshaye M Gaikar Aakshaye M Gaikar - 20 days ago 5
Javascript Question

NVD3 time formatting , line with focus chart

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

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)); });