CSS-only plotting

[judofyr]

Might as well use inline styling to accomplish the same (without adding tons of CSS):

    <div class="bar-chart">
      <ul>
        <li style="height:99%">99%</li>
        <li style="height:50%">50%</li>
        <li style="height:30%">30%</li>
        <li style="height:90%">90%</li>
        <li style="height:10%">10%</li>
        <li style="height:70%">70%</li>
        <li style="height:30%">30%</li>
        <li style="height:90%">90%</li>
      </ul>
    </div>

[aleem]

This gives up some flexibility. If you want to switch from horizontal to vertical you have to change a lot more code. If you want to introduce a new face style that color codes bars based on height this wouldn't work.

[scottcanoni]

Agreed, especially since the inline approach allows more flexibility, like 66%.

[rwl4]

I just came here to say the same. You can accomplish the first two chart styles quite easily, though the last might be a bit more involved.

[fimdomeio]

yep... been using that technic for years.

[peaton]

Why do you bring this up? Is this more ideal? I thought writing inline css was an accepted awful thing to do. Or is that just a simplification for new developers? Why do you benefit from doing this?

[BoppreH]

I loved the simplicity, and wanted to know how it was done.

https://github.com/asciimoo/cssplot/blob/master/cssplot.css

  .bar-chart ul li[data-cp-size="0"] {
  height: 0%;
  }
  .bar-chart ul li[data-cp-size="1"] {
  height: 1%;
  }
  .bar-chart ul li[data-cp-size="2"] {
  height: 2%;
  }
  ...

Still find it cool, but a 1200 line CSS may be a bit too much for a practical application.

[aligajani]

Just shows what CSS can do but won't use it in production.

[girvo]

Converting it to a LESS mixin (or similar) would be interesting, it'd allow you to bring in only the needed styles for the graphs you've used :)

[evanm]

Couldn't this be reduced by, like, a lot by simply using this CSS3 gem?

height: attr(sata-cp-size px);

[JoelSutherland]

It's very redundant so it gzips to 3kb.

[bbx]

Usually, "CSS-only" articles and repos are either technically impressive, or clever solutions for production environment problems.

Considering attribute selectors have been around for a while, I fail to see a decent use case. Any progress bar or 2-dimensional chart of this kind needs to be generated dynamically, either through the backend or frontend, same thing. In this case, they're inserted as data attribute values. What's the difference with using inline style attributes (left: 10%; width: 90%)? They're generated automatically, so verbosity is not an issue. And you'd save yourself 1200 lines of CSS.

What about flexibility? CSS provides the ability to style each of the 400 options differently, right? Well using a "x24 y78" CSS class would be as simple. But in the end, you only want to give different height/width bottom/left values. The styling remains unchanged.

Writing every possible option of a dynamically generated chart into a static CSS file, just for the sake of "Simplicity" and "No javascript required" seems like an overkill.

On a side note, anything dealing with percentages instead of pixel values is automatically granted the keyword "Responsive".

[rco8786]

Neat idea, a little disappointed looking at the source though. A class for every possible datapoint doesn't scale particularly well.

[bennettfeely]

No need for duplicating the value in the attribute and also in the element by including this snippet.

  [data-cp-size]:after { content: attr(data-cp-size) "%"; }

[sova]

i think what you made is cool. keep making cool stuff.

[evan_]

With the addition of a few CSS transition rules these could be animated really easily.

[caiob]

if only CSS supported for loops and variables..