d3.js - 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 code have been trying.... want display date accomadates x axis. have tried using timestamps data , formatting still ending 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; })); /* alert(d3.min(data, function(d) { return d.count; })); alert(d3.max(data, function(d) { return d.count; })); */ var vis = d3.select("#visualisation"), width = 1000, height = 300, margins = { top : 20, right : 20, bottom : 20, left : 50 }, xscale = d3.scale .linear() .range([margins.left,width- margins.right ]) .domain([(d3.min(data,function(d) { return d.time; })), (d3.max(data,function(d) { return d.time; })) ]), yscale = d3.scale.linear().range( [ height - margins.top, margins.bottom ]).domain( [ d3.min(data, function(d) { return d.count; }), d3.max(data, function(d) { return d.count; }) ]), xaxis = d3.svg.axis().scale(xscale).orient( "bottom").ticks(7), yaxis = d3.svg.axis().scale(yscale).orient( "left"); vis .append("svg:g") .attr("class", "x axis") .attr( "transform", "translate(0," + (height - margins.bottom) + ")") .call(xaxis), vis.append("svg:g").attr("class", "y axis").attr( "transform", "translate(" + (margins.left) + ",0)") .call(yaxis); var linegen = d3.svg.line().x(function(d) { return xscale(d.time); }).y(function(d) { return yscale(d.count); }).interpolate("linear"); vis.append('svg:path').attr('d', linegen(data)).attr('stroke', 'green').attr('stroke-width', 2) .attr('fill', 'none'); /* vis.append('svg:path') .attr('d', linegen(data2)) .attr('stroke', 'blue') .attr('stroke-width', 2) .attr('fill', 'red'); var date = new date(unix_timestamp*1000); // hours part timestamp var hours = date.gethours(); // minutes part timestamp var minutes = "0" + date.getminutes(); // seconds part timestamp var seconds = "0" + date.getseconds(); // display time in 10:30:23 format var formattedtime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2); */ } catch (ex) { alert(ex); } }[the image attached x axis showing timestamps instead of date][1]` please me...
use tick format format ticks:
xaxis = d3.svg.axis() .scale(xscale) .orient("bottom") .ticks(7) .tickformat(d3.time.format("%d"));
Comments
Post a Comment