Please see attached pic for the effect I'm after - basically I needed to have a
dates represented on 3 rows: lowest row for years - 1 label for each year,
middle for months - again 1 label for each month 3 chars long, and top row for
each day - 2 digits, and here is the twist, since the range is 100 days there
will be quite a few of them, so they had to be rotated -90 and font size should
be smaller then the rest.
Please note: I'm not a programmer and I'm very new to flot and javascript, so
if there is a better cleaner way please let me know.
My solution was to have a separate datasets for months and years and for days
(and this is my request for enhancement) was to have a custom class assigned to
those tickslabels. The way I did it was:
1. add new option to xaxis
xaxes: [{
...
labelCustomClass: "tickLabelRotate",
...
},
2. in the function insertAxisLabels (around line 1660) I check for the option
above and replace "tickLabel" with the value if it is set
var classLbl = "tickLabel";
if (axis.options.labelCustomClass)
classLbl = axis.options.labelCustomClass;
....
html.push('<div class="' + classLbl + '" style="' + style.join(';') + '">' +
tick.label + '</div>');
3. I use css to format/rotate labels any way I need to. Good thing about
rotating in css was that I could specify anchor (left right center top bottom).
I tried some patched code for rotating labels, but I didn't work very well for
me. Custom class/css worked much better on the other hand.
Anyway, it would be nice to be able to specify custom class for elements that
could be a subject to formatting through css
Thanks,
art
Original issue reported on code.google.com by art2cr...@gmail.com on 22 Dec 2011 at 5:04
Original issue reported on code.google.com by
art2cr...@gmail.com
on 22 Dec 2011 at 5:04Attachments: