Fun With Chart.JS and the Slump



I decided to take a poke at some data visualization by tinkering with Chart.js, which is pretty powerful. Even though it has a lot of documentation, the examples are sparse and it took me a while to make it look right. You can see I've charted our conference standing, supporter's shield standing, and MLS Power Rankings after each game. Notice, this isn't by week, it's by games played. Standings are noted at the end of the weekend, or if it was a midweek game, after all midweek games have been played. I prefer that to weekly updates because I think it gives a more accurate and interesting picture.

Because we were in the same position in conference standing and Supporter's Shield standing for several weeks, it's kind of boring to look at, and unfortunately where they overlap it doesn't exactly show it. Ideally I would think the lower layers would be positioned slightly lower so you could se it, but I can't figure out how to make that happen. Another issue, the highest standing you can achieve is a 1, but if I don't start the ticks around 0, the line thickness gets cropped. Fortunately I can turn of the label for that first tick. I'll be fiddling with the settings a lot so if you come back later I may have learned thing or two and it may look somewhat different. (UPDATE - Keeping an updated version of this chart over here.)

So... are we in a slump? Sure looks like it. You can see the individual graphs after the jump.




3 thoughts on “Fun With Chart.JS and the Slump”

      1. Same here. I haven’t been able to get pre-2013 game data, but it’s fun to see Nagbe and Chara as huge outliers compared to everyone else. Also surprised to see Will Johnson got more than he gave.

Leave a Reply