nehed-amri / dwpe

Automatically exported from code.google.com/p/dwpe
MIT License
0 stars 0 forks source link

Add the char option to specify how many xlabels should be presented #57

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
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