d3.js - chart.xAxis .tickFormat formatting is not working -
i pretty new d3, have spent last 5 hours trying figure out how make works , have tried thousand of combinations.
this json want use:
var histcatexplong = [ { "key" : "consumer discretionary" , "values" : [ [ 20131201 , 27.38478809681],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]] } , { "key" : "consumer staples" , "values" : [ [ 20131201 , 7.2800122043237],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]] } ];
in dates formatted yyyymmdd
.
this has been last desperate trial far:
chart.xaxis .tickformat(function(d) { var startdate = tostring(d) var parser = d3.time.format("%y%m%d"); var formatter = d3.time.format("%x"); var startdatestring = formatter(parser.parse(startdate)); return startdatestring});
any help, please more welcome!
the complete code not working here:
<script src="../lib/d3.v3.js"></script> <script src="../nv.d3.js"></script> <script src="../src/utils.js"></script> <script src="../src/models/axis.js"></script> <script src="../src/tooltip.js"></script> <script src="../src/interactivelayer.js"></script> <script src="../src/models/legend.js"></script> <script src="../src/models/axis.js"></script> <script src="../src/models/scatter.js"></script> <script src="../src/models/stackedarea.js"></script> <script src="../src/models/stackedareachart.js"></script> <script> // testing single data point var histcatexplong = [ { "key" : "consumer discretionary" , "values" : [ [ 20131201 , 27.38478809681],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]] } , { "key" : "consumer staples" , "values" : [ [ 20131201 , 7.2800122043237],[ 20131202 , 27.38478809681], [ 20131203 , 27.38478809681]] } ]; .map(function(series) { series.values = series.values.map(function(d) { return { x: d[0], y: d[1] } }); return series; }); */ //an example of harmonizing colors between visualizations //observe consumer discretionary , consumer staples have //been flipped in second chart var colors = d3.scale.category20(); keycolor = function(d, i) {return colors(d.key)}; nv.addgraph(function() { chart = nv.models.stackedareachart() // .width(600).height(500) .useinteractiveguideline(true) .x(function(d) { return d[0] }) .y(function(d) { return d[1] }) .color(keycolor) .transitionduration(300); //.clipedge(true); // chart.stacked.scatter.clipvoronoi(false); chart.xaxis .tickformat(function(d) { var startdate = tostring(d) var parser = d3.time.format("%y%m%d"); var formatter = d3.time.format("%x"); var startdatestring = formatter(parser.parse(startdate)); return startdatestring}); chart.yaxis .tickformat(d3.format(',.2f')); d3.select('#chart1') .datum(histcatexplong) .transition().duration(1000) .call(chart) // .transition().duration(0) .each('start', function() { settimeout(function() { d3.selectall('#chart1 *').each(function() { console.log('start',this.__transition__, this) // while(this.__transition__) if(this.__transition__) this.__transition__.duration = 1; }) }, 0) }) // .each('end', function() { // d3.selectall('#chart1 *').each(function() { // console.log('end', this.__transition__, this) // // while(this.__transition__) // if(this.__transition__) // this.__transition__.duration = 1; // })}); nv.utils.windowresize(chart.update); // chart.dispatch.on('statechange', function(e) { nv.log('new state:', json.stringify(e)); }); return chart; }); </script>
i parse dates before else data. way, can use usual formatting functions. code this:
var parser = d3.time.format("%y%m%d"); histcatexplong.foreach(function(d) { d.values.foreach(function(e) { e[0] = parser.parse("" + e[0]); }); });
Comments
Post a Comment