I have a strange issue with showing dates on a xAxis.
I am generating data like this:
for (i=0;i<12;i++){
date=new Date(2013,i,1);
ideas.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
}
In my lineChart I want to create the x-axis like this:
chart.xAxis.tickSize(12)
.tickFormat(function(d) {
var date = new Date(d);
testarr.push(date);
return d3.time.format('%b %y')(date);
});
Now if I look at the chart, there are only a few Dates visible. This is why I created the array "testarr" for degbugging issues. The content of testarr is
8 Dates instead of 12 (i generated 12)
Now the even more strange thing: Putting the exactly same data in an MultiBarChart and using the EXACT same chart.xAxis.... function, the test arrays content are 12 values
I am speechless and hope that someone can help me out.
Thank you guys!
Complete Code below:
for lineChart: lineChart Result
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
margin: {left: 100, bottom: 100},
//x: function(d,i) { return i},
showXAxis: true,
showYAxis: true,
transitionDuration: 250
})
;
chart.xAxis.tickSize(12)
.tickFormat(function(d) {
var date = new Date(d);
return d3.time.format('%b %y')(date);
});
chart.yAxis
.axisLabel('y axis')
.tickFormat(d3.format(''))
.axisLabelDistance(50);
d3.select('#chart1 svg')
.datum(dataForChart)
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
//nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
var dataForChart=function(){
var section1 = new Array();
section1.key="Section 1";
section1.values = new Array();
section1.color="#1F77B4";
var section2 = new Array();
section2.key="Section2";
section2.values = new Array();
section2.color="#2CA02C";
for (i=0;i<12;i++){
date=new Date(2013,i,1);
section1.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
section2.values[i] = {"y" : Math.round(6*i+2*getRandom(1,2)), "x": date};
}
function getRandom(min, max)
{
return Math.random() * (max - min + 1) + min;
}
var dataArray=new Array();
dataArray.push(section1);
dataArray.push(section2);
return dataArray;
};
</script>
if I do not comment out the
//x: function(d,i) { return i},
section, the axis shows Jan70 everywhere.
For MultiBarChart Code below: MultiBar Result
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.margin({bottom: 30, top:25})
.transitionDuration(300)
.delay(0)
.groupSpacing(0.2)
.reduceXTicks(false)
.showControls(true)
.showLegend(true)
.staggerLabels(false)
;
chart.xAxis.tickSize(12)
.tickFormat(function(d) {
console.log(d,arguments);
var date = new Date(d);
return d3.time.format('%b %y')(date);
});
chart.yAxis
.axisLabel(dataForChart.ylabel)
.tickFormat(d3.format(''))
.axisLabelDistance(50);
d3.select('#chart1 svg')
.datum(dataForChart)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
var dataForChart=function(){
var section1 = new Array();
section1.key="Section 1";
section1.values = new Array();
section1.color="#1F77B4";
var section2 = new Array();
section2.key="Section2";
section2.values = new Array();
section2.color="#2CA02C";
for (i=0;i<12;i++){
date=new Date(2013,i,1);
section1.values[i] = {"y" : Math.round(2*i*getRandom(1,2)), "x": date};
section2.values[i] = {"y" : Math.round(6*i+2*getRandom(1,2)), "x": date};
}
function getRandom(min, max)
{
return Math.random() * (max - min + 1) + min;
}
var dataArray=new Array();
dataArray.push(section1);
dataArray.push(section2);
return dataArray;
};
</script>
See Question&Answers more detail:
os