CODEWITHSUNDEEP
css
Neo
Neo

Reputation: 1037

css3 shapes compatibility

I'm trying to make a wheel, which will be sliced into different coloured sections (kinda like a pie chart) but they may have extra elements on top of them, e.g., a stitched border across the borders at the side and an icon at the edge of each, etc.

So my question is do I just use css3 (examples: http://www.css3shapes.com/) and then use something like http://css3pie.com/ for Internet explorer 6-9?

Or am I just better off doing it in Photoshop and slapping it on a div as a background image? And use absolute positioning for extra elements?

Which is the best practice?

Upvotes: 0

Views: 2091

Answers (2)

Spudley
Spudley

Reputation: 168725

I really wouldn't use CSS for drawing shapes. It's hacky at best, and can get really messy. Quite a few of the examples in the cssshapes site you linked to don't even work in Firefox 3.6 - which is still quite heavily used - let alone other older browsers, and in IE you'd really struggle; css3pie won't give you the kind of fine-grained control you'd need for a pie chart.

If you want to draw stuff on the browser using on the client side, there are a number of ways to do so without resorting to hacks like CSS shapes.

Both SVG and Canvas are relatively new technologies for placing and manipulating graphics on the browser. SVG draws vector graphics and Canvas is for pixel-based graphics.

Both of them are supported on a wide variety of browsers. The obvious exception being IE8 and earlier. However, IE does support an alternative graphics format called VML, and there are javascript tools for IE which allow it to convert both SVG and Canvas into VML, so you can use either of them and they will work in IE using these tools, which makes both SVG and Canvas effectively cross-browser compatible.

But if you're drawing pie charts, or similar sorts of things, my personal recommendation would be to use the Raphael library. This is a javascript library which works in all browsers, and can be used to draw and animate pretty much anything, including graphs and charts (it even has a separate graphing add-on library. See the demos on those two sites to see what it's capable of; I think you'll be impressed. (I certainly was)

Hope that helps.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324710

I would (and do) use PHP's GD extension to create a pie chart based on input data, save the image generated by that, and optionally generate an imagemap so parts of the chart can be highlighted, have tooltips, etc.

Upvotes: 2

Related Questions