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.

Massoud Shakeri

We are not going to re-invent the wheel, and this plugin is not going to give you another charting library. This purpose of this plugin is to let you get the most out of charting libraries that already exist and are awesome. There are many of them out there, and most of them are free. Many of the other commercial libraries are free for a personal or non-profit project, or have a free branded version, which may have a small link to their website.
Here is a list of libraries currently added to the collection. If you know another charting library, compatible with GPL license, please inform us to add it.
<ul>
<li>HighCharts.js: The library used (disabled by default) is a free version with a small link to their website, and can be used if the user’s site opts in to link. This plugin does NOT substitute HighCharts terms of use. HighCharts use is free for a personal or non-profit project under the Creative Commons Attribution-NonCommercial 3.0 License. Please refer to HighCharts license page http://shop.highsoft.com/highcharts.html to check the HighCharts precise license conditions.</li>
<li>Morris.js</li>
<li>ZingChart: The library used (disabled by default) is a free branded version, and can be used if the user’s site opts in to link. This plugin does NOT substitute ZingChart terms of use. Please refer to ZingChart license page https://www.zingchart.com/buy/details/branded-license/ to check the ZingChart precise license conditions.</li>
<li>Chart.js</li>
<li>Google Charts: by loading Google’s JSAPI library loader remotely (as a service), and then using it to load the visualization library and other packages</li>
<li>D3.js</li>
<li>Chartist.js</li>
<li>Smoothie Charts</li>
<li>Flot Charts</li>
</ul>
Please refer to the license page of a library you want to use to check the precise license conditions.
<h4>What does this plugin do?</h4>
This plugin allows you to create chart code snippets, which can be inserted into the posts or pages by using the shortcode of “BlazingChart”.
Another scenario is you have a function, defined in another plugin or in your theme, which extracts data from database and produces the scripts for the chart. Then you can give the name of that function as a parameter to the shortcode, so the function is called and the output of that function will be inserted in the page. 
The “BlazingChart” shortcode can have up to 4 parameters:
<ol>
<li>“charttype”: 
The first parameter of that shortcode tells which Charting library you want to use. At the moment the value of this parameter can be one of these:</li>
</ol>
<ul>
<li>highcharts: for HighCharts.js</li>
<li>morris: for Morris.js</li>
<li>zingchart: for ZingChart</li>
<li>chartjs: for Chart.js</li>
<li>google: for Google Charts</li>
<li>d3: for D3.js</li>
<li>chartist: for Chartist.js</li>
<li>smoothie: Smoothie Charts</li>
<li>flot: for Flot library</li>
</ul>
Other than Google Charts which does not have a local version of library, all the other libraries are included in this plugin. Some of them are hosted on a CDN as well. So by changing the settings, you can easily switch between remote or local chart/map libraries.
<ol>
<li>
“source”: 
The second parameter specifies the user-friendly slug of the chart snippet as the source of script and data for the chart.
</li>
<li>
“function”: 
If a function, defined in another plugin or in the theme, is going to produce the data and script for the chart, the name of that function can be given as the value of this parameter. This value can be not only a function name, but also other types of callbacks, like “Foo::method”, “array(‘Foo’, ‘method’)”, or “array($obj, ‘method’)”.
</li>
<li>
“options”: 
Some of the charting libraries are just a single file. But others, like Flot, are divided to a main library and several auxiliary libraries, to make it lighter and more efficient. By using this parameter, you can give a comma separated list of auxiliary libraries of the main library to load. Here is the list of options for each library:
</li>
</ol>
<ul>
<li>HighCharts.js: more, 3d, exporting</li>
<li>D3.js : pie, nvd3</li>
<li>Chart.js : bundle</li>
<li>Flot Charts : colorhelpers, canvas, categories, crosshair, errorbars, fillbetween, image, navigate, pie, resize, selection, stack, symbol, threshold, time</li>
</ul>
<h4>How Charting libraries are used?</h4>
To include JavaScript files efficiently, none of these libraries are enqueued, until the shortcode of “BlazingChart” appears in a post or a widget. The plugin loads only one of these libraries, specified by “charttype” parameter. Moreover, to load the page faster, that library is loaded in the footer.
You can also use a built-in PHP function to invoke the chart anywhere in your template:
<?php 
// define the parameters 
$patts= array( 
 “charttype” => “name of one of the aforementioned charting libraries”, 
 “source” => “slug of the chart snippet”, 
 “options” => “auxiliary libraries to load” 
 ); 
// call the function to invoke the shortcode handler 
blazing_charts_insert($patts); 
?>
As always, there are exceptions:
To reduce the size of the libraries loaded for Google Charts, that library decides which portions of the library to be included, depending to the type of the chart. So the link to the CDN library must be included at the top of the script, saved in the chart snippet.
<h4>How To use this plugin:</h4>
<ol>
<li>
Although theoretically you can have various charts in a single page, drawn by more than one charting library, it is advisable not to do that. These libraries may conflict with each other, and may not get any of the charts drawn properly. Just make sure in every page, only one of those libraries is included.
</li>
<li>
Every chart has two major parts: first a container, specified by a <div> or <canvas> tag, with a certain id or class; and second a script which tells how that chart should be drawn.
</li>
<li>
If you have more than one chart in a single page, make sure each chart, saved as a Chart Snippet or produced by a function, has a unique id or class for its container. Otherwise there will be a conflict between those charts.
</li>
<li>
Shortcodes are case-sensitive. So if you want to use the shortcode of [BlazingChart], please make sure to type it correctly.
</li>
</ol>
<h4>Examples</h4>
I tried to bring some examples about each of the libraries, in this plugin’s URI:
http://blazingspider.com/wp-demo
<h4>Documentation</h4>
The detailed and updated version of documentation can be found in this link:
http://blazingspider.com/plugins/blazing-charts

Blazing Charts

A plugin to easily allow you to add interactive charts and maps by using a collection of Charting libraries.

Page Charts vs Blazing Charts