Jun 112014
 
Article WordPress

Pie charts, line graphs, bar graphs are often the best way to visualize the information kept in a set of numerical data. This post explains how to insert and maintain in a WordPress blog post or page this kind of graphical representation of the data.

From the many available sofware libraries that implement the functionality for the generation of graphs and charts, the javascript library “charts.js” from Google is maybe one of the most well known.

Specifically for WordPress, there are also a fair amount of plugins for the generation of graphs and charts. Among them, “Visualizer” is one of the most popular. Visualizer uses the Google Visualization API.

Installing Visualizer

Visualizer from Maxpixels can be installed as any other Worpress plugin: Go to  “Dashboard > Plugins > Add New”, and enter “Visualizer” in the search box. In our sandbox wordpress installation, we have installed version 1.4.2.3. Once the installation is done, activate the plugin.

Preparation of the data to be visualized

The data that we want to display in the graph  must be available in a CSV (Comma Separated Values) file, with the following content:

  • The first line will have the field (column) names
  • The second line specifies the datatype of each of the fields
  • Starting at the third line, there is a record of data per line. The values are optionally enclosed in double quotes.

Example. A file named “data.csv” with the following content will be used in the rest of the examples in this post:

The available data types that can be specified in the second line are:

  • string – Text string
  • number – Number, either integer or decimal
  • boolean – “true” or “false”
  • date – Date. Although it is possible to used several date format, it is recommended to use YYYY/MM/DD, to avoid issues that happen in some browsers with other formats.
  • datetime – Date and Time, i.e., “2014/02/22 11:26”
  • timeofday – Time, i.e. “11:26”

Inserting a graph in the post

To add a graph or chart in the post content, edit the post with the wordpress edito, put the cursor where the graph is to be placed, and click on the “Add Media” button at the top.

In the popup window that appears, select “Visualizations” in the left menu.

insert-chart

 

 

next, click on the “Create New” tab at the top:

chart-types

 

 

Choose the desired type of graph from the nine types presented, and click on the “Next” button at the bottom right. The next screen displayed allows to choose the source of the CSV file with the data to be uploaded and displayed, either “From Computer”, or “From Web”:

upload-csv-en

 

In our case, we choose “From Computer” and select the “data.csv” file previously prepared. Once the data is uploaded, the screen shows a preview of the resulting graph. The menu to the right can be used to customize many aspects of the graph: Title, legend, colours, size, etc…

configure-chart

 

Once we are satisfied with the final result, click on “Insert Chart” at the bottom right, and verify that a shortcode “visualizer” has been inserted in the page or post that was being edited:

After the post has been saved, select “View Post” to have a look at the final result, where the graph appears inserted in it:

[visualizer id=”1667″]

 Posted by at 9:48 am

 Leave a Reply

(required)

(required)