Google Charts: How to use them in  WordPress

Video versionA video overview of Google charts in wpDataTables

Google chartsBasic information about the Google Charts rendering library

Google Charts is a free charts library from Google which renders attractive customizable charts that work on all platforms. You can create a table chart using the Google charts API that’s included in wpDataTables.

The wpDataTables plugin features a simple wizard that allows the insertion of the Google chart library in WordPress posts or pages.

The steps needed to create any chart and insert it in a WordPress post or page are explained in this documentation section. Here we will cover the Google Charts examples that are supported by wpDataTables plugin, and their features.

Google Column ChartVisualizing data with columns

Column chart is a basic chart where series are rendered in simple vertical columns:

 

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Histogram ChartVisualizing data in a Histogram

As Google explains: A histogram is a chart that groups numeric data into bins and displays the bins as segmented columns. They’re used to depict the distribution of a dataset: i.e., how often values fall into ranges:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Bar ChartVisualizing data with Bars

Bar chart shows series data in horizontal bars.

  • One string or date column supported (will be used for vertical axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Stacked Bar ChartVisualizing data with stacked bars

This chart type is similar to a basic bar chart, but the series values are “stacked” to the right of each other in the horizontal bars.

  • One string or date column supported (will be used for vertical axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Area ChartVisualizing data in coloured areas

An area chart is similar to a Line chart, but the area below a series line is colored:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Stepped Area ChartVisualizing data in stepped areas

A Stepped Area chart is very similar to the “typical” area chart, but the angles are straight:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Line ChartVisualizing data with plain lines

A Google Line Chart displays the series data in a line. In wpDataTables it is possible to smooth it out it, so it will like a function graph:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Pie ChartVisualizing data with Pie slices

The Pie Chart renders the data in a “sliced pie” format, where each slice stands for one series entry(left pie chart).If you turn on option 3D, your pie chart will be drawn as though it has three dimensions (right pie chart)

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns are a strict requirement.

Google Donut ChartVisualizing data with Donut slices

A Donut Chart is similar to Pie chart, but it has an empty inner part so its appearance is more that of a “sliced donut” instead of than a “sliced pie”:

  • One string or date column supported (will be used to name the slices)
  • Other columns should have numerical values.
  • 2 columns are a strict requirement.

Google Bubble ChartVisualizing data with Bubbles

As Google explains, “A bubble chart is used to visualize a data set with two to four dimensions. The first two dimensions are visualized as coordinates, the third as color, and the fourth as size”:

An example of a bubble chart is the correlation between life expectancy, fertility rate and population of several different countries.

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Google Scatter ChartVisualizing data in a Scatter plot

A Google Scatter chart plot points on a graph. When the user hovers over the points, tooltips provide more information:

  • One string or date column supported (will be used for horizontal axis)
  • Other columns should have numerical values.
  • A minimum of 2 columns is required.

Candlestick chart (NEW)Visualizing data with candles

Candlestick chart is a type of the financial chart that is used to visualize price movements and is often used for decision making in stock, trading and foreign exchange.

Each “candlestick” typically shows one day and represents all four important pieces of information for that day: open, high, low and close values. The filled part of the candlestick is called “the body” and the lines above and below this part represent the high/low range and are called “shadows”. If the body is longer that means that there is more pressure in buying or selling, and if it is short that means that there is a small price movement.

There are two types of candlesticks: 

  1. ‘White’ candlesticks show the behavior when the opening value is larger than the closing value (a loss),
  2. ‘Blue’ or filled candlesticks show the behavior when the opening value is less than the closing value (a gain).

As for the “shadows”, the upper shadow shows the difference between the high and the close value, and lower shadow shows the difference between the low and the open value.

 

  • One string or date column supported (will be used for vertical axis)
  • Other columns should have numerical values.
  • A minimum of 5 columns is required (4 numerical columns and one string or date column).

Waterfall chart (NEW)Visualizing data with waterfall

The Waterfall chart is used to show how the initial valute is affected by a series of positive and/or negative values. 

  • One string or date column supported (will be used for vertical axis)
  • Other columns should have numerical values.
  • A minimum of 5 columns is required (4 numerical columns and one string or date column).

Google Gauge ChartVisualizing data in a speedometer

Gauge charts are also known as dial charts or speedometer charts; they use needles to show information like you would read on a dial.

  • One string or date column supported (will be used to name the gauges)
  • Other columns should have numerical values.
  • 2 columns are strictly required.
  • It’s better not to have too many rows.