Google Charts: How to use them in  WordPress

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.

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.

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.

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.

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.

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.

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.

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.

• 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.

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.

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.

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 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).

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).

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.

• Creating charts in WordPress, using Chart Creation Wizard
• Editing charts
• HighCharts chart engine
• Chart.js chart engine
• Following table filtering in Charts (dynamic re-draw of charts based on table filtering)
• Grouping/summing up row data in charts