The DOC

How to: Easy Cchart microguide

All you need is the CSS file, dowload the full package or simply insert the code below in your web pages, in the <head> section:

<link href="http://lab.sid05.com/EasyCchart/EasyCchart-v02.css" rel="stylesheet" type="text/css">

With this step you've imported the CSS file in your pages; ok, now we need to write the HTML. This is a classical code to show a bar chart:

<dl class="middle">
<dt>Easy Cchart Players Result</dt>
<dd class="v95"><span>the CSS robot 95%</span></dd>
<dd class="v63"><span>just a couples of JPGs 63%</span></dd>
<dd class="v30"><span>HTML vs the Monster 30%</span></dd>
<dd class="v3"><span>Me 3%</span></dd>
</dl>

And the result:

Easy Cchart Players Result
the CSS robot 95%
just a couples of JPGs 63%
HTML vs the Monster 30%
Me 3%

Let me explain some roots.
The first class (in <dl> tag) is the only class needed and you can choose big, middle or small.
Second class is the dimension bar class named v# (and apply at the <dd> tag). There are 101 classes called v# (from v0 to v100).

Examples

You can choose the tool dimension (9 fixed dimension) and also a grid view; just insert another class in the <dl> tag:

<dl class="middle w600grid">

This is the result:

Easy Cchart Players Result
the CSS robot 95%
just a couples of JPGs 63%
HTML vs the Monster 30%
Me 3%

Colors: you can also change the single bar colors; i write 6 colors classes at the moment, green, blue, red, orange, purple, yellow. Insert the color class in every single bar line (<dd> tag):

<dd class="v95 red">...</dd>
<dd class="v63 yellow">...</dd>

Look at the result:

Easy Cchart Players Result
the CSS robot 95%
just a couples of JPGs 63%
HTML vs the Monster 30%
Me 3%

The big list

  • Text/bar dimension class (apply at <dl> tag)
    1. big
    2. middle
    3. small
  • Global tool dimension class (apply at <dl> tag)
    • Fixed dimension with grid
      1. w350grid
      2. w400grid
      3. w450grid
      4. w500grid
      5. w55ogrid
      6. w600grid
      7. w650grid
      8. w700grid
      9. w750grid
    • Fixed dimension without grid
      1. w350
      2. w400
      3. w450
      4. w500
      5. w55o
      6. w600
      7. w650
      8. w700
      9. w750
  • Bar color class (apply at <dd>tag)
    1. green
    2. red
    3. blue
    4. orange
    5. purple
    6. yellow
  • Bar size class (apply at <dd>tag)
    1. v0
    2. v1
      ...
      ...
      ...
    3. v99
    4. v100

Need more blablabla? I have a blog, it's in italian but if you need more details just write a comment on this post and let me understand...