We are gonna make use of manual data for this video as the focus of this blog is on how to use Graphina – Data Visualization WordPress plugin but read ahead in more blogs we are also gonna see how to implement dynamic data so it is going to be a bit longer blog than usual.
Briefs about Graphina – Data Visualization WordPress Plugin!
Firstly, as we are on the elementor page what you will see on the left is all the widgets that Graphina – WordPress chart plugin is offering. Now going further make a page similar to it. As on the dashboard, all the first elements are seen starting with it first.
Firstly, we will create a section on the page and then search counter and drag it to the page section. And that’s how simply you can apply every chart, counter & data table simply with the drag & drop feature.
Then on the left side,a counter data option is available, and many more features will turn this raw data in a more appealing way. The first feature is Counter Layout in which we have 6 different layouts thatcan be changed from the Drop-down.
Now selecting Layout 2 which will match perfectly with the dashboard which we are making and below we have an option for “Data Type” ie. Manual & Dynamic. Now going further we have the option for “Has Chart” that enables and disables the chart in counter.
Seeing that we have the head option “Title” where you can add the name of the counter. Then we have the “restriction content access” but you can learn more about it in another blog, so we will learn further about “Counter Setting”.
To learn about counter setting in detail, you will be able to see where to start counting from. And then we will also have the option for “End At” and it will stop the counter at such value given. A feature of the prefix is also available and postfix also has an option for a separator which will add a symbol by which a symbol will appear.
Now as we have “content-based color” and once you have enabled it, multiple options will be there, and benefits of those features can be taken. Firstly enable “heading conditional color base” and “subheading conditional color base”
And then you can set the Min color value in a similar way, and in a similar way, the max color value can be set, and can also see the color changes here. And disabling the “heading conditional color base” the color selected will be disabled and in a similar way with “sub-heading color base”
Further going for the charts options as we have learned about the counter setting and see how these options work. Firstly we have “type” here we can change our graph to “Area”, “Line” or “column”
Here you can also set the height of the chart.
Everything related to charts can be done like you can stock of graph thinner or thicker like changing the value to 6 we can see the quite thicker stock than from “dash” we can add a dash to the graph by changing the value, changing the color of stock from here and then Moving forward in “curves” you can change it to straight and even to step line. Changing of the “Line Cap” is here which is the edge shape of the bash.
Now moving ahead about chart data. If there is no section to enter the data in chat then using charts would be acting just like a dummy.
Data is added to the title hereby, you can change the values.
Now further, we will go and talk about the styles. Multiple options in styles like Card style, counter styles, title style, and description style.
As looking for the first feature in the card is to get a border radius, which helps for the edges of our card circular.
Hard to understand here. I will give you an example of it.
Now try to change the value to 10 and you can see the changes. After you can see an alignment item it can change the alignment of the item. Then we have an option for border type from the drop-down.
Now look for an option for the background which will have two option
“Solid” & “gradient”. And we can set the color as per we prefer.
Now in the counter style
You can change the typography from the drop-down. you can set the size. Set the weight from this dropdown and much more. Then You can change the font color and you can change the margin and padding too.
Now going further with the mixed chart similar to this and that will cover most parts of all the charts and you can apply the same to the further charts too. You can add a new structure, search for a mixed chart and simply drag and drop at the section.
When the heading is enabled you can write the heading and similarly, you can add the description in this box when the description is turned on.
Then we have data options and restriction options which you can learn in the other specific blogs that we have posted then we have chart options
In the chart background color we can set the background color as we prefer. Then we have a similar option as we had in counters like
“Height” to increase and decrease the height.
A new option for the toolbar has been put up which is visible once you turn it on and all the options will pop in the toolbar which has options like Zoom in, Zoom Out, you can download SVG, PNG, and CSV.
From the Offset-Y You can change the position of the toolbox on the Y-axis. And similarly, can also be changed the offset X to move the toolbox on the Y-axis
Now In the label setting, you can enable or disable the labels
That can be seen with the labels in chat when we enable it & we can see tons of options where we can keep it for our utilization.
Graphina – Data Visualization WordPress Plugin has a tooltip that basically means when you hover over the graph it will show you the value like in the box and disabling it will be gone.
You can even set the theme to dark or light.
Then we have the “animation setting” here we can set the speed as In the same way, we can set the delay.
Further, we have the “drop shadow setting” by enabling it we will get multiple options. You can set the position from the top using this and left. And you can also add the opacity to that shadow Now we will enable the shadow as we don’t need shadow for this task.
Then we “Plot option setting” for the column graphand we have “start shape” changing it to rounded and you will see some changes. And similarly for the End Shape. And we can position the label inside the graph like we are changing it to center, This is at the bottom and on top,
the next option is “Line Cap” and that is the same as we saw in counters so Then we have the option of categories and changing the data here will affect the X-axis. Going ahead we have legend setting
Enabling it we can see the legend and we can position it using these buttons. We can even set an alignment. We have an “X-axis setting” with multiple options.
As the name says, enabling the “pointer line” will turn on the pointer line using labels we can hide and unhide labels on the X-axis. We can also set its positions with an auto-rotate label and going deeper we can set how much rotation we want to give. Again we have the option to set offset.
And further, we get the option of prefix and postfix too.
We have the same set of options for the Y-axis and we will learn about “Elements settings”
Here it is divided into 3 different elements
We will first learn about “element 1” and also we can change the type to “column”, “line” or “area” For example like changing it to the area right now and you will see the changes.
Then in “fill setting”, we can change the color, gradient, or pattern and you can also set the opacity of the setting.
Further in gradient, You can also set the value of “From Opacity” to “to opacity” with an option to “inverse color”
And we have a similar option for element 2 & element 3 as well. As you are the one with great catchup so I do not repeat the same thing if you got any other questions then I guess you read the above parts.
Now we have the section of “element 1”“element 2” and “element 3”
As we have learned about element 1 and we can set the title and then after you can alter the values down inboxes and you are allowed to add another new element.
In a similar way, we can make changes in elements 2 and 3.
Then the style section is the same as the counters so I will quickie make the changes and we will see the result
Now to learn about the customization, lookout for the basic table format. With it, we will select the structure, search the data tableand drag the widget to the structure. So firstly you will have the data options and opening that we have an option of show card we have the option to choose dynamic data type or manual.
Now you will have the option of Number of rows and you can add or remove rows. In the same way, we can do with columns.
After that, you will be spot on to view restrictions. There you will have the option for header it will be enabled by default and disabling it will remove the header
Then you will have the last option of Table option
The first option is for responsive that will make the table responsive
And down the option for search and enable it. An option of search box where a search of the data in the table can be done.
Then In style, we can change the card as it has the same setting as in counter too. Now adding some data and you can directly add data in the table and that comes very handy while using the data table.
This is the complete dashboard as I promised at the beginning of the blog.
I know it was a bit mentally tiring for reading this whole blog but I promise you it was all worth it when you will do all this process while theBest Data visualization WordPress Plugin – Graphina is in your hands.
When you customize it with yourself and then you will see the more good flaws in it.
Click-Hereto grab Graphina – WordPress charts and graphs plugin and be a part of its 40k+ satisfied family.
Make Sure to Subscribe to our newsletter for the latest theme, templates, and tools to let you Structure and Fortunate Web-project without any sedulous dealing with coding skills. Don’t Forget to Subscribe to our Youtube channel to get an instant video tutorial. Follow us on Facebookand Instagram to get Quick Tips, Educational Posts, infographics, and a lot more.