skip to main content

CSV to Geochart – Google Visualization Chart WordPress Tutorial

0

In this tutorial we will parse a CSV file, containing random countries, with their own colour and tooltips displaying both the country and it’s continent. The CSV file will be converted to JSON dynamically and added to a Google Visualization Geochart in your WordPress Blog.

Geochart from CSV Tutorial

Image provided by Shutterstock

Prerequisites

Access to your WordPress theme folder. Knowledge of PHP, JavaScript and WordPress functions is useful but not required. The CSV file can either be self hosted or from Google Drive providing that you publish the file as a CSV and that you place it in a shared folder.

Download

Download

Example

The demo CSV file can be accessed from Google Drive. The final outcome of the Geochart will look like this.

Geochart Finished Look

Let’s get Started

In the Download, among the source files, there is an example of the CSV file which we will use to create our geochart. Upload the js and data folders to your WordPress theme folder. If using a Child Theme upload to that folder and not the parent.

Ajax in the Head

Before we start to enable our ajax event to fire when non-admin users look at the page. Open up header.php and check to see if ajaxurl is defined. If not add the following just above the wp_head() function.

Add the Chart Container to the Blog Post/Page

Enqueue The JavaScript and Hook in our Ajax Actions

To add the JavaScript to our WordPress blog we need to officially enqueue our scripts so that they are present for the chart to load. Open up functions.php and add the following and save but don’t close. Please note that if you are not using a child theme change all instances of get_stylesheet_directory_uri() with get_template_directory_uri()

The Google Visualization library is quite heavy and unnecessary to load on every page or post. Simply un-comment Lines 5 & 9 to only load the JavaScript on a specific page, replacing page_name with the Page ID, Page Title or Page Slug. If you are displaying your chart in a blog post replace is_page() with is_single() See is_page() and is_single() on the WP Codex for further details.

Fetch the CSV Data

Whilst functions.php is still open we are now going to add the code snippets to fetch the data from the CSV file either in the data folder or directly from Google Drive.

Lines 19-20 – Requests the CSV file from the URL variable that is specified. If the file is on the server then the CSV file should be a relative link and if using Google Drive the URL will be absolute.

Line 23 – This parses the CSV file as a string and maps it to an array.

Line 26 – Counts how many rows are in the array.

Line 29 – Strips the first row as headers to be used as keys in the array (Lines-32-34).

Lines 36-40 – Creates an id array with the total count. These are used to map the colours to the right country in the JavaScript.

Lines 43-45 – This combines the rest of the data with the labels.

Lines 46-49 – Merge both arrays together to create 1 associative array.

Line 51 – Converts and returns the JSON when the JavaScript executes the Build Map Ajax function (Lines-58-62).

Chart-map.js JavaScript

The JavaScript files pulls everything together and options can be changed to suit your own preferences.

Line 16 – This is the start of the Ajax Request to build map in functions.php. As it returns the dataType JSON there is no need to decode it.

Line 22 – Once the Ajax request is complete we start to build the chart.

Lines 24-29 – Creates the Columns to hold our rows

Lines 32-42 – Using jQuery’s each function we add the rows to match the columns. Line 40 represents the colours from the CSV file to be used to colour the individual countries dynamically in the options.

Line 43 – Counts how many colours, there are, which is added to max value in options. This ensures that each country has a corresponding colour.

Conclusion

I hope that you have enjoyed this tutorial. If you come across any errors or have any suggestions how to improve it further then please don’t hesitate to get in touch.

Sources