flot.axislabels: how to choose labels' colors? - jquery-mobile

I am using flot with the plugin "jquery.flot.axislabels.js", but I can't find other documentation than the README file.
So the general question is "where can I find some complete documentation ?"
And the more specific one is: "How to set the label's color ?"
Some properties are available, such as "axisLabelFontSizePixels", "axisLabelFontFamily", etc... so I've tried "axisLabelColor" and "axisLabelFontColor" without any result.
I tried to use CSS too, according to this: http://people.mozilla.com/~mcote/flot-axislabels/example/
But it does not work either. Maybe CSS is working with an older version of axislabel.js.
Ideally I'd avoid doing this with CSS, I guess that if we are able to choose the font we are able to choose the color. But I cant find what syntax I have to use...
If someone knows something, I'd be glad to read it :-)
Thanks and regards,
S.

From looking at the source code it doesn't look like the plugin provides that option in either of it's two modes of operation:
1.) Draw the labels using the canvas - no ability to set color (only font family and size). If you are handy with JavaScript adding color wouldn't be too difficult. (You are probably using this option since it explains why your CSS doesn't work.)
2.) Draw the labels using HTML DIVs. This is what your linked example does. In it the author specifies the color through an inline CSS tag. How I would do it though to keep it all together is after your plot call:
$('.yaxisLabel').css('color','red');
$('.y2axisLabel').css('color','orange');
$('.y3axisLabel').css('color','green');
$('.y4axisLabel').css('color','purple');
Example here.

I found it simpler to just add !important targeting the classes generated by flot. For targeting axis, you can aim for .yaxisLabel or .xaxisLabel, or for the whole thing target .flot-text.
.flot-text {
color: rgba(255, 255, 255, 0.3) !important
}

I know this question has one accepted answer, but just thought of sharing how I eventually got it working.
FLot version: Flot 0.8.3
I had to explicitly set axisLabelUseCanvas:false and then write a bit of jQuery code:
$('.flot-tick-label').css('color','red');
And there we go, after couple of hours of frustration, it was finally red!
Hope this helps someone who is lost in Flot.

I had to set axisLabelUseCanvas:false explicitly and use $('.axisLabels').css('color','red'); to make them red

Related

high chart sample

looking for high chart sample program, I haven't used Highcharts before, but it seems there are no sliders built take a look at the answer.
Actually Highcharts in general are not free.. For me it's simple bullet graph. In Highcharts for that you can use bar chart with scatter point
The bullet concept will work for this, though it will take some work to get styling like that. There are plenty of useful options for styling such a chart though without relying on the physical gauge metaphor.
A quick variation on the bullet chart approach that puts them into a single chart and removes the banding:
http://jsfiddle.net/jlbriggs/kwtZr/41/
It relies on a custom extension to produce the 'line' marker type:
Highcharts.Renderer.prototype.symbols.line = ...
{{
edit in response to comments below:
updated example with some additional formatting options and clean up:
http://jsfiddle.net/jlbriggs/kwtZr/55/
be wary of using multiple colors unless the colors truly mean something.
Using additional color to highlight items that require attention is a good use of color.
Using color to highlight every possible status of something (shades of green, fading to shades of yellow, fading to shades of red...), is a bad use of color that is sadly over used and even expected by some.
FWIW
Also important to reiterate that the purpose of this type of display is very well handled by a bullet chart, which is definitely worth looking into migrating to somewhere along the way. Reference:
http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
http://en.wikipedia.org/wiki/Bullet_graph

makes CSS every text element darker

I just realized that my entire Rails app was to pale, and would like a quick fix to make all text look, say, 120% darker. My trouble is, my text color values are all over the places. (If I just have a few text color values, then it could have been easier to find and replace all of them).
Is there a way to do this? I am not familiar with less, but I hope there's some quick fix that can help me out.
I believe less is used to make all the css based on rules so it would be just as hard to implement it now as if you were to re-write your css.
For example if you set the base colour as #base: #ccc; then you can set other colours as a % like
div { .box-shadow(0 0 5px, 30%) }
However, this would still force you to go through and replace all your css values with percents and also learn less... Good longterm solution, but not a quick fix.
I am not an expert on rails but if you were to go through all your files with a replace command and replace #fff with #ccc etc?
Since your css is not less (or Sass)-based there is no straightforward way to accomplish this. However, writing a script that would find all color values in css (using a regex) and replace them with darker color (i.e. decreasing all individual color values by some percentage) wouldn't be a hard thing to do.

How to add changebar in latex?

In Latex, I've created a new command 'changedtext' to mark specifics parts in my document and make it appear blue:
\newcommand{\changedtext}[1]{\textcolor{blue}{#1} }
Is there any easy way to alter the command to have change bars appear next to the text in the resulting PDF?
If not possible, any other suggestion for a visual markup (other than change bars) that would be clear on a black & white printout would be useful as well.
Update: It might be of interest to readers of this question that some time ago I started using the latexdiff script to mark up changes between two versions. I use it in combination with SVN, which I think works great; if you split up your LaTeX files, you might want to look at this tex.stackexchange question though.
Use one of the changebar macro packages in your command.
One other way which would be very clear in B&W would be highlight (shows as gray background).
Use packages soul and color and define your highlight color:
\usepackage{soul}
\usepackage{color}
\definecolor{lightgray}{rgb}{.92,.92,.92}
\sethlcolor{lightgray}
Now you can use \hl{highlighted text} in text to highlight.
Some half-baked solution (not satisfactory) I just came up with myself, is the use of \marginpar to have some arbitrary indication in the margin, e.g.:
\newcommand{\changedtext}[1]{\textcolor{blue}{#1 \marginpar{r1}} }
will put the text 'r1' (from revision 1) in the margin.
However, when using this, the \changedtext command can not be used everywhere (e.g. in formulas, captions) because LateX will complain (in my case) about 'float(s) lost'.
Still,it might be useful to some people...

Font wont export out

I can get sIFR to work but it will only display the bold version of the font I have exported. I checked the report and it seems to be stripping out any font weight that is not bolded in flash. I exported two different files to test, the first with regular and bold and the second with medium and semibold in both cases only the bolded weights were exported. Any ideas on how to fix this?
When exporting the Flash movie, make sure at least one character in the text field has the styles applied to it. Then it should export fine.
I had a similar problem - could not make the font 'bold' style work, and I even whanted my fonts BlackItalic to work. Messing around and reading your post and Marks answer made me try to apply the BlackItalic style to the very first word in the provided fla file. Keeping the css style 'font-weight: normal;' in the config java code was successful!
Until I read some new posts about this I will follow the work flow making individual swf files for every font style - normally I only want to use one or to styles anyway.

Can sIFR show fonts on a blue line (like writing on notebook paper)?

I encountered a use case where the business would like to display an answer to a question in a handwritten font. So, my initial thought was to use sIFR, but the other part of the use case is they want the handwritten font on blue lines, analogous to writing in a paper notepad or notebook. Can sIFR do a stylized font + notebook lines, or do I need to use another technique? Thank you in advance.
Yes. You can follow the tutorial here to get your blue lines in place: Use custom type with sIFR
However, I would caution against the use of sIFR for whole paragraphs of text. Mike Davidson mentions this in his best practices here.
Raithlin,
Thanks for the link to the article. I read Mike Davidson's page, and I am aware of the problems with replacing too much text. It is something I will warn the business users about.

Resources