search

asciimoo / cssplot

Pure CSS charts
https://asciimoo.github.io/cssplot
Other
782 stars 46 forks source link

Group values and display them in different colors #8

Closed kantord closed 10 years ago

kantord commented 10 years ago

Many charts display groups in addition to numbers.

To implement this, I've created a separete cssplot.groups.less file, which actually doesn't depend on cssplot.base.less, so can be universally used to display groupings.

It might also be useful when creating graphs.

An example code:

<div class="bar-chart group-by-gender">
    <ul class="container">
        <li data-cp-size="99" class=male>99%</li>
        <li data-cp-size="50" class=female>50%</li>
        <li data-cp-size="30" class=male>30%</li>
        <li data-cp-size="90" class=female>90%</li>
        <li data-cp-size="10" class=female>10%</li>
        <li data-cp-size="70" class=male>70%</li>
        <li data-cp-size="30" class=male>30%</li>
        <li data-cp-size="90" class=male>90%</li>
    </ul>
</div>

<div class="bar-chart group-by-number">
    <ul class="container">
        <li data-cp-size="99" data-group=0>99%</li>
        <li data-cp-size="50" data-group=1>50%</li>
        <li data-cp-size="30" data-group=2>30%</li>
        <li data-cp-size="90" data-group=3>90%</li>
        <li data-cp-size="10" data-group=4>10%</li>
        <li data-cp-size="70" data-group=5>70%</li>
        <li data-cp-size="30" data-group=6>30%</li>
        <li data-cp-size="90" data-group=0>90%</li>
    </ul>
</div>