I have a rather interesting issue. I have columns in my web app that look similar to these guys:

enter image description here

I've been able to slice them up and build these guys out...but now I have an added requirement of "recoloring" the columns (as these guys might need to be in a variety of colors). Rather than updating the assets each and every time with a different color, is there a way to do any of the following?

a.) Create these columns somehow through code (HTML/CSS)? And programmatically re-color the columns?

b.) Programmatically re-color these columns by reducing the opacity on the background image (each slice, essentially) and instead, do an overlay that is an RGB value of my choice? (only issue I'm worried about is that the slices are square. Meaning, if you look at the top of the column, when I spliced this, the background on the actual splice is transparent. However, i'm worried if I do an overlay on this piece, it'll overlay a color and color the transparent background of the shape -- let me know if that's confusing. it's rather hard to describe this)?

Any ideas on how to do this without having to create differently colored assets every time?

  • How have you generated your actual columns? There are a lot of ways to change the colors, e.g. starting from an SVG image or generating a server side graph with GD. Dec 10 '13 at 13:12
  • I just took a column from a psd file and created a top, middle, and bottom slice. If I were to do this programmatically, how would I do so? I imagine it's possible but wasn't sure how to go about it.
    – yeahumok
    Dec 10 '13 at 13:27
  • 2
    SVG is probably perfect for this. You can do sprite tricks, but I expect you'd only be able to do alpha effects (white to clear) which might desaturate colors too much. SVG is a plain text format which can be created on the fly server-side (preferred) or processed using javascript on the client side
    – horatio
    Dec 10 '13 at 17:37

It mainly depends on your skills and of the final output needed (An html page? An image? A report?).

If your final output is an image and you are the only people who could change it, probably it's faster to use a graphic program (working with vectorial images is simple changing colors and dimensions with precision); but if you need to provide some interactive tool you'd better code an html5 interface which send the correct color to a server side script (e.g. PHP) or a client side script (javascript).

If you are practical with PHP or other server-side programming language, you can generate the graphs by coding them with GD. It's not so difficult as it seems.

If you prefer to draw your bars with a graphic program, you can use Adobe Illustrator or Inkscape to produce SVG and change the colors with javascript (see for example here). Changing the height using javascript is a little bit difficult, but is possible (see here).

If your output is an html page, there are a lot of javascript graphic libraries oriented to the graphs (flot, Google Charts, Chart.js, D3.js, Processing.js, ...).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.