Pavan Prabhu February 2016

I am trying to build a d3js graph but on the x-axis i am getting the timestamps instead of date and time even after i used formatting

Here is the code which i have been trying.... I want to display only the date so that it accomadates the x axis. I have tried using timestamps as data and formatting but still i was ending up with the same timestamp displyed on xaxis. ` function InitChart() { try {

                                /* var x = document.getElementById('eventCountList1').innerHTML;
                                data = JSON.parse(x);
                                alert(data); */
                                /* var parseDate = d3.time
                                        .format("%d %b %Y %X").parse; */

                                var parseDate = d3.time
                                        .format("%Y-%m-%d %H:%M:%S").parse;

                                var data = [ {
                                    "count" : "92",
                                    "time" : "2016-02-08 05:50:27"
                                }, {
                                    "count" : "96",
                                    "time" : "2016-02-08 05:50:29"
                                }, {
                                    "count" : "94",
                                    "time" : "2016-02-08 05:50:30"
                                }, {
                                    "count" : "98",
                                    "time" : "2016-02-08 05:50:33"
                                } ];

                                data.forEach(function(d) {
                                    d.time = parseDate(d.time);
                                    d.count = +d.count;
                                });

                                alert(d3.min(data, function(d) {
                                    return d.time;
                                }));
                                alert(d3.max(data, function(d) {
                                    return d.time;
                                }));
                             

Answers


Cyril February 2016

Use tick format to format your ticks:

    xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
.ticks(7)
.tickFormat(d3.time.format("%d"));

Post Status

Asked in February 2016
Viewed 3,037 times
Voted 5
Answered 1 times

Search




Leave an answer