TanTayBui / flot

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

Custom Class request #654

Open GoogleCodeExporter opened 9 years ago

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

Attachments:

GoogleCodeExporter commented 9 years ago
Relates to issues #85 and #552.

Original comment by dnsch...@gmail.com on 7 May 2012 at 8:44