everviz

everviz is a data visualization tool that helps you create interactive charts, maps and more – without any coding involved. 
  
Users include newsrooms, communication teams, governments, students and researchers across the globe. 
  
Adding an interactive visualization in your WordPress with everviz is easier than adding an image. Ties perfectly into your existing publishing flow. 
  
All visualizations are fully responsive, which means they automatically adapt and are optimized to all devices and screens of any size. everviz comes with a simple and powerful theme concept, which allows you to incorporate your corporate brand elements such as color palette, fonts, positioning and logos into your projects. 
  
All projects created with everviz include state of the art accessibility (A11Y) functionality in the most relevant disability categories. 
  
This plugin requires an everviz account. Sign up for free <a href="https://www.everviz.com" rel="nofollow ugc">here</a> first, if you don’t have one! 
  
HIGHLIGHTS 
– Engage readers with interactive content 
– No coding or design skills required 
– Works on any device 
– All your visualizations will be consistent with your brand identity 
– Collaborate with your team 
– Reach out to bigger audience with state of the art accessibility (A11Y) functionality 
– Keep your published work up to date with connecting to live data sources 
– Download your visualizations for the print edition or static reports 
– Ties perfectly into most popular WordPress editors 
  
HOW TO USE EVERVIZ (PREREQUISITE) 
This plugin requires an everviz account and a visualization published in the app. This means that you have to sign up <a href="https://www.everviz.com" rel="nofollow ugc">here</a> first and create your first visualization, if you don’t already have an account with published charts or maps. 
  
Here’s how to use everviz to create visualizations from your data: 
  
1. Paste 
Enter data directly, drop a CSV file into the editor, copy & paste from Excel, or connect to live data via the Google Sheet inte­gration. 
  
2. Pick 
Our intuitive editor lets you choose chart type, edit text, fonts and colors to make your data stand out. 
  
3. Publish 
Embed your interactive visualizations on your WordPress website, blog or intranet, or export them as images. 
  
Learn more about how to use everviz in our help section: <a href="https://www.everviz.com/help" rel="nofollow ugc">https://www.everviz.com/help</a> 
  
HOW TO USE THE PLUGIN 
Inserting a visualization 
If you can’t see the visualization you are looking for, search for it in the search bar at the top of the plugin window or navigate through the pagination at the bottom of the window. When you have identified the visualization you want, click it, and then click the “Insert” button. 
  
Create a new visualization 
To create a new visualization, click the “Create new” button at the top of the window. You will be redirected to the everviz app to create the visualization. Go to <a href="https://www.everviz.com/help" rel="nofollow ugc">https://www.everviz.com/help</a> to learn more about how to create visualizations in everviz. 
  
Editing a visualization 
To edit a visualization, click “Edit in everviz” below the inserted visualization. You will be redirected to the everviz app. 
  
Deleting a visualization 
To delete a visualization from your document, click the trash can symbol in the upper right corner of it.

everviz – Charts, Maps and Tables – Interactive and responsive

Using this plugin saves you the hassle of logging in to Everviz and copying over the embed code to the custom HTML block in wordpress. When connecting this plugin to the Everviz API you can find all your graphs within the provided gutenberg block. This also has the added benefit that your graphs are previewed within the editor.

A good way to add your Everviz graphs to wordpress

Sharing your data through interactive, responsive and accessible charts, maps and tables is now simpler than ever. No coding skills required.

sidov

This plagin lets you to embed charts of Chart and Highcharts softwares on any page or post of your site. 
For this you should include one of above mentioned libraries in the “js” directiory of this plagin. 
For every chart you must prepare two files : one of them it’s a javascript file with the Highchart object, 
other one it’s a php file with data for chart. Interface between php and js represents array with the name “data”. 
To this array you can include all variables and arrays necessary for the Highchart object.
<pre><code>For example in the php file:
$data= [['name'=> 'Installation','data'=> [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]], 
 [
 'name'=> 'Manufacturing',
 'data'=> [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
], [
 'name'=> 'Sales & Distribution',
 'data'=> [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
], [
 'name'=> 'Project Development',
 'data'=> [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
], [
 'name'=> 'Other',
 'data'=> [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
]];

In the javascript file:

new Chart(document.getElementById("container"), {
...
 data: data
... 
}
</code></pre>
If you want to use static data right in the js you should prepare a php file with void array “data”. 
All js files you should include in the folder “js” and php files in the “php” folder. 
For rendering the chart on the chosen page You should put necessary HTML tag with the corresponding id 
in the chosen line.
For Chart library you should wrap canvas tags in div tag.
For example:
< div style=”width:800px; height = 450px !important;” > < canvas id=”container” class = “container” width=”800″ height=”450″ > < /canvas > < /div >
After activating plagin you should select field “Page Charts” in the menu “Plagins” of your admin panel. 
In the drop-down list with the label “Choose a chart library” you should choose appropriate software. 
Do not forget to include chosen software library in the “js” folder of the plagin! 
In the table on the the plagin page you should select page or post where you want to insert your chart by clicking 
“add new chart”. 
In the appeared line you should put the names of your php and js files and click “change”. 
Be shure that id in your div on the page and container name of the javascript chart object are the same. 
If you want to use several charts on the same page use “duplicate” button and do the same as above. 
Don’t forget to use different container’s ids on the same page! 
You can preview your chart on the admin page by clicking “preview the chart”.

Page Charts

This plagin lets add charts of some libraries to any page or post of your site. Now you can use charts of Chart and Highcharts softwares.

everviz – Charts, Maps and Tables – Interactive and responsive vs Page Charts