Upgraded Charts on Golf Predictor - Part 1

Original Flash Based Line Chart (FusionCharts)

New JavaScript Line Chart (Flot)

Further to the recent post about the chart upgrade, I am pleased to announce that the first tranche of charts have been upgraded on on Golf Predictor. These are the charts on the following pages:

1. Prediction Data page
2. Golfer Page
3. Season Stats page
4. Tournament page

All the charts on these pages are pop-up charts and include line, multi-line, bar, bar stacked and pie charts. A comparison of the old and new line charts can be seen in the screenshots above. Both charts show the same data, namely Rory McIlroy's performance in 2014. As you can see, the charts are very similar, but there are some subtle differences (more below). Some notes on these new charts:

1. The Flot charts handle some formatting situations differently, e.g. if chart data exceeds the maximum/minimum value assigned for the chart. I may have missed some of these issues, so please let me know if you spot a badly formatted chart.
2. Another Flot difference is that horizontal bar charts show the bars are in opposite order to FusionCharts. This is only relevant if you have changed chart orientation in your profile from the default (vertical).
3. Histogram type bar charts (e.g. round score distributions) are only visible in vertical orientation. This was the same with the original charting.
4. As can be seen in the second screenshot above, there is space to right of the Flot pop-up chart. This is to allow for the hover text for the last data point to be visible. Unlike FusionCharts, Flot doesn't handle this very well.
5. Tied positions are now indicated in line chart hover text, where relevant. This is shown in the second screenshot above where Rory finished T25th in the WGC - Cadillac Championship. 
6. As also shown above, the hover text can also be better formatted in Flot and span multiple lines.
7. Hovering over a slice on a pie chart will show details under the chart, rather than on the slice. Like the existing pie chart, the value will still be shown beside the slice, but you must hover over it to see the percentage of total for the slice below the chart.
8. The values are not shown on/over the bar for vertical (default) bar charts with rotated x-axis labels e.g. golfer comparison charts. These labels have to be rotated for legibility purposes, as the golfer names are too long. However, when the bar value is added, the rotated x-axis labels get misaligned pretty badly. I have therefore hidden the bar value on such charts, but you can hover over a bar to get its value or view it in the vertical orientation to see the bar values in place.
9. The bar values are hidden for the world ranking chart on the tournament page as they were affecting the position/legibility of the axis labels. Sometimes, combinations of Flot plug-ins do not play well together. You can still hover over a bar to get its value.
10. I have tested the charts on FireFox, IE7/8/11 and Chrome on Windows and also iOS and Android. Unlike the Flash based charts they replace, they render on all browser/devices.
11. The charts do render on IE7/8, but they do not look as well or the hover text doesn't work as well as they do on more modern browsers. In any event, if you are using these versions of IE, you should really be thinking about upgrading!
12. I fixed a few long standing errors that were on some of the the existing charts, such as incorrect axis labels.

Overall, I believe these new Flot charts are better than the Flash based charts they are replacing. As stated previously, they render quicker, are compatible with all devices, use the latest charting technology and most importantly, the look good. Any feedback (via comments on this article or email) on these new charts would be most welcome.

Just another way to make Golf Predictor a little better. I will be converting more charts over the coming weeks to Flot and will post when the next tranche is complete.