Hi, guys.
Robert here from ThemeIsle.com and I welcome
you to our channel!
Today, I am gonna show you how to create graphs
like this one, using Charts Visualizer plugin
for WordPress, and how to integrate them into
your site content.
After you install and activate the plugin
head to Media/Visualizer Library.
Here are nine types of graphs and charts you
can build plus three more available in the
premium version of the plugin.
Pie, Line, Area, Geo, Bar, Column, Gauge,
Scatter, Candlestick then Table, Timeline,
and Combo for premium users.
Click on Add New above then choose your preferred
chart type on the next screen then click next.
For this tutorial, I will choose the Scatter
chart.
Here's the preview along with all necessary
settings in the right sidebar.
You can choose to import data from a file,
URL or from other charts as well.
If you are unsure about how to format your
data then please take a look at this sample.
You can edit this file with your own data
and insert more info as well.
Re-upload the file here then click to Import
data.
You can see the changes instantly in the preview.
Next, access the Advanced Settings to set
a Title for your chart, choose Font Family
and Size, set Legend Position and Alignment
along with the Font Color then choose some
Tooltip settings.
The Horizontal Axis Settings consist of 6
options you can set as you wish.
The Axis Title is what you see in the footer
of your chart.
Change the Text Position and you can see the
numbers on the left side of your chart moving
when you toggle through options.
Set direction in wich the values along the
horizontal axis grow using these options from
the drop-down list then set
Base Line Color and Axis Text Color for the
best visual experience.
The final step here is where you can enter
custom format pattern to apply to horizontal
axis labels using the information below.
Next is to set the Grid Lines count and choose
a color for them.
You can set some Minor Grid Lines as well
to make the chart more accurate, and for the
final horizontal axis settings, you can choose
the Maximum Value and the Minimum Value for
the viewing window.
Use the same instruction created for horizontal
axis settings to set Vertical Axis as well
then move to line settings.
Set the Line Width and Point Size here then
choose a Curve Type from the drop-down below.
The Selection Mode will determine how many
data points a user can select in chart and
Aggregation Target will determine how multiple
data selections are rolled up into tooltips.
To make it work you need to set multiple selection
mode and tooltip trigger to display it when
a user selects an element.
The Point Opacity is something you can set
from 0.0 as fully transparent to 1.0 as completely
opaque, here.
Click on Save Chart and then you will be able
to set visibility, line width, point size,
number format, curve type, and color as well
for all series including your custom one.
The last advanced settings for a chart are
Layout and Chart Area.
In the Layout section, you can configure the
total size of the chart.
Two formats are supported: a number, or a
number followed by %. A simple number is a
value in pixels; a number followed by % is
a percentage.
Continue configuring the background color
for the main area of the chart then the chart
border width and color.
Planning to display it with transparent background?
Tick this!
For the Chart Area, you can Configure the
placement and size of the chart area (where
the chart itself is drawn, excluding axis
and legends).
Two formats are supported here as well.
Now that we are finished all the settings
for this chart let's integrate it into a page.
Click Save Chart then copy the shortcode generated
in the bottom left corner for that particular
chart.
Create a new page named report for example
and paste the shortcode in the text editor.
Let's see it in action now!
It works perfectly and has good integration
with the page layout, whether it is displayed
in full width or on a default page with sidebar.
To edit a chart, head back to Media/Visualizer
Library then click on the Edit icon below
the one you wish to edit information for.
Notice that you can add more useful graphics
to your actual chart by choosing the Line
or Area type for example then click next and
edit settings as needed.
You can use the instructions in this video
to create any of the charts available with
this plugin and if you need me to create a
tutorial for one of them, let me know in the
comments below this video.
