Charting aCourse throughPDFs and PHP
About MeWorkingBuildings, LLCIn-house DeveloperWorked with PHP since 2005jsterry@gmail.com@jerkob
The ProblemGet a chart that looksthe same on the weband in a PDF.
Constraints• Looks the Same on Screen and in Print• Pure PHP or JavaScript/Flash with PHP• Aesthetically Appealing• Works ...
Image-based ChartsGenerate 72 DPI ImagesNo interactivityReliableServer-sideWeak aesthetics
Google Charts
JpGraph
pChart
Flash-based ChartsIt’s FlashiOS/Android compatibilityGenerate images client-side72 DPI resolutionAnimationGood aesthetics
Swiff ChartGenerator
Maani
Fusion
amCharts
AnyChart
Canvas-based Charts JavaScript Requires excanvas for IE < 9 Not a very portable format Probably on the way out
jqPlot
SVG-based ChartsWorks in all browsers (VML for IE)Works without Flash (iOS)JavaScriptAnimationInteractivityVector-based
Raphael/gRaphael
HighCharts
jQuery SVG
Also...amChartsFusionAnyChart
False StartsGoogle ChartsjqPlot (Canvas to SVG)
So What Did We Use?
So What Did We Use?
Back to the ProblemGet a chart that looksthe same on the weband in a PDF.
Constraints• Looks the Same on Screen and in Print• Pure PHP or JavaScript/Flash with PHP• Aesthetically Appealing• Works ...
What about PDFs?
PDF LibrariesFPDFTCPDFZend PDFPrinceXMLwkhtmltopdfHTML2PDFPDFLib
FPDFOldReliableNot UTF-8FastNo SVGFlexible but difficultFree
TCPDFFork of FPDFMaintainedPowerfulSlowerUTF-8 supportSVG support (beta)Flexible but difficultFree
PrinceXMLBest SVG supportEasy to use (HTML and CSS)ExpensiveSupported
OthersZend PDFwkhtmltopdfPDFLibDomPDFHTML2PDF
Code Example/Demo
Upcoming SlideShare
Loading in …5
×

Charts, PDFs, and PHP

4,439 views

Published on

Presented by Jacob Terry at the June 2011 meeting of Atlanta PHP.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,439
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • The issue with all of these was resolution - they all generate 72 DPI images that don&amp;#x2019;t print well. In addition they didn&amp;#x2019;t have interactivity and the look of the charts themselves was generally a step below.\n\n\n\n\n
  • Flexible but a little complex.\n\nTried some &amp;#x201C;make it too large then scale it down&amp;#x201D; options, but that didn&amp;#x2019;t work well - fonts too small, spacing issues, etc. \n\nCan be ugly or can be nice depending on how much time you&amp;#x2019;re willing to put in.\n\nSSL issues\n\nGoogle could turn it off - see Google Translate\n
  • PHP-based solution\n\nkind of ugly\n
  • Just came out with a version 2.\n\nQuite good.\n\nLots of nice computation functions.\n
  • The issues here are first, they&amp;#x2019;re Flash, and I don&amp;#x2019;t want to work with Flash (doesn&amp;#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
  • 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
  • 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
  • v3 is implementing a SVG-based JavaScript solution - based on HighCharts!\n
  • 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
  • JavaScript-based solution in beta\n\nVideo on their website of it running on an iPad\n\n\n
  • Google Charts - not local, 72 DPI, no option for different resolution. Flexible but a little complex. Tried some &amp;#x201C;make it too large then scale it down&amp;#x201D; options, but that didn&amp;#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
  • Requires jQuery\n\nRequires excanvas\n\nWe tried this, and even looked at doing canvas to SVG conversions\n
  • \n\n\n\n
  • Really beautiful\n\nDoes not require jQuery\n\nIn development - missing a lot of functionality\n\nFree\n
  • 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
  • More of a build-your-own\n\nFree\n\njQuery Required\n\nNot graph-focused\n
  • \n
  • \n
  • Came out with SVG-beta right when we needed this\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Some other PDF libraries (like HTML2PDF) are based on TCPDF\n
  • \n
  • Zend PDF doesn&amp;#x2019;t support SVG\nwkhtmltopdf has PHP bindings but they are complex to implement\n\n
  • \n
  • Charts, PDFs, and PHP

    1. 1. Charting aCourse throughPDFs and PHP
    2. 2. About MeWorkingBuildings, LLCIn-house DeveloperWorked with PHP since 2005jsterry@gmail.com@jerkob
    3. 3. The ProblemGet a chart that looksthe same on the weband in a PDF.
    4. 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. 5. Image-based ChartsGenerate 72 DPI ImagesNo interactivityReliableServer-sideWeak aesthetics
    6. 6. Google Charts
    7. 7. JpGraph
    8. 8. pChart
    9. 9. Flash-based ChartsIt’s FlashiOS/Android compatibilityGenerate images client-side72 DPI resolutionAnimationGood aesthetics
    10. 10. Swiff ChartGenerator
    11. 11. Maani
    12. 12. Fusion
    13. 13. amCharts
    14. 14. AnyChart
    15. 15. Canvas-based Charts JavaScript Requires excanvas for IE < 9 Not a very portable format Probably on the way out
    16. 16. jqPlot
    17. 17. SVG-based ChartsWorks in all browsers (VML for IE)Works without Flash (iOS)JavaScriptAnimationInteractivityVector-based
    18. 18. Raphael/gRaphael
    19. 19. HighCharts
    20. 20. jQuery SVG
    21. 21. Also...amChartsFusionAnyChart
    22. 22. False StartsGoogle ChartsjqPlot (Canvas to SVG)
    23. 23. So What Did We Use?
    24. 24. So What Did We Use?
    25. 25. Back to the ProblemGet a chart that looksthe same on the weband in a PDF.
    26. 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. 27. What about PDFs?
    28. 28. PDF LibrariesFPDFTCPDFZend PDFPrinceXMLwkhtmltopdfHTML2PDFPDFLib
    29. 29. FPDFOldReliableNot UTF-8FastNo SVGFlexible but difficultFree
    30. 30. TCPDFFork of FPDFMaintainedPowerfulSlowerUTF-8 supportSVG support (beta)Flexible but difficultFree
    31. 31. PrinceXMLBest SVG supportEasy to use (HTML and CSS)ExpensiveSupported
    32. 32. OthersZend PDFwkhtmltopdfPDFLibDomPDFHTML2PDF
    33. 33. Code Example/Demo

    ×