Plotr. Some time ago I was looking for a charting framework for Prototype and I couldn’t find it, just because there’s none. So that’s where it all started. I came across PlotKit, a well written piece of javascript that enables developers to use Canvas or SVG elements for rendering bar, line and pie charts. The only thing was that PlotKit needed the Mochikit library to work. So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!)
Plotr v0.2.0 License Plotr © 2007 Bas Wenneker. Browser support Firefox 1.5+Safari 2.0+Opera 9.0+IE6+ (emulated) Canvas HTML is emulated by ExplorerCanvas, a javascript that let’s you handle VML the same way as HTML Canvas. I’m testing Plotr with the following browsers: Safari 2.0.4, Opera 9.10, Firefox 2.0.0.1, IE6 and IE7. Requirements Download Example Getting started Documentation Yay, this seems to be quite easy! Bugs, enhancements etc. Perceptual Edge - Examples. CSS Vertical Bar Graphs.
Here's a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really. It's pretty much all positioning. Actually, once you figure out how you want the graph to look, figuring out how to position things is fairly simple. The (comparatively) hard part is in figuring out how to calculate the heights of the various vertical bars and the horizontal "strata". This could be done in PHP, ASP, or some other server-side processing engine; via JavaScript on the client side; or manually by someone who really loves their calculator.
You can view source to see how simple it is, or here's the same list with the inline styles, classes, and IDs stripped away. Here's how it works: the data from each quarter is contained in a list item. The four quarters are absolutely positioned with respect to the ul element using position: absolute. SIMILE | Timeline. Scruffy Graphs for Ruby People. List of nifty tools and diagrams. Advertisement Being a web-developer means not only being able to design web-sites or program their functionality. Sometimes it also means to be able to explain complex issues clearly and be able to present to your potential customers reasonable and convincing arguments – in order to find the best compromise between the customer’s wishes and the standards you respect.
In fact, it is essential to make sure the customer understands which advantages you are actually offering and why this or that layout and markup are better for a given web-project. Developing web-sites over the last few years, we’ve been stumbling over the same problem over and over again: how can I visualize my idea easily and quickly? List of nifty tools for drawing diagrams, charts and chart-flows Tutorials Creating Graphs, Part I1 undCreating Graphs, Part II2 by Wolfgang Bartelme. Free Web-Tools Gliffy7 Gliffy.com is a free web-based diagram editor. Free Software Leading commercial products: It's done.