Grow your CSS skills. Land your dream job.

#108: Using Chartwell

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It's as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out the formula in that font then turning on ligatures. On the web, the formula is in text and you apply the font via @font-face and a JavaScript polyfill for ligature support. Browser support goes back even to IE 6.

Links from video:

Comments

  1. Alfred Larsson
    Permalink to comment#

    is it just for me the video is messed up?

    • DJ
      Permalink to comment#

      No, it’s not just you. Clicking on the video, I could tell that it was doing something but in 15 minutes never showed a lick of video. So I clicked on the “download video file” button and it did open a “quicktime player” and gave the first half-measure of music at full screen size before it stopped, became posturized and did nothing for 10 minutes. SO, I right clicked and chose “save link” and it now is downloading the .mov file and the display say’s that it will take more than an hour. Chris has clearly begun doing something different on his screencasts as I have watched nearly every one for over two years without problems. I just wish he would tell us what we needed to do/change in order to keep up with the “latest and greatest” methods he uses. If these are being recorded at much higher quality (which I can’t see why he would with the results of his ‘how fast is your isp’ poll) then we should expect longer downloads; BUT, they way my browser handles it, there is NO indication of what’s happening.

  2. Alistair
    Permalink to comment#

    @Alfred, no mate i’m having issues here also with the HTML5 version. Watching now in Flash version, seems perfect.

  3. bren
    Permalink to comment#

    Thanks!!! I’ve been looking for something like this.
    Sparklines are powerful in web pages.

  4. Permalink to comment#

    Thanks for the video, Chris. I’ve been meaning to buy Chartwell and this was just the kick I needed.

    In case anyone’s reading this who is interested in Word support, you can turn ligatures on and off. Here’s information: http://office.microsoft.com/en-us/word-help/opentype-options-in-the-font-dialog-box-HA101809106.aspx#_Toc249949575

  5. mr.v
    Permalink to comment#

    You could make an awsome color picker with this.

  6. Permalink to comment#

    First off, you were not boring at all :)

    Second. I got a question for you. What kind of recording software and hardware are you using? I am asking because I’m trying to make screencasts as well but they just don’t wanna be as cool as yours. Is that because you’re using a Mac? :)

    And lastly, that font feature is really interesting. Though at this point I’m not exactly sure where I can use it, but I’m sure that time will come and I’ll really appreciate that feature. For the time being, I can use it only for impressing my hot colleague Sue. That one thing can be worth using it. ;)

  7. Amr
    Permalink to comment#

    Mr Chris , Please do not make video with too large size , so we can easy download :)
    thank you.

  8. Catalin
    Permalink to comment#

    The problem may be from codecs.. Anyway, Chris, I realy don’t like html video because they sux. They shouldn’t be used until they are full compatible and works great.

  9. Chris, PLEASE use YouTube to host your videos. Sublime Video sucks. I can’t watch the video at all. I just can’t get it to render more then 10 seconds. And I have 8 Mbit internet!

  10. Hi all, just wanted to say this is working fine for me? Maybe Chris has fixed it now? Cheers

  11. Aaron
    Permalink to comment#

    Ok, the font was cool to begin with. Then when you got to the part about using it on the web and the possibilities of dynamic charts, my mind was blown. I can see a lot of cool possibilities with this. Some people just make cool stuff. Thanks for introducing me to this.

  12. Dom

    In the 3 months since you made this screencast it looks like Font Font have taken over distribution and the @font-face is no longer available. A damn shame.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".