Data Visualization Tips: Daily Archive for Developers

We shared a charting tip a day all of June on our Twitter handle. The tips covered topics like chart selection, usability guidelines and how to make the most out of FusionCharts. In case you missed out, here are our words of wisdom put together:

1. Tip 1: Use a column/bar chart for comparing individual values and line/area for overall trend. https://www.tutorial9.net/tutorials/web-tutorials/selecting-the-right-chart-type-for-your-data/
2. Tip 2: <chart useRoundEdges=’1’…> gives your plain 2D columns a round-edged glass-fill effect. https://www.fusioncharts.com/explore/column2d_6/
3. Tip 3: Avoid unnecessary axis labels like “Month” & “Name” when you your data labels are Jan/Feb/.. or Adam/Steve/…
4. Tip 4: Convert your input data in secs to mins, hours & days for easier reading using number scaling. https://www.fusioncharts.com/dev/chart-guide/chart-configurations/number-format
5. Tip 5: Visually build your XML data & HTML code for the charts using the XML Builder. https://www.fusioncharts.com/explore/fusionmaps/
6. Tip 6: Highlight imp data sets by changing their bg/border, or anchor shape in line charts. https://www.fusioncharts.com/dev/chart-guide/chart-configurations/border-and-background
7. Tip 7: Composition of data (part of a whole) is best shown using the pie and stacked charts. https://www.tutorial9.net/tutorials/web-tutorials/selecting-the-right-chart-type-for-your-data/
8. Tip 8: Slanted data labels occupy lesser space & are easier to read than rotated labels. https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-labels#rotate-mode
9. Tip 9: To highlight a data item in a pie chart, slice it out. https://www.fusioncharts.com/explore/pie-doughnut-charts/
10. Tip 10: In a dashboard, place your most important chart at the top-left corner. https://www.dashboardinsight.com/articles/digital-dashboards/fundamentals/5-things-to-keep-in-mind-while-designing-a-digital-dashboard.aspx
11. Tip 11: Open drill-down charts in a new window by prefixing the destination URL with n-. https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down#in-a-new-page
12. Tip 12: Show who created the charts by adding your website URL to the chart’s context menu. https://www.fusioncharts.com/blog/branding-your-charts/
13. Tip 13: Plot discontinuous data by specifying just the data label without a value. https://www.fusioncharts.com/dev/common-use-cases/plot-discontinuous-data
14. Tip 14: Make your charts crisp by delegating detailed info on to the tooltips. https://www.fusioncharts.com/blog/less-litter-more-letters-using-tooltips/
15. Tip 15: For seeing ups/downs in company profit and store inventory, use the waterfall chart. https://fusioncharts.com/blog/second-base-with-charts-understanding-the-waterfall-chart/
16. Tip 16: For irregular data (Oct 2009-Mar 2010), put a vline at the end of 2009 for clarity. https://fusioncharts.com/blog/read-between-the-plots/
17. Tip 17: Always enable chart exporting in your dashboards to allow users to save it for email/PPTs. https://www.fusioncharts.com/blog/export-your-charts-as-images-or-pdfs/
18. Tip 18: If your chart is not displaying as intended, use the debug mode to find out why. https://www.fusioncharts.com/dev/usage-guide/troubleshooting/debugger.html
19. Tip 19: Dashboards should allow viz at 3 levels: summarized, multi-dimensional & detailed. https://fusioncharts.com/blog/conceptualizing-an-effective-business-dashboard/
20. Tip 20: Make the chart interactive on user actions like hover or click to display more information. https://www.fusioncharts.com/dev/advanced-chart-configurations/events/introduction-to-events
21. Tip 21: Use descriptive captions to explain what your chart does. Example: Monthly revenue for 2009 (USD)
22. Tip 22: For hierarchical relationships (analytics/HR mgmt), use the multi-level pie chart. https://www.fusioncharts.com/explore/powercharts/
23. Tip 23: For displaying rankings (like in sports), use an inverted axis. https://www.fusioncharts.com/explore/powercharts/
24. Tip 24: Export all charts in a page with a single click using FusionCharts batch export. https://www.fusioncharts.com/blog/export-your-charts-as-images-or-pdfs/
25. Tip 25: You can create charts using <fusioncharts></fusioncharts> with FusionCharts DOM. https://blog.fusioncharts.com/2008/11/fusioncharts-dom—a-new-way-to-include-fusioncharts-in-your-html/
26. Tip 26: Less space, lots of data? Use compact charts like Bullet graphs & Sparklines. https://www.fusioncharts.com/dashboards/
27. Tip 27: For multi-line tooltips/captions, use {br} for line breaks. https://www.fusioncharts.com/dev/chart-guide/chart-configurations/axes
28. Tip 28: To execute jQuery codes directly from chart’s link attribute, append your code with .foo https://www.shamasis.net/2010/02/executing-jquery-within-fusioncharts-link-attribute/
29. Tip 29: For comparing 3 parameters for every data set (ex: investments), use the bubble chart. https://www.fusioncharts.com/blog/second-base-with-charts-understanding-the-bubble-chart/

Useful? Handy? Random blurb put together? Let us know what you think of it.