Charts in wpDataTables can be created with a step-by-step chart creation wizard in WordPress admin. On each step you can go back to change the settings. In the “Formatting and preview” step you can see a live chart preview, so you can check if you’re satisfied with the look of the chart before saving it and inserting it to the WordPress post or page. You can see the current step in the upper part of the screen in the breadcrumbs.
When you choose the rendering engine, wpDataTables will show a list of possible chart types, which varies depending on the engine. You can find a full list of chart types with details for Google Charts in this documentation section, for Highcharts in this documentation section and for Chart.js in this documentation section.
For this example we will use Highcharts area chart. After you choose the chart click Next to go to the next step.
On the “Data source” step you would need to define the table that will be used as the data source for the new chart. This is done with a simple selectbox.
On the “Data range” step you would need to provide the data range for the future chart. This consists of several blocks. The fist block is the Column range picker.
In the column range picker you can select the table columns that will be used in the future chart. In the left container you can see a list of all the columns that the table has, with their names and data types. The items of this list can be clicked to be selected; also there are “Select all” and “Deselect all” shortcuts above them. The right container represents the list of columns that will be used in the chart. The items in this list can be drag&dropped for reordering. Between the two containers there are Add all, Add selected, Remove selected, Remove all buttons, that allow adding the columns to the chart and removing them. The right container also shows hints if incorrect amount or types of columns for the chosen chart type was selected (e.g. it shows that there are not enough columns added for the selected chart type).
Next block is the Row range picker block:
wpDataTables allows you to choose not only the columns that will be used in the chart in the WordPress front-end, but also the rows. By default it is set to “All rows“, but you can choose the individual rows or row ranges as well. For this choose “Pick range” in the dropdown, then click on the “Range picker…” button that appears.
When you click on “Range picker…” button row range picker popup will appear.
Range picker shows the data of your table, and you can select the cells that you would like to use in the chart there.
There are 2 options how you can pick a range:
- Click&drag (Excel-like): click on a cell that you want to set as a range start, and move your mouse (e.g. diagonally) to the cell that you want to set as the range end. It will also override the columns you chose in the column range picker if the column set will be different.
- Use checkboxes above columns and to the left of rows. All rows and columns which have checkboxes checked will for the range. Column range can be overridden with this option as well.
When you’re done, click “OK“, and the range will be saved (see the hint below the dropdown which will show the number of selected rows).
The last option on this step is the “Follow table filtering” checkbox. It is available only if you choose to use “All rows” in “Row range” selectbox. It is explained in a separate documentation section, you can see it here.
When the data range is chosen, you can click Next to go forward. Next step is “Formatting and preview“. Changes that are made on chart are instantly visible on the chart that is rendered on the right side of the screen. Formatting step is divided in categories that represents different chart elements.
In the first category you can change basic chart options like:
- Chart width – The width of the chart
- Chart height – The height of the chart.
- Responsive width – If you tick this chart width will always adjust to 100% width of the container
- Group chart – If you tick this checkbox, the values of the rows with same label will be summed up and rendered as a single series. If you leave it unticked all rows will be rendered as separate series. It is explained in a separate documentation section, you can see it here
- Background color – The background color for the tooltip
- Border width – The pixel width of the outer chart border
- Border color – The color of the outer chart border
- Border radius – The corner radius of the outer chart border
- Zoom type (Highcharts only) – Decides in what dimensions the user can zoom by dragging the mouse
- Panning (Highcharts only) – Allow panning in a chart. Best used with panKey to combine zooming and panning
- Pan key (Highcharts only) – Allows setting a key to switch between zooming and panning
- Plot background color – The background color or gradient for the plot area
- Plot background image (Highcharts only) – The URL for an image to use as the plot background
- Plot border width – The pixel width of the plot area border.
- Plot border color – The color of the inner chart or plot area border
- Font size (Chart.js and Google Charts only) – The default font size, in pixels, of all text in the chart
- Font name (Chart.js and Google Charts only)- The default font face for all text in the chart
In the “Series” category you can customize actual series options for series that are used in the chart:
- Curve type (Google Line Chart only, Chart.js Line and Area)
- 3D (Google Pie Chart only) – If true, displays a three-dimensional chart
“Axes” section is intended for chart axes options. The X(H) axis or category axis and the Y(V) axis or value axis. Options that are available for axes are:
- Grid line style (Highcharts only) – The dash or dot style of the grid lines
- Horizontal axis label – Name of the horizontal axis
- Horizontal crosshair (Highcharts and Google Charts only)- Configure a horizontal crosshair that follows either the mouse pointer or the hovered point lines
- Horizontal axis direction (Google Charts only)
– The direction in which the values along the horizontal axis grow. Specify -1 to reverse the order of the value
- Vertical axis label – Name of the vertical axis
- Vertical crosshair – Configure a vertical crosshair that follows either the mouse pointer or the hovered point lines
- Vertical axis direction (Google Charts only) – The direction in which the values along the vertical axis grow. Specify -1 to reverse the order of the values
- Vertical axis min value – The minimum value of the axis
- Vertical axis max value – The maximum value of the axis
- Invert – Whether to invert the axes so that the x axis is vertical and y axis is horizontal
The chart’s main title options:
- Show/Hide Chart title
- Title floating (Highcharts and Google Charts only)- When the title is floating, the plot area will not move to make space for it
- Title align (Highcharts only) – The horizontal alignment of the title
- Subtitle (Highcharts only) – The chart’s subtitle
- Subtitle align (Highcharts only) – The horizontal alignment of the subtitle
Options for the tooltip that appears when the user hovers over a series or point:
- Enable/Disable Tooltip
- Background color (Highcharts and Chart.js only) – The background color for the tooltip
- Border width (Highcharts only) – The pixel width of the tooltip border
- Border color (Highcharts only) – The color of the tooltip border
- Border radius (Highcharts and Chart.js only) – The radius of the rounded border corners
- Shared tooltip (Highcharts and Chart.js only) – When the tooltip is shared, the entire plot area will capture mouse movement or touch events
- Value prefix (Highcharts only) – A string to prepend to each series’ y value
- Value suffix (Highcharts only) – A string to append to each series’ y value
The legend is a box containing a symbol and name for each series item or point item in the chart:
- Enable/Disable Legend (Highcharts and Chart.js only)
- Background color (Highcharts only) – The background color of the legend
- Title (Highcharts only) – A title to be added on top of the legend
- Layout (Highcharts only) – The layout of the legend items
- Align – The horizontal alignment of the legend box within the chart area
- Vertical align – The vertical alignment of the legend box
- Border width (Highcharts only) – The width of the drawn border around the legend
- Border color (Highcharts only) – The color of the drawn border around the legend
- Border radius (Highcharts only) – The border corner radius of the legend
- Legend position – Position of the legend. Possible values are ‘top’, ‘left’, ‘bottom’ and ‘right’
“Exporting” category is responsible for exporting module that allows your users to download the chart as PDF, PNG, JPG or SVG vector images (Highcharts only):
- Enable/Disable Exporting
- Data labels – Add data labels to improve readability of the exported chart
- File name – The filename, without extension, to use for the exported chart
- Width – The width of the original chart when exported
- Button align – Alignment for the export button
- Button vertical align – The vertical alignment of the export button
- Button color – The color of the symbol’s stroke or line
- Button text – A text string to add to the individual button
Credits label in the lower right corner of the chart
- Enable/Disable Credits
- Credits href – The URL for the credits label
- Credits text – The text for the credits label
You can play around with the settings, and click Next to see the chart preview. If you’re not satisfied you can always go back and change these settings:
When you’re satisfied with the preview, click Next again so that your chart would be saved in WordPress database, and a shortcode would be generated for you. You can click on shortcode button and it will be directly saved to your clipboard.
To insert the chart in the WordPress post or page you have 2 options:
1. Copy the generated shortcode and insert it in your post or page where you need it.
2. Go to your post or page, place the cursor in the position where you would like to insert your chart, find the wpDataChart button.
Then just choose the chart that you’ve just created in the dropdown, and the shortcode will be inserted automatically.
See chart that we created in this tutorial live: