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.

methnen

Manage data sets via a spreadsheet interface, display them as charts via the Chart.js chart library, and embed them via a shortcode or block.
**Note:*** Starting with M Chart version 2.0 the plugin uses a new React based UI as well as updated data parsing class. This means any third party libraries will need to be refactored to support this. Version 1.3 of the <a href="https://github.com/methnen/m-chart-highcharts-library/" rel="nofollow ugc">M Chart Highcharts Library</a> has the necssary changes implemented.
Note: Starting with version 1.8 the Chart.js library is no longer on the 2.x.x branch which introduces some <a href="https://www.chartjs.org/docs/latest/migration/v3-migration.html" rel="nofollow ugc">breaking changes</a>. This will probably only affect you if you were modifying the default Chart.js behavior in some way.
Accessibility: M Chart targets WCAG 2.1 Level AA. Charts on the front end include a visually-hidden data table for screen-reader users, and a <code>Color Blind Safe</code> theme is bundled. Screen-reader users entering chart data should use the CSV Import feature — the spreadsheet widget has partial keyboard support but CSV import is fully accessible.
For full documentation please see the <a href="https://docs.mch.art/" rel="nofollow ugc">Documentation</a>.
To contribute, report issues, or make feature requests use <a href="https://github.com/methnen/m-chart" rel="nofollow ugc">Github</a>.

M Chart

This plugin fits my needs for creating beautiful and responsive charts on my WordPress. Thanks for your work!

Great support and nicely done!

Manage data sets via a spreadsheet interface, display them as charts via the Chart.js chart library, and embed them via a shortcode or block.

Page Charts vs M Chart