Please wait...

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 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:

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

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.

Do you have the best

essential plugins installed?
Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).

Thank you for subscribing!

Please check your inbox to download the WordPress goodies.