Charts, PDFs, and PHP
- 1. Charting a Course through PDFs and PHP
- 2. About Me WorkingBuildings, LLC In-house Developer Worked with PHP since 2005 jsterry@gmail.com @jerkob
- 3. The Problem Get a chart that looks the same on the web and in a PDF.
- 4. Constraints • Looks the Same on Screen and in Print • Pure PHP or JavaScript/Flash with PHP • Aesthetically Appealing • Works in IE7+8 • Interactive • Not Complicated • Local (No Internet Required)
- 5. Image-based Charts Generate 72 DPI Images No interactivity Reliable Server-side Weak aesthetics
- 7. JpGraph
- 8. pChart
- 9. Flash-based Charts It’s Flash iOS/Android compatibility Generate images client-side 72 DPI resolution Animation Good aesthetics
- 11. Maani
- 12. Fusion
- 13. amCharts
- 14. AnyChart
- 15. Canvas-based Charts JavaScript Requires excanvas for IE < 9 Not a very portable format Probably on the way out
- 16. jqPlot
- 17. SVG-based Charts Works in all browsers (VML for IE) Works without Flash (iOS) JavaScript Animation Interactivity Vector-based
- 18. Raphael/gRaphael
- 19. HighCharts
- 20. jQuery SVG
- 22. False Starts Google Charts jqPlot (Canvas to SVG)
- 23. So What Did We Use?
- 24. So What Did We Use?
- 25. Back to the Problem Get a chart that looks the same on the web and in a PDF.
- 26. Constraints • Looks the Same on Screen and in Print • Pure PHP or JavaScript/Flash with PHP • Aesthetically Appealing • Works in IE7+8 • Interactive • Not Complicated • Local (No Internet Required)
- 27. What about PDFs?
- 29. FPDF Old Reliable Not UTF-8 Fast No SVG Flexible but difficult Free
- 30. TCPDF Fork of FPDF Maintained Powerful Slower UTF-8 support SVG support (beta) Flexible but difficult Free
- 31. PrinceXML Best SVG support Easy to use (HTML and CSS) Expensive Supported
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: The issue with all of these was resolution - they all generate 72 DPI images that don&#x2019;t print well. In addition they didn&#x2019;t have interactivity and the look of the charts themselves was generally a step below.\n\n\n\n\n
- #7: Flexible but a little complex.\n\nTried some &#x201C;make it too large then scale it down&#x201D; options, but that didn&#x2019;t work well - fonts too small, spacing issues, etc. \n\nCan be ugly or can be nice depending on how much time you&#x2019;re willing to put in.\n\nSSL issues\n\nGoogle could turn it off - see Google Translate\n
- #8: PHP-based solution\n\nkind of ugly\n
- #9: Just came out with a version 2.\n\nQuite good.\n\nLots of nice computation functions.\n
- #10: The issues here are first, they&#x2019;re Flash, and I don&#x2019;t want to work with Flash (doesn&#x2019;t work on iPad, etc.). Most of these can generate images as well but sometimes they do it client side instead of server side which is not useful. Plus the resolution of the generated images was 72 DPI in all the ones I tried.\n\n\n\n\n\n
- #11: Flash-based which I was trying to avoid. \n\nIn researching this I found that it could be a good solution with how it works now. When I was looking at it my understanding was that to get the other formats, you first had to load the Flash graph and then it would be able to generate the SVG. I think now you can have it choose server side what to do. \n\nCould be another good option.\n
- #12: Maani.us Flash/XML charts\n\nFlash-based, export to image\n\nimage is 72 DPI, and is a client side prompt (this was true of a lot of Flash charts I looked at - the Flash had to be loaded on screen and then it would download)\n\n
- #13: v3 is implementing a SVG-based JavaScript solution - based on HighCharts!\n
- #14: Implementing a SVG-based JavaScript solution as well\n\nCan export as image or PDF, but requires server-side script to handle the passed image data. I would bet resolution is 72 DPI.\n
- #15: JavaScript-based solution in beta\n\nVideo on their website of it running on an iPad\n\n\n
- #16: Google Charts - not local, 72 DPI, no option for different resolution. Flexible but a little complex. Tried some &#x201C;make it too large then scale it down&#x201D; options, but that didn&#x2019;t work well - fonts too small, spacing issues, etc.\nSwiff Chart Generator - Flash-based which I was trying to avoid. In researching this I found that it could be a good solution with how it works now. When I was looking at it my understanding was that to get the other formats, you first had to load the Flash graph and then it would be able to generate the SVG. I think now you can have it choose server side what to do. Could be another good option.\nMaani Charts - Flash-based, export to image - image is 72 DPI, and is a client side prompt (this was true of a lot of Flash charts I looked at - the Flash had to be loaded on screen and then it would download)\nRaphael/gRaphael - In development so a little early. When I was looking it was quite early. But a good option.\njQuery SVG - has charting extensions, kind of ugly\nsvgweb - semi-Google project. In beta, not targeted at charting\njqPlot - uses canvas.\n\n\n\n
- #17: Requires jQuery\n\nRequires excanvas\n\nWe tried this, and even looked at doing canvas to SVG conversions\n
- #18: \n\n\n\n
- #19: Really beautiful\n\nDoes not require jQuery\n\nIn development - missing a lot of functionality\n\nFree\n
- #20: Free for non-commercial\n\nMature\n\nRequires jQuery\n\nHelps with time-based axes\n\nWorking on stock charts\n\nReally great support forums\n
- #21: More of a build-your-own\n\nFree\n\njQuery Required\n\nNot graph-focused\n
- #22: \n
- #23: \n
- #24: Came out with SVG-beta right when we needed this\n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: Some other PDF libraries (like HTML2PDF) are based on TCPDF\n
- #31: \n
- #32: Zend PDF doesn&#x2019;t support SVG\nwkhtmltopdf has PHP bindings but they are complex to implement\n\n
- #33: \n