{"id":876,"date":"2014-03-17T19:11:04","date_gmt":"2014-03-17T18:11:04","guid":{"rendered":"http:\/\/codingexplained.com\/?p=876"},"modified":"2017-06-11T21:56:14","modified_gmt":"2017-06-11T19:56:14","slug":"using-google-visualization-with-wkhtmltopdf","status":"publish","type":"post","link":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf","title":{"rendered":"Using Google Visualization with wkhtmltopdf"},"content":{"rendered":"<p>The <a href=\"http:\/\/wkhtmltopdf.org\/\" title=\"wkhtmltopdf website\" target=\"_blank\">wkhtmltopdf tool<\/a>, which converts HTML markup to a PDF document, is quite powerful compared to most other solutions that I have come across. It uses the WebKit rendering engine, which powers many Mac OS X applications such as Safari &#8211; and previously Google Chrome. If you have attempted to make wkhtmltopdf work with the Google Visualization API, you quickly noticed that it is unfortunately not as easy as one might think. While the wkhtmltopdf tool does execute JavaScript, rendering graphs (or visualizations) with Google Visualization API does not work out of the box. This article shows you how to easily get it working.<\/p>\n<p>After searching and searching, and trying many different things, I finally got it to work by improvising and hacking away. I am using the Linux 64-bit binary version 0.12.0 available at <a href=\"http:\/\/wkhtmltopdf.org\/downloads.html\" title=\"Download wkhtmltopdf\" rel=\"external nofollow\" target=\"_blank\">wkhtmltopdf downloads page<\/a> on an Ubuntu server. Please note that this article does not cover how to install wkhtmltopdf.<\/p>\n<p>First, you need to use the <span class=\"code\">javascript-delay<\/span> argument, which allows you to delay the execution of JavaScript code for a given number of milliseconds. In my code, I have set it to <span class=\"code\">1000<\/span>, and so far I have not had any problems. You could probably set it lower if you need the PDF to be rendered quickly.<\/p>\n<p>That is the only argument you have to change. Below follows my template file used for generating the charts.<\/p>\n<pre><code class=\"html\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot; \/&gt;\r\n        &lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/www.google.com\/jsapi&quot;&gt;&lt;\/script&gt;\r\n\r\n        &lt;script type=&quot;text\/javascript&quot;&gt;\r\n            function init() {\r\n                google.load(&quot;visualization&quot;, &quot;1.1&quot;, { packages:[&quot;corechart&quot;], callback: &#039;drawCharts&#039; });\r\n            }\r\n\r\n            function drawCharts() {\r\n                drawAccountImpressions(&#039;chart-account-impressions&#039;);\r\n            }\r\n            \r\n            function drawAccountImpressions(containerId) {\r\n            \tvar data = google.visualization.arrayToDataTable([\r\n                    [&#039;Day&#039;, &#039;This month&#039;, &#039;Last month&#039;],\r\n                    [&#039;01&#039;, 1000, 400],\r\n                    [&#039;05&#039;, 800, 700],\r\n                    [&#039;09&#039;, 1000, 700],\r\n                    [&#039;13&#039;, 1000, 400],\r\n                    [&#039;17&#039;, 660, 550],\r\n                    [&#039;21&#039;, 660, 500],\r\n                    [&#039;23&#039;, 750, 700],\r\n                    [&#039;27&#039;, 800, 900]\r\n                ]);\r\n\r\n                var options = {\r\n                    width: 700,\r\n                    height: 400,\r\n                    hAxis: { title: &#039;Day&#039;,  titleTextStyle: { color: &#039;#333&#039; } },\r\n                    vAxis: { minValue: 0 },\r\n                    curveType: &#039;function&#039;,\r\n                    chartArea: {\r\n                        top: 30,\r\n                        left: 50,\r\n                        height: &#039;70%&#039;,\r\n                        width: &#039;100%&#039;\r\n                    },\r\n                    legend: &#039;bottom&#039;\r\n                };\r\n\r\n                var chart = new google.visualization.LineChart(document.getElementById(containerId));\r\n                chart.draw(data, options);\r\n            }\r\n        &lt;\/script&gt;\r\n    &lt;\/head&gt;\r\n    \r\n    &lt;body onload=&quot;init()&quot;&gt;\r\n    \t&lt;div id=&quot;chart-account-impressions&quot;&gt;&lt;\/div&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>There are few things to notice here. First of all, notice the <span class=\"code\">onload<\/span> attribute on the <span class=\"code\">body<\/span> tag. This is what triggers our chain of JavaScript function calls. In the <span class=\"code\">init<\/span> function, I am loading the Google Visualization API as one typically would, except that I am passing in the name of a function, which will be used as a callback when the API is loaded. I found this to be necessary in order for Google Visualization to work with wkhtmltopdf.<\/p>\n<p>When the library is ready, the <span class=\"code\">drawCharts<\/span> function is invoked. This is simply a function that I made because for my own use case, I need to draw several different charts. So all this function does is call other functions that each draw a chart. You could just as well draw your chart directly in the <span class=\"code\">drawCharts<\/span> function if you prefer; in other words, you are free to choose how to go about it.<\/p>\n<p>The <span class=\"code\">drawAccountImpressions<\/span> function is just an example of how to create a line chart. There is nothing in this function that is special for wkhtmltopdf, so you can use the code examples from the <a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\" title=\"Google Charts reference\" rel=\"external nofollow\" target=\"_blank\">Google Visualization API<\/a>.<\/p>\n<p>All there is left to do is to invoke wkhtmltopdf to generate your PDF, be it on the command line or through a wrapper library such as <a href=\"https:\/\/github.com\/KnpLabs\/snappy\" title=\"PHP wrapper for wkhtmltopdf and wkhtmltoimage\" rel=\"external nofollow\" target=\"_blank\">Snappy<\/a> for PHP.<\/p>\n<p>I hope this article has helped you save you the hours of searching and experimenting that I went through to figure out a solution. I wish you the best of luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The wkhtmltopdf tool, which converts HTML markup to a PDF document, is quite powerful compared to most other solutions that I have come across. It uses the WebKit rendering engine, which powers many Mac OS X applications such as Safari \u2013 and previously Google Chrome. This article shows you how to make the Google Visualization API work with the wkhtmltopdf tool.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6],"tags":[92,91,40,90],"series":[],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Google Visualization with wkhtmltopdf<\/title>\n<meta name=\"description\" content=\"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Google Visualization with wkhtmltopdf\" \/>\n<meta property=\"og:description\" content=\"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf\" \/>\n<meta property=\"og:site_name\" content=\"Coding Explained\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codingexplained\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-17T18:11:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-11T19:56:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bo Andersen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:site\" content=\"@codingexplained\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bo Andersen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf\",\"url\":\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf\",\"name\":\"Using Google Visualization with wkhtmltopdf\",\"isPartOf\":{\"@id\":\"https:\/\/codingexplained.com\/#website\"},\"datePublished\":\"2014-03-17T18:11:04+00:00\",\"dateModified\":\"2017-06-11T19:56:14+00:00\",\"author\":{\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\"},\"description\":\"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.\",\"breadcrumb\":{\"@id\":\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codingexplained.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Google Visualization with wkhtmltopdf\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingexplained.com\/#website\",\"url\":\"https:\/\/codingexplained.com\/\",\"name\":\"Coding Explained\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingexplained.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d\",\"name\":\"Bo Andersen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingexplained.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g\",\"caption\":\"Bo Andersen\"},\"description\":\"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!\",\"sameAs\":[\"https:\/\/codingexplained.com\",\"https:\/\/www.facebook.com\/codingexplained\",\"https:\/\/www.linkedin.com\/in\/ba0708\",\"https:\/\/twitter.com\/codingexplained\",\"https:\/\/www.youtube.com\/c\/codingexplained\"],\"url\":\"https:\/\/codingexplained.com\/author\/andy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Google Visualization with wkhtmltopdf","description":"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf","og_locale":"en_US","og_type":"article","og_title":"Using Google Visualization with wkhtmltopdf","og_description":"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.","og_url":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf","og_site_name":"Coding Explained","article_publisher":"https:\/\/www.facebook.com\/codingexplained","article_author":"https:\/\/www.facebook.com\/codingexplained","article_published_time":"2014-03-17T18:11:04+00:00","article_modified_time":"2017-06-11T19:56:14+00:00","og_image":[{"width":1200,"height":444,"url":"https:\/\/codingexplained.com\/wp-content\/uploads\/2015\/11\/codingexplained-fb-promote.png","type":"image\/png"}],"author":"Bo Andersen","twitter_card":"summary_large_image","twitter_creator":"@codingexplained","twitter_site":"@codingexplained","twitter_misc":{"Written by":"Bo Andersen","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf","url":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf","name":"Using Google Visualization with wkhtmltopdf","isPartOf":{"@id":"https:\/\/codingexplained.com\/#website"},"datePublished":"2014-03-17T18:11:04+00:00","dateModified":"2017-06-11T19:56:14+00:00","author":{"@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d"},"description":"Getting Google Visualization to work with wkhtmltopdf is tricky, but this article shows you how to do it.","breadcrumb":{"@id":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codingexplained.com\/coding\/php\/using-google-visualization-with-wkhtmltopdf#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingexplained.com\/"},{"@type":"ListItem","position":2,"name":"Using Google Visualization with wkhtmltopdf"}]},{"@type":"WebSite","@id":"https:\/\/codingexplained.com\/#website","url":"https:\/\/codingexplained.com\/","name":"Coding Explained","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingexplained.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/e19c92ec991f571605f047cefeaa950d","name":"Bo Andersen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingexplained.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f5826f9d5d544b0c5e1ec321dfdfb8?s=96&d=mm&r=g","caption":"Bo Andersen"},"description":"I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!","sameAs":["https:\/\/codingexplained.com","https:\/\/www.facebook.com\/codingexplained","https:\/\/www.linkedin.com\/in\/ba0708","https:\/\/twitter.com\/codingexplained","https:\/\/www.youtube.com\/c\/codingexplained"],"url":"https:\/\/codingexplained.com\/author\/andy"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3mJkW-e8","_links":{"self":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/876"}],"collection":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/comments?post=876"}],"version-history":[{"count":7,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/876\/revisions"}],"predecessor-version":[{"id":3013,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/posts\/876\/revisions\/3013"}],"wp:attachment":[{"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/media?parent=876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/categories?post=876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/tags?post=876"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/codingexplained.com\/wp-json\/wp\/v2\/series?post=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}