How to Embed a Chart on a Website Easily With wpDataTables

How to Embed a Chart on a Website Easily With wpDataTables

Charts and tables are a great way to display information in a concise and easy-to-understand manner. Unfortunately, the traditional method of inserting a chart into a website is to write lines of code. But what about those who do not know how to code?

The most convenient way to embed a chart on a website is with a plugin. wpDataTables is a plugin that helps users create, manage, and display interactive charts and tables.

wpDataTables is a user-friendly and flexible plugin. It makes it easy to import data from external sources, style tables according to your needs, and embed a chart anywhere on the website. And users can do all this without any coding knowledge.

This article will discuss the wpDataTables plugin in detail and explain how to embed a chart on a website.

This article will show how to embed a chart on a website with the help of wpDataTables.

First things, first: let’s look at wpDataTables

There’s a good reason why wpDataTables is the #1 WordPress plugin for creating responsive tables and charts.

An actual example of wpDataTables in the wild

And it’s really easy to do something like this:

  1. You provide the table data
  2. Configure and customize it
  3. Publish it in a post or page

And it’s not just pretty, but also practical. You can make large tables with up to millions of rows, or you can use advanced filters and search, or you can go wild and make it editable.

“Yeah, but I just like Excel too much and there’s nothing like that on websites”. Yeah, there is. You can use conditional formatting like in Excel or Google Sheets.

Did I tell you you can create charts too with your data? And that’s only a small part. There are lots of other features for you.

Steps for Embedding Charts and Tables

Step 1: Define the basic settings for the chart

To open the wizard, go to the WordPress admin panel and click on the wpDataTables plugin. Click on Create Chart Wizard.

The Chart Creation Wizard tool only asks for necessary information. It just takes four steps to create and customize a chart and five steps to embed it.

The first step is to define the chart’s settings by naming it and choosing its type. Give the chart a unique name so that you can find it quicker among all your other charts later.

Next, select a render engine. You have a choice between three different render engines:

After you choose the render engine, select the chart type. The chart type options will be different depending on what render engine you choose.

Step 2: Choose the data source

Next, users need to choose the data they want to insert into the chart. This data comes from a data table that users have already created in wpDataTables. Select an existing data source from a simple select box.

If users have already created a data table, they can use it for their chart. If not, they need to create a data table first.

Click on the add a chart menu link, import data, and create a table. Now you can choose this table as your data source.

Step 3: Define the data range

After selecting the data source, the wizard takes you to the data range page. Here users can select column ranges, row ranges, and filter data if they want.

Column Range

The first section allows users to define the column range—the block on the left displays the columns from the data source table.

The block on the right displays the columns to be used in the chart. It also provides helpful tips, like the minimum and the maximum number of columns you are allowed according to the chart type you chose.

On the left side block, users can click on the names of the columns. Then they can press Add to select them to appear in the chart.  After adding the columns, they will appear in the right-side block.

Users can use the “all” or “none” shortcuts at the top of the box when selecting and deselecting. After selecting the columns, users can reorder them by dragging and dropping them in the right-side block.

Row Range

Next, users need to define the row range. The default setting shows all the rows, but users can choose individual rows and row ranges.

To select a row range, click on the drop-down menu. Select Pick Range, then click on the Range Picker button.

The wizard will show the table. Now users can click and drag to highlight the rows and columns they want. Or they can use the checkboxes at the beginning of each row and column to select the data range.

One last feature on this page is a Follow table filtering option. This option is only available to those who are using all the rows.

Step 4: Formatting and Previewing

Now users will be directed to the editing and previewing page. The chart is visible on the right side of the page, so users can instantly view the changes they make.

The formatting step is divided into categories according to different chart elements. Users can edit and customize everything from the font to the table size, color, and much more.

The first category allows users to change the chart’s appearance. Users can edit the width, background colors, panning, and more.

The second category is the series category, where users can change labels, the vertical axis, curve type, etc.

Next, the axes category gives options for the chart axes. You can choose the following options:

  • Gridline style
  • Horizontal axis label
  • Horizontal crosshair
  • Horizontal axis direction
  • Vertical axis label
  • Vertical crosshair
  • Vertical axis direction
  • Vertical axis min value
  • Vertical axis max value
  • Invert

The category after that gives design options for the chart’s title. Following that are tooltip options that appear when viewers hover over a point.

Users can also enable a legend, export the chart data, and include a credit line. There are dozens of individual settings that you can change to create a perfectly customized chart.

Step 5: Save the chart and get the shortcode

Those are the four steps it takes to create and customize a chart. The fifth step is to simply copy the shortcode and embed it into a website.

After formatting and previewing the chart, click next to save it. Highlight and copy the shortcode, and then paste it into any post or webpage.

Now you have an embedded chart.

Conclusion on using wpDataTables to embed a chart

One of the many advantages of wpDataTables is that users can import data from multiple external sources. They can configure a table, making it responsive and interactive with a few clicks of the mouse.

After that, embedding the chart into a website with a shortcode couldn’t be easier. An added bonus is that users can keep their tables even if they delete the plugin.

wpDataTables is an outstanding and efficient tool for embedding charts into websites. It is the perfect solution for those who do not have the technical ability to display and manage a chart online.

But it is also the perfect solution for those with that technical ability because, with this plugin, users can save time by embedding a chart in five simple steps.

If you enjoyed reading this article on embed a chart, you should check out this one on creating a Google Forms results graph.

We also wrote about a few related subjects like how to merge cells in HTML, how to create a survey table with wpDataTables and Forminatorhow to design a tablehow to create a heatmap table with wpDataTablesDataTables alternativesJavaScript table libraries, and WordPress pricing table plugins.

Up Next:

The Best WooCommerce Product Table Plugins You Can't Miss

The Best WooCommerce Product Table Plugins You Can't Miss