SeaChart

SeaChart project page


Seaside goodies. Includes different charts libraries and other cool stuff for seaside applications.


Everything you see here are static images taken from demo applications included.


A live demo is available too.



CSSBarGraph


A bar graph library based on CSS and XHTML. Should work on most browers.


http://apples-to-oranges.com/blog/article.aspx?id=55

Basic Bar Graph


basic bar graph

Complex Bar Graph


complex bar graph

Documentation


Look at BGBarDemo, add BGGoodBadStyles.

StarRater


A star rater using CSS.


CSS Star Rating Part Deux


Star Rater 2

Documentation


Look at SRDemo, add SRStyles.

PlotKit


Seaside bindings for PlotKit. PlotKit is a Chart and Graph Plotting Library for Javascript.


Has built-in IE emultaion


Examples


plotkit demo

Documentation


Examples are in the PKDemo class, you need to add PKScriptLibrary. Requires Scriptaculous for JavaScript generation and a Seaside 2.6.

Reflection


Port of reflection.js.


reflection

Documentation


Add RFPrototypeLibrary (not needed if you already have it via Scriptaculous) and RFReflectionLibrary to you application. If you include RFPrototypeLibrary make sure it's included before RFReflectionLibrary. Add the class 'reflect' to your image. That already was it. You can also look at RFReflectionDemo for an example.


The reflection by default will be half the height of the original image. Thus, the height of the image plus reflection will be 1.5 times the original height of the image. You can try the experimental wholeimage class (does not always work) by adding class="reflect wholeimage" to your images. This will create a reflection the same size as the original image.


NumberedList


Port of Beautifully Numbered Lists but changed so that it validates.


numbered list

Documentation


Look at NLDemo, add NLStyles.

Crossfade


Creates an sildeshow of images and crossfades between them. Based on Image Cross Fader Redux.


cross fade

Documentation


  1. Create one and only one CFImageContainer add the urls to all the
    images.
  2. Be sure they all have the same dimension. Add CDStyles and
    CDScripts.
  3. Change the width in CDStyles>>#imageContainer

For an example you can look at CFDemo.

FadeIn


A function to show an `image loading' message and
subsequent fade-in of a photo. Inspired by the Flash-like effect on
Couloir.



Based on Onload image fades
without Flash
.


fade in

Documentaion


Create a FIFadeInImage instance and add FIScripts.


For a more advanced example see Cascading Onload image fades without Flash



protoGrowl


Seaside bindings for protoGrowl. This is a Javascript tool based on the Prototype library. It enables developers to display bubble-styled user interface messages inspired by the Growl notification system for OS X.


protoGrowl user interface messages

The PGDemo class contians examples. Scriptaculous is required


The protoGrowlComet package contains an example using Coment, it is is not needed for use with Comet.


protoGrowlLibrary contains FileLibrary versions of resources.
This is not needed in general.





Reflection


Port of reflection.js.


reflection

Content Date


A date component using CSS.


content date

Based on the "Blue Zinfandel Squared Enhanced" wordpress theme by Brian Gardner


The CSS, XHTML and design is released under GPL.



Text Effects


Displays headings in worn out type using only CSS.


worn out text

Based on CSS-Technique: Worn Type.



CanvasGraph


Discontinued, replaced by PlotKit.





SeaChart


Discontinued, replaced by CanvasGraph.





Tooltip


Prototype. Not usable.





Thanks to ImageShack for Free Image Hosting


CSSBarGraph-SeanGlazier.1.mcz
SeaChart-ExCanvas.8.mcz
SeaChart-tfel.7.mcz
PlotKit-0.9.1-tfel.31.mcz
PlotKitVw-tfel.1.mcz
PlotKit-0.9.1-tfel.30.mcz
SeaChart-tfel.6.mcz
AnswerNaire-andma.243.mcz
GoogleChart-yv.51.mcz
Balloon3D-JK.1.mcz
CssMenu-cb.4.mcz
GoogleChart-obi.50.mcz
GoogleChart-obi.49.mcz
GoogleChart-obi.48.mcz
GoogleChart-obi.47.mcz
GoogleChart-obi.46.mcz
DojoChart-obi.3.mcz
DojoChart-obi.2.mcz
DojoChart-obi.1.mcz
GoogleChart-pmm.45.mcz
GoogleChart-obi.44.mcz
GoogleChart-obi.43.mcz
PlotKit-0.9.1-go.29.mcz
GoogleChart-MAD.42.mcz
GoogleChart-MAD.41.mcz
GoogleChart-MAD.40.mcz
protoGrowl-pmm.13.mcz
GoogleChart-pmm.39.mcz
GoogleChart-MAD.38.mcz
GoogleChart-MAD.37.mcz
GoogleChart-pmm.36.mcz
GoogleChart-go.35.mcz
GoogleChart-go.34.mcz
GoogleChart-pmm.33.mcz
GoogleChart-MAD.32.mcz
GoogleChart-pmm.31.mcz
GoogleChart-pmm.30.mcz
GoogleChart-pmm.29.mcz
GoogleChart-pmm.28.mcz
GoogleChart-pmm.27.mcz
GoogleChart-lr.26.mcz
GoogleChart-pmm.25.mcz
GoogleChart-pmm.24.mcz
GoogleChart-pmm.23.mcz
GoogleChart-pmm.22.mcz
GoogleChart-pmm.21.mcz
GoogleChart-lr.20.mcz
GoogleChart-lr.19.mcz
GoogleChart-lr.18.mcz
GoogleChart-pmm.17.mcz
GoogleChart-lr.16.mcz
GoogleChart-pmm.15.mcz
GoogleChart-lr.15.mcz
GoogleChart-lr.14.mcz
GoogleChart-pmm.14.mcz
GoogleChart-lr.13.mcz
GoogleChart-pmm.12.mcz
GoogleChart-lr.12.mcz
GoogleChart-lr.11.mcz
GoogleChart-lr.10.mcz
GoogleChart-lr.9.mcz
GoogleChart-pmm.9.mcz
GoogleChart-lr.8.mcz
GoogleChart-lr.7.mcz
GoogleChart-pmm.7.mcz
GoogleChart-lr.6.mcz
GoogleChart-lr.5.mcz
GoogleChart-lr.4.mcz
GoogleChart-pmm.3.mcz
GoogleChart-pmm.2.mcz
GoogleChart-pal.1.mcz
TextEffects-pmm.2.mcz
ContentDate-pmm.2.mcz
NumberedList-pmm.7.mcz
Reflection-pmm.11.mcz
StarRater-pmm.13.mcz
CSSBarGraph-pmm.11.mcz
NumberedList-mb.6.mcz
SeaChartDemo-mb.14.mcz
SeaChartDemo-mb.13.mcz
SeaChartDemo-mb.12.mcz
FadeIn-pmm.6.mcz
Crossfade-pmm.8.mcz
Crossfade-pmm.7.mcz
CSSBarGraph-mb.10.mcz
Reflection-mb.12.mcz
protoGrowl-mb.11.mcz
protoGrowl-mb.12.mcz
NumberedList-mb.5.mcz
StarRater-mb.12.mcz
FadeIn-mb.5.mcz
Crossfade-mb.6.mcz
PlotKit-0.9.1-pmm.28.mcz
Reflection-raj.11.mcz
Reflection-pmm.10.mcz
Reflection-raj.9.mcz
Tooltip-pmm.2.mcz
protoGrowl-pmm.10.mcz
PlotKit-0.9.1-mb.27.mcz
ContentDate-pmm.1.mcz
PlotKit-0.9.1-pmm.26.mcz
protoGrowl-mb.9.mcz
SeaChartDemo-mb.11.mcz
NumberedList-mb.4.mcz
StarRater-pmm.11.mcz
StarRater-mb.10.mcz
SeaChartDemo-mb.10.mcz
FadeIn-mb.4.mcz
SeaChartDemo-mb.9.mcz
StarRater-mb.9.mcz
StarRater-pmm.8.mcz
FadeIn-mb.3.mcz
Crossfade-mb.5.mcz
CSSBarGraph-mb.9.mcz
protoGrowl-mb.8.mcz
Reflection-mb.8.mcz
PlotKit-0.9.1-mb.25.mcz
PlotKit-0.9.1-pmm.24.mcz
Reflection-pmm.4.mcz
protoGrowl-pmm.7.mcz
SeaChartDemo-pmm.8.mcz
Reflection-pmm.3.mcz
PlotKit-0.9.1-pmm.23.mcz
CSSBarGraph-pmm.8.mcz
TextEffects-pmm.1.mcz
Sober-pmm.1.mcz
CssMenu-mb.3.mcz
CssMenu-mb.2.mcz
protoGrowl-pmm.6.mcz
protoGrowlComet-pmm.3.mcz
protoGrowlComet-pmm.2.mcz
protoGrowl-pmm.5.mcz
protoGrowlComet-pmm.1.mcz
protoGrowl-pmm.4.mcz
protoGrowl-pmm.3.mcz
SeaChartDemo-mb.7.mcz
CssMenu-pmm.1.mcz
StarRater-mb.7.mcz
Reflection-mb.2.mcz
PlotKit-0.9.1-mb.22.mcz
NumberedList-mb.3.mcz
FadeIn-mb.2.mcz
CSSBarGraph-mb.7.mcz
Crossfade-mb.4.mcz
PlotKit-0.9.1-pmm.21.mcz
PlotKit-0.9.1-pmm.20.mcz
PlotKit-0.9.1-pmm.19.mcz
PlotKit-0.9.1-pmm.18.mcz
SeaChartDemo-pmm.6.mcz
PlotKit-0.9.1-pmm.17.mcz
PlotKit-0.9.1-pmm.16.mcz
PlotKit-0.9-pmm.15.mcz
PlotKit-0.9-pmm.14.mcz
PlotKit-0.9-pmm.13.mcz
SeaChartDemo-pmm.5.mcz
PlotKit-0.9-pmm.12.mcz
SeaChartDemo-pmm.4.mcz
NumberedList-pmm.2.mcz
CSSBarGraph-pmm.6.mcz
SeaChartDemo-pmm.3.mcz
PlotKitLibrary-pmm.1.mcz
PlotKit-0.9-pmm.11.mcz
protoGrowl-pmm.2.mcz
protoGrowl-pmm.1.mcz
Tooltip-pmm.1.mcz
PlotKit-pmm.10.mcz
PlotKit-pmm.9.mcz
PlotKit-pmm.8.mcz
PlotKit-pmm.7.mcz
PlotKit-pmm.6.mcz
PlotKit-pmm.5.mcz
PlotKit-pmm.4.mcz
SeaChartDemo-pmm.2.mcz
Crossfade-pmm.3.mcz
StarRater-pmm.6.mcz
SeaChartDemo-pmm.1.mcz
StarRater-pmm.5.mcz
PlotKit-pmm.3.mcz
CSSBarGraph-pmm.5.mcz
Crossfade-pmm.2.mcz
PlotKit-pmm.2.mcz
PlotKit-pmm.1.mcz
CSSBarGraph-pmm.4.mcz
CanvasGraph-pmm.5.mcz
FadeIn-pmm.1.mcz
Crossfade-pmm.1.mcz
NumberedList-pmm.1.mcz
Reflection-pmm.1.mcz
CanvasGraph-pmm.4.mcz
StarRater-pmm.4.mcz
CSSBarGraph-pmm.3.mcz
CanvasGraph-pmm.3.mcz
CSSBarGraph-pmm.2.mcz
StarRater-pmm.3.mcz
StarRater-pmm.2.mcz
StarRater-pmm.1.mcz
CanvasGraph-pmm.2.mcz
CSSBarGraph-pmm.1.mcz
CanvasGraph-pmm.1.mcz
SeaChart-pmm.5.mcz
SeaChart-pmm.4.mcz
SeaChart-pmm.3.mcz
SeaChart-pmm.2.mcz
SeaChart-pmm.1.mcz