NVD3 JavaScript change timestamp example to normal Date input

Question

I'm having some trouble with inputting "normal" formated dates into a NVD3 example.

My data is comming from a database and it comes out like the following:

[ 2015-08-10 , 100] , [ 2015-08-11 , 33] , [ 2015-08-12 , 332] , [ 2015-08-13 , 2323] , [ 2015-08-14 , 232] , [ 2015-08-15 , 100] , [ 2015-08-16 , 3553] , [ 2015-08-17 , 2000] , [ 2015-08-18 , 4000] , [ 2015-08-19 , 5500] , [ 2015-08-20 , 700] , [ 2015-08-27 , 150] , [ 2015-08-29 , 7777] , [ 2015-08-30 , 1100] , [ 2015-08-31 , 1000]

However the example has the date as a timestamp. I need to modify the below code so that it can interpret my above date format and display the x axis properly.

Any help would be greatly appreciated.

<script>

    var testdata = [
        {
            "key" : "Amount" ,
            "bar": true,
            "values" : [ 

                [ 1439198810 , 100] ,

                [ 1439285210 , 33] ,

                [ 1439371610 , 332] ,

                [ 1439458010 , 2323] ,

                [ 1439580410 , 232] ,

                [ 1439666810 , 100] ,

                [ 1439753210 , 220] ,

                [ 1439839610 , 2000] ,

                [ 1439926010 , 4000] ,

                [ 1440012410 , 5500] ,

                [ 1440098810 , 500] ,

                [ 1440098810 , 200] ,

                [ 1440671400 , 150] ,

                [ 1439749620 , 3333] ,

                [ 1440852480 , 7777] ,

                [ 1440939000 , 500] ,

                [ 1440939540 , 600] ,

                [ 1441036440 , 500] ,

                [ 1441036440 , 500] ,

            ]
        },
        // {
        //     "key" : "Price" ,

        //     "values" : [ 
        //     
        //         [ 1439198810 , 100] ,
        //     
        //         [ 1439285210 , 33] ,
        //     
        //         [ 1439371610 , 332] ,
        //     
        //         [ 1439458010 , 2323] ,
        //     
        //         [ 1439580410 , 232] ,
        //     
        //         [ 1439666810 , 100] ,
        //     
        //         [ 1439753210 , 220] ,
        //     
        //         [ 1439839610 , 2000] ,
        //     
        //         [ 1439926010 , 4000] ,
        //     
        //         [ 1440012410 , 5500] ,
        //     
        //         [ 1440098810 , 500] ,
        //     
        //         [ 1440098810 , 200] ,
        //     
        //         [ 1440671400 , 150] ,
        //     
        //         [ 1439749620 , 3333] ,
        //     
        //         [ 1440852480 , 7777] ,
        //     
        //         [ 1440939000 , 500] ,
        //     
        //         [ 1440939540 , 600] ,
        //     
        //         [ 1441036440 , 500] ,
        //     
        //         [ 1441036440 , 500] ,
        //     
        //     ]
        // }
    ].map(function(series) {
            series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
            return series;
        });

    var chart;
    nv.addGraph(function() {
        chart = nv.models.linePlusBarChart()
            .margin({top: 50, right: 60, bottom: 30, left: 70})
            .legendRightAxisHint(' [Using Right Axis]')
            .color(d3.scale.category10().range())


        chart.xAxis.tickFormat(function(d) {
                return d3.time.format('%d-%b-%y')(new Date(d*1000))
            })
            .showMaxMin(false);

        chart.y1Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
        chart.bars.forceY([0]).padData(false);

        chart.x2Axis.tickFormat(function(d) {
            return d3.time.format('%d-%b-%y')(new Date(d*1000))
        }).showMaxMin(false);

        d3.select('#chart1').append("svg")
            .datum(testdata)   
            .call(chart)     
            .attr("width", '100%')
            .attr("height", '100%')
            .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
            .attr('preserveAspectRatio','xMinYMin')
            .append("g")
            .transition()
            .duration(500);
;

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

</script>

You need to parse the date as in [this question](https://stackoverflow.com/questions/16232820/is-it-possible-to-load-csv-data-to-nvd3-library). — Lars Kotthoff, Aug 15 '15 at 20:31
Hi @LarsKotthoff I tried to do it but im pretty new to d3 so having so trouble. I tried to do this chart.xAxis.tickFormat(function(d) { return d3.time.format('%d-%b-%y').parse }) .showMaxMin(false); it didnt seem to work — Jimmyn, Aug 16 '15 at 01:13
Have a look at where this happens in the question I've linked to. You need to do it before using the data to generate the chart, which is independent from the tick format function. — Lars Kotthoff, Aug 16 '15 at 01:14
Sorry, I did have a look and tried a few different things including this d3.json(, function(error, data) { data.forEach(function(d) { d.date = parseDate(d.x); d.T = +d.y; }); }); Just cant seem to get the code to parse. — Jimmyn, Aug 16 '15 at 01:29
Or even var parseDate = d3.time.format("%d-m%-%Y").parse; chart.xAxis.tickFormat(function(d) { return parseDate(d) }) .showMaxMin(false); still no luck :(, feels like ive tried everything — Jimmyn, Aug 16 '15 at 01:36
If you get errors parsing the code it should be pretty easy to figure out what's wrong. — Lars Kotthoff, Aug 16 '15 at 03:34

NVD3 JavaScript change timestamp example to normal Date input

0 Answers0