Is it possible to hide the black border of pie chart labels in iReport ?. I want to keep the values but not the black border. Thanks
I dont know the direct property on ireport, but you can do a customizer on the PieChar like in the example:
http://mdahlman.wordpress.com/2010/08/18/chart-customizers-1/
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I've enbedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph svg gets generated.
No Problemo so far.
Now I intended to turn the graph into a directed one (by adding a marker and tell the lines to use it)
Each generated svg elements is following this pattern:
<svg width="100%" height="100%">
<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>
<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>
With Crome everything works just fine.
So I arrived at the concusion that the structur and
the way I generate the svgs should be more or less correct.
But with Firefox the Markers will only show for the first svg. (the first tab)
All other svgs won't show any Arrowheads.
"Inspect Elements" tells me the Markers are there and that the lines are refering to them.
And this is where I'm running out of Ideas where or what to look for. :(
You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.
I'm looking for a solid answer on whether or not there is an equivalent to -webkit-mask in Gecko browsers/Firefox?
If not, is there any way of degrading -webkit-mask in CSS to a straight background-image deal or should I just give up and use Javascript?
Thanks a lot!
If you're targeting firefox, it has great SVG support, so you can now use SVG masks instead of CSS. Here is Mozillas documentation on how to do a mask in SVG Webkit masks aren't standards track - so I have a personal doubt that you'll ever see them cross-browser.
After struggling with this for many hours, I was finally able to apply a complex SVG path as a mask for a div element on my site, and it works in Firefox. Here's what I did:
First, for Webkit browsers, the solution was ideal, and I simply had to make a flattened png file with the same size (or really the same shape, could be different scale) as the div I want to mask, and with the area I want to be visible in black, and the parts I want clipped out transparent. Then, I added the following line to the CSS for the div element I want to mask:
-webkit-mask-box-image: url(path/to/mask.png);
That was easy! Now let's get to the fun part of getting this working in Firefox. For this method to work, the vector shape must be the exact same size as the area you want to mask. So my mask is a relatively complex vector path designed in Fireworks, and I need to get it converted to an SVG path, and thankfully, I have Illustrator available. Otherwise, use your favorite SVG editor to convert your shape path to SVG. If you're also using Fireworks to draw your vector shapes, you can right-click on the vector shape you want to use, go to 'Edit' -> 'Copy Path Outlines', and then you can paste it into a sufficiently large document in Illustrator, or whatever SVG editor you're using.
Next, you need to export it to an SVG file. In Illustrator, I used the 'Export for Web' function, selected SVG format, version 1.0, and exported it to an SVG file. The position and document size don't really matter, as we're just after the path description, and we'll discard the rest.
So, now open that SVG file you just made with a text editor, such as Text Edit or Notepad. You'll see some XHTML-formatted content, and one element in particular is something like:
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>
The d="..." portion will probably be many lines long for a complex shape. This is the only portion of this SVG file that we care about.
Next, we must embed an SVG mask describing this path into our site HTML. First, let's add the following elements to our HTML:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="maskid" maskUnits="userSpaceOnUse">
<path fill="white" d=""/>
</mask>
</defs>
</svg>
Now, we simply copy the contents of the d="" property of the path element from the SVG file we saved earlier (i.e. M0,43v0...) and paste into the same d="" property of the path element in the embedded SVG's mask element. Then, we can add the following entry to the CSS for the element we want to mask:
mask: url("#maskid");
That's it. The path should now be applied as a mask to the element you specified.
Here is the trick , you need to convert all points generated in your svg file to ratio that is equal the point path divided by mask dimension .
For easier explaination , i have made a quick tool to help designers convert their svg into a mask that is compatible with firefox , you can see a live demo on my website ( http://www.prollygeek.com ) , for example the facebook logo , and twitter logo are just masks , and here is the tool that you can use to convert your svg to a mask:
http://prollygeek.com/svg-mask/
for example:
<mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>
will be turned to:
<mask id="fb" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>
Please dont forget to add this attribute style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"
and fill with any color , it doesnt matter.
afterwards link your mask to the css element you desire:
for example:
mask:url(images/fb.svg#fb);
the calculator is free to use , but please dont copy or publish anywhere else.
You can apply svg filters with css to HTML content in Gecko. Here is an example from a guy who likes to fiddle with mozilla code. It is from 2008 so it might be a bit outdated.
In SVG (for web-browsers), if i add a <text>-element and add some text to it the total rendered width of the text string will change depending on the scale of the text.
Lets say i add "mmmmmmmmmmmmmmmmmmmmmmmmmmA" as text, then i want to draw a vertical line(or other exactly positioned element) intersecting the very last character. Works fine but if i zoom out the text will become shorter or longer and the line will not intersect the text in the right place anymore. The error can be as much as +/- 5 characters width which is unacceptable. The error is also unpredictable, 150% and 160% zoom can add 3 characters length while 155% is 2 charlengths shorter.
My zoom is implemented as a scale-transform on the root element of my canvas which is a <g>.
I have tried to multiply the font-size with 1000x and scale down equally on the zoom-transform and vice versa in case it was a floating point error but the result is the same.
I found the textLength-attribute[1] which is supposed to adjust the total length so the text always end where i choose but it only works in Webkit. Firefox and Opera seems to not care at all about this value (haven't tried in IE9 yet).
Is there any way to render text exactly positioned without resorting to homemade filling of font-outlines?
[1] http://www.w3.org/TR/SVG11/text.html#TextElementTextLengthAttribute
Update
Snippet of the structure i'm using
<svg>
<g transform="scale(1)"> <!--This is the root, i'm changing the scale of this element to zoom -->
<g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc -->
<text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text>
</g>
</g>
Interesting, since the webkit builds I have seem to fail on textLength (w3c testcase). Could you post your example?
Speaking for Opera we do support the 'textLength' attribute, as documented here.
The other option you have is to use the getBBox method to find a good position for drawing your line, that should work in all the browsers.