How to insert Google Charts in Wordpress

How to insert Google Charts in WordPress

Inserting charts in WordPress posts or pages is not so easy it could be. There are indeed some plugins to simplify your life, but they are mostly not up to date or somewhat not satisfying:

  • ChartBoot for WordPress is the best solution to date, definitely worth trying and using, but is still limiting in some ways. Positive aspects for some users: no coding necessary.
  • WP Google Charts works with Google Spreadsheets, which is great per se, very convenient and great to manage and backup data. However it is limited as it only supports a narrow set of additional parameters.
  • Google Org Charts is limited in function and hasn’t been updated for a long time.

Insert javascript code to head, per page or post

If you’re looking for a solution to insert the Javasript code directly to the HTML header on a per post base, i.e. add the Google Chart Javascript code only to selected posts or pages, there is an easy solution.

The excellent plugin Per page add to head does exactly what it says, inserting any HTML, JS or css code directly inside the header of selected posts. Simply paste your Google Chart code in the plugin field at the bottom of every post/page:

Of course you still have to insert the div element with the correct div id:

<div id="barchart_material" style="width: auto; height: 400px;"></div>

Et voilà! Here is a random example, featuring the 6 largest banks in the world:

  • Now the jsapi and corechart libraries only load on chosen pages or posts.
  • Changing the chart code is really easy, just paste the new version from any extenal code editor.
  • The featured example is a “material design” chart. Obviously “traditional” charts also work with this method. It also can be used to insert D3 (which is to complicated for me), NVD3 or Charts.js graphics.
  • As one never knows what can happen when everything goes wrong, keep well-organized backups of your charts in plain text files!

Where is the code?

Here is the code of the “largest banks” chart, which is inserted to the HTML head by our plugin:

<script type="text/javascript" src=""></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Banks', 'Total assets (US$ billion)'],
    ['Industrial & Commercial Bank of China (ICBC)', 3181.88],
    ['HSBC Holdings', 2758.45],
    ['China Construction Bank Corporation', 2602.54],
    ['BNP Paribas', 2589.19],
    ['Mitsubishi UFJ Financial Group', 2508.84],
    ['JPMorgan Chase & Co', 2476.99]
  var options = {
    chart: {
      title: 'Largest banks in the world',
      subtitle: 'ranked by total assets',
    legend: { position: 'none' },
    bars: 'horizontal', // Required for Material Bar Charts.
    axes: {
      x: {
        0: { side: 'top', label: 'Total assets (US$ billion)'} // Top x-axis.
      y: {
      0: {side: 'right', label : ''}
  var chart = new google.charts.Bar(document.getElementById('barchart_material'));
  chart.draw(data, options);

Leave a Comment

Your email address will not be published. Required fields are marked *