WordPress Charts and Graphs: How To Create Them With Visualizer Plugin
Articles Blog

WordPress Charts and Graphs: How To Create Them With Visualizer Plugin

August 30, 2019


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.

Only registered users can comment.

  1. Welcome and thank you for spending your precious time viewing the video content of this channel. Any questions you may have about this video are welcome in the comments below. Please like/share/subscribe!

  2. Helllo Robert, I am a wordpress administrator and when creating a line/bar graph i get the message [object object] not a valid hex color – the thing is it only happens with line graphs and bar charts… do you know what might have caused this problem? Thank you very much in advance

  3. Hello, i am getting a ´allow_url_fopen´ notification when i enter the Visualizaer Libary, any ideas how to do this?
    Thanks in advance,

  4. Is it possible to create custom filters when importing from posts? Say I want to filter posts by meta data or a custom attribute?

  5. How do you add a label for a data field. For example, if a value for a bar is $30, how do I show that on a bar graph?

Leave a Reply

Your email address will not be published. Required fields are marked *