This issue is similar to the one about Xlabel Interval. However, I do not like
the interval option because the chart will grow and the XLabel Interval will
not fix the issue one day. So, instead, a more stable solution is to let users
to specify how many X Labels should be shown there.
I implement the code with 9 more line of code for the line chart.
//write X labels
var newLabels = new Array();
var newInterval = Math.round(xLabels.length/9); # this 9 here is hard coded. We can set the option here.
for (i=0; i<xLabels.length; i=i+newInterval)
{
newLabels.push(xLabels[i]);
}
newInterval = canvas.width() / (xLabels.length -1);
xLabels = newLabels;
var xInterval = canvas.width() / (xLabels.length -1);
var xlabelsUL = $('<ul class="visualize-labels-x"></ul>')
.width(canvas.width())
.height(canvas.height())
.insertBefore(canvas);
$.each(xLabels, function(i){
var thisLi = $('<li><span>'+this+'</span></li>')
.prepend('<span class="line" />')
.css('left', xInterval * i)
.appendTo(xlabelsUL);
var label = thisLi.find('span:not(.line)');
var leftOffset = label.width()/-2;
if(i == 0){ leftOffset = 0; }
else if(i== xLabels.length-1){ leftOffset = -label.width(); }
label
.css('margin-left', leftOffset)
.addClass('label')
.css('text-orientation', '');
});
xInterval = newInterval;
Please let me know if you need my help to put the fix in.
Original issue reported on code.google.com by majun...@gmail.com on 18 Jan 2011 at 9:21
Original issue reported on code.google.com by
majun...@gmail.com
on 18 Jan 2011 at 9:21