I have just changed my version of Flot from 0.6 to 0.7, however, when I do this, the legend in my Flot graph changes style. Previously, I had used the "LabelClass" attribute to change the style but on reading the source for 0.7 I see that "labelClass" is no longer an option and I appear to be forced to use the "table" CSS definition that is used throughout the site that I'm working on. Because of this I can't change the site's CSS "table" definition.
Is there another good method for changing the definition of a legend or am I stuck?
Apologies in advance is this is just a newbie question
Kind Regards
It has changed names is all, the new class is legendLabel for the labels and legendColorBox for the color box.
You can see this in jquery.flot.js.
EDIT in response, it seems that the question is how do you style the whole table. Assume your flot placeholder is something like this:
<div id="foo" style="width:600px;height:300px"></div>
Then you can define CSS like this:
#foo > div.legend > table {
border: 2px red solid;
}
See it here in action: http://jsfiddle.net/ryleyb/YkDpG/1/
Another way to style the legend is to use the jQuery .css() (http://api.jquery.com/css/) method after the chart has been plotted.
For example:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css("border", "1px solid #888888");
$("#chartFoo div.legend table").css("background", "#ffffee");
or:
$.plot($("#chartFoo"), pieChartData, options);
$("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee" });
Related
I search for a easy and efficient way to center all childs in a container using basic package. (Because mixing basic and jewel layouts leads to some unwanted sides effects)
Must I use CSS, beads ? If both are usable what is difference and can I have code sample of each ?
For exemple could you tell me how to modify this code to center the text label:
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View>
<js:beads>
<js:VerticalLayout/>
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Thanks to yishayw, as I'm not familiar with how to add css, I find how to do it and put the full working code here. I would expect that js|View would trigger the style but looking on css with browser I saw that style name for first "view" is "royale"
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<fx:Style>
#namespace j "library://ns.apache.org/royale/jewel";
#namespace js "library://ns.apache.org/royale/basic";
.royale {
align-items :center;
}
js|Label {
color: #ff0000;
}
</fx:Style>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View >
<js:beads>
<js:VerticalFlexLayout />
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Regards
Try using VerticalFlexLayout and adding align-items: center to the style of the container.
I am using MathJax-node to generate SVGs of equations. I would like to change the default color, but so far nothing has worked.
I looked at this answer and tried
mjAPI.config({MathJax: {
styles: {
".MathJax_SVG, .MathJax_SVG_Display": {
fill: "#FFF",
stroke: "#FFF"
}
}}});
I also tried
mjAPI.config({MathJax: {
SVG: {color: "#0FF", fill: "#0F0", stroke: "#F00"}}});
and several variations, like including the styles under SVG, but so far nothing has worked.
I can work around this by setting the style from within the TeX expression, but I would prefer to be able to set a default configuration so I can process expressions without altering them.
MathJax-node wraps its output in a group with fill="currentColor stroke="currentColor" so that it inherits the color from the surrounding text. So one way to change the color would be to set the color of the container that will hold the SVG output. The configuration you give above would do that for MathJax in a browser, since MathJax surrounds its SVG output in a container with class="MathJax_SVG" or class="MathJax_SVG_Display"; but MathJax-node does not produce the container HTML elements that MathJax does, so there are no elements with class MathJax_SVG or MathJax_SVG_Display being generated. In any case, the styles are put into a stylesheet that would be added to the page, not used to add explicit styles to the SVG generated, so you would have to include that stylesheet into the page where the SVG output is being put in order for your configuration above to have an effect, even if the containers with the proper classes were being generated.
What you probably want, however, is to have the currentColor be some specific color instead, so that there is no inheriting of colors. Because SVG is a text-based image format, you can do that using a string replacement in your mathjax-node driver file. For example:
mjAPI.typeset({
math: "x+1",
format: "TeX",
svg: true,
useFontCache: false,
ex: 6, width: 100
}, function (data) {
if (!data.errors) {
console.log(data.svg.replace(/"currentColor"/g, '"red"'));
}
});
would set the color to red in the output.
I'm working on putting together a pretty basic stacked bar chart using Primefaces. The chart itself seems to build just fine. However, the legend is being placed over the chart data. I know you can move the legend to any compass ordinal (n, s, w, e, se, sw, ne, nw), but I'd actually like to move it OFF the data.
The code to get it in:
<p:barChart id="stackedKWH" value="#{kwhSalesBeanManager.kwhSalesChart}" legendPosition="e" style="height:300px;width:800px" title="kWh Sales by Type" stacked="true" barMargin="10" min="0" max="125000000" />
And what it currently looks like. Would like to move that legend off the chart to the right.
Try to add this :
function extLegend()
{
this.cfg.legend= {
show: true,
location: 's',
placement: 'outsideGrid'
};
}
and add this inside your barChart component :
extender="extLegend"
Now the best solution would be defining the placemant on chart model:
...
modelChart.setLegendPlacement(LegendPlacement.OUTSIDE);
...
Looks like you should use javascript for this purpose.
something like that:
var legend = $('table.jqplot-table-legend')[0];
legend.setAttribute('style', 'position: absolute; z-index: 3; right: -100px; top: 25px;');
I tested it on this page: http://www.primefaces.org/showcase/ui/barChart.jsf
I have a layout where I need to control the line height between wrapped non block level elements:
<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>
What I want to achieve is something like:
I don't want to rely on absolute positioning as there will be elements beneath which need to clear this and simply setting a low line-height on he paragraph results in an object which breaks out of its box, see the Fiddle below:
http://jsfiddle.net/mdHKy/2/
Any ideas?
You can first give the p a height then set its line-height to half that amount (being 2 lines).
p.payments {
line-height: 1em;
height:2em;
}
Then set the line-height of small to 1em and give that a vertical-align:
p.payments small {
line-height:1em;
vertical-align:top;
}
Then set the vertical-align of your .light:
p.payments small.light {
vertical-align:baseline;
}
JSFiddle example.
We're looking to give pages in a specific category a specific background colour. Since every page in this category makes use of a specific template, we're ideally looking for a template change.
Can this be done?
Use the PageCSS extension, you should be able to put the css in your template, which would then apply to the pages it is on.
example:
<css>
#bodyContent { background-color: yellow; }
</css>
For the MediaWiki 1.18, you only need CSS and this code:
{{#css:
#bodyContent { background-color: yellow; }
body {
background: navajowhite;
}
}}
This will give the part of the page with text a yellow colour and the rest (border) a brown-ish colour.
For best results, put this in a template, e.g. {{Page colour}}, so that it can be called with, e.g. {{Page color|red|yellow}}. The template code will then be:
{{#css:
#bodyContent { background-color: {{{1|yellow}}}; }<!-- Page color -->
body {
background: {{{2|navajowhite}}};<!-- Border color -->
}
}}
where 1 & 2 are parameters (page and border respectively) with default colours (yellow and brownish).