NVD3 Format Date Differently From X-Axis

Question

I have a NVD3 chart and would like to format the date value in the tooltip window as a complete date down to the seconds, while changing the labels in the x-axis only by the day.

Here is my chart:

    d3.json("mydata.json", function (error,data) {
        var chart;
        nv.addGraph(function() {
            var chart = nv.models.lineChart()
                    .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                    .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                    .transitionDuration(350)  //how fast do you want the lines to transition?
                    .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                    .showYAxis(true)        //Show the y-axis
                    .showXAxis(true)        //Show the x-axis
                ;
            chart.xAxis     //Chart x-axis settings
                .axisLabel('Date')
                .tickFormat(function(d){return d3.time.format('%d-%m-%y')(new Date(d));});
            chart.yAxis     //Chart y-axis settings
                .axisLabel('Temperature')
                .tickFormat(d3.format('.02f'));
            d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.
                .datum(data)         //Populate the <svg> element with chart data...
                .call(chart);          //Finally, render the chart!
            nv.utils.windowResize(function() { chart.update() });
            return chart;
        });
    });

And some example data:

[{"key":"Ambient Temperature","color":"#0000ff","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"Windchill Temperature","color":"#00ff00","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"Dewpoint Temperature","color":"#ff0000","values":[{"x":1407978270000,"y":10.86},{"x":1407978353000,"y":10.05},{"x":1407978353000,"y":10.05},{"x":1407978415000,"y":9.6},{"x":1407978523000,"y":9.97},{"x":1407978524000,"y":9.97},{"x":1407978546000,"y":10.83},{"x":1407978562000,"y":11.19},{"x":1407978571000,"y":11.15}]}]

Any suggestions on how to achieve this? Thanks!

[This answer](http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-tooltip/13528114#13528114) will help you to change the tooltip. And you could get and understanding of the time of [formatting timestamps here](http://stackoverflow.com/questions/18072721/formating-the-date-in-nvd3-js) — shabeer90, Aug 22 '14 at 13:19

score 0 · Accepted Answer · answered Sep 19 '14 at 13:12

http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html

You can look this : Work with angular, Isn't my work !:

$scope.toolTipContentFunction = function(){
    return function(key, x, y, e, graph) {
        return  'Super New Tooltip' +
            '<h1>' + key + '</h1>' +
            '<p>' +  y + ' at ' + x + '</p>'
    }
}



<div ng-controller="ExampleCtrl">
    <nvd3-multi-bar-chart
        data="exampleData"
        id="toolTipContentExample"
        width="550"
        height="350"
        xAxisTickFormat="xAxisTickFormatFunction()"
        showXAxis="true"
        showYAxis="true"
        interactive="true"
        tooltips="true"
        tooltipcontent="toolTipContentFunction()">
            <svg></svg>
    </nvd3-multi-bar-chart>
</div>

Thanks for the solution! Unfortunately I can't verify it at this time, because I have moved to Rickshaw for certain conveniences at this time. I will mark as answer unless anyone disputes it. Thanks again! :) — mike.bronner, Sep 19 '14 at 16:33

NVD3 Format Date Differently From X-Axis

1 Answers1