SupportHost

Ivan Messina

This plugin creates a shortcode you can use to embed charts anywhere inside WordPress. Just add the shortcode, add some options and you are done. You can see it in use on <a href="https://supporthost.com/fast-website/" rel="nofollow ugc">SupportHost website</a>.
It loads only 1 javascript (chart.js) and only loads it on the page where you actually use the shortcode. It’s so lightweight it won’t impact the performances of your website at all.
Charts are created with <a href="https://www.chartjs.org/" rel="nofollow ugc">chart.js</a>, so you can hover them and read the data.
This <a href="https://wordpress.org/plugins/simple-charts/" rel="ugc">simple charts</a> plugin can be a good alternative for plugins like: 
1. <a href="https://it.wordpress.org/plugins/ninja-charts/" rel="nofollow ugc">ninja charts</a> 
2. <a href="https://it.wordpress.org/plugins/easy-chart-builder/" rel="nofollow ugc">easy chart builder</a> 
3. <a href="https://it.wordpress.org/plugins/googlegraph/" rel="nofollow ugc">Google graph</a>
<h3>Usage</h3>
After the plugin is active, you can just add the shortcode to your pages or posts (or anywhere you can add a shortcode): 
[simple_chart type=”bar” name=”mychart” labels=”jan, feb, mar, apr” data=”2,9,3,7″ label=”First series” color=”#00ffff” border=”#000fff” data_1=”7,2,8,1″ label_1=”Second series” color_1=”#000fff” border_1=”#0ff00f”]
Shorcode parameters: 
* type: you can decide the type of chart you want ot create. Optional, defaults to line. More on charts types below. 
* name: Optional, must be unique per page. 
* options: json of chart options as per <a href="https://www.chartjs.org/docs/latest/configuration/#options" rel="nofollow ugc">chart.js docs</a>. Make sure it’s all in one line. 
* labels: a list of comma separed labels. 
* data: a list of comma separed numbers. You can create data_1 for the second serie, data_2 for the third and so on. Make sure you start from 1, otherwise it won’t work. 
* label: The label name for the serie. You can create label_1 for the second serie, label_2 for the third and so on. Optional, if left blank you will see “label_#” 
* color: The color user for the serie. If empty will default to the chart.js pink. It is recommended to give each series its own color. 
* border: The border color. If empty defaults to the color option.
This is the minimum you can add in the shortcode to make it work: 
[simple_chart labels=”Jan, Apr, Mar” data=”2,9,3″ ]
Examples shortcodes: 
[simple_chart type=”bar” labels=”2 s, 3 s, 4 s, 5 s, 6 s, 7 s” data=”9.6, 13, 17.1, 22.2, 27.4, 32.3″ label=”Bounce rate %” color=”#e8e1fc” data_1=”3,4,5,1,2,7″ label_1=”Label 1″ color_1=”#ff00ff” options=”indexAxis: ‘y’,plugins: {title: {display: true,text: ‘Bounce rate per load time’, position:’bottom’}}”] 
[simple_chart type=”bar” labels=”2 s, 3 s, 4 s, 5 s, 6 s, 7 s” data=”9.6, 13, 17.1, 22.2, 27.4, 32.3″ label=”Bounce rate %” color=”#e8e1fc” options=”plugins: {title: {display: true,text: ‘Bounce rate per load time’, position:’bottom’}}”]
<h3>6 Chart types</h3>
Supported charts types are:
<ol>
<li>Line</li>
<li>Bar Chart</li>
<li>Doughnut</li>
<li>Pie</li>
<li>Radar</li>
<li>polarArea</li>
</ol>
<h3>Extremely simple</h3>
Just insert the shortcode, add the data and the chart will be shown.
<h3>Embed anywhere</h3>
If you can use a shortcode in that content you can add the chart.

Simple Charts

With Simple Charts, you can easily embed charts in WordPress.
I've been waiting for such a plugin for a long time.
Really thank you for this amazing plugin.


Finally the plugin I need

We needed a simple plugin to create charts, that would not slow down WordPress, and that would allow to create charts easily and fast.

We came up with thi ultralight plugin (is only a shortcode) that only adds a javascript file if you use the shortcode.

Add the shortcode, add some data points and hit publish, it's that easy.

A simple lightweight plugin


this plugin is a good idea but the example shortcode did not work on my local site on either a page in the shortcode field or on a template inside do_shortcode().


this does not work

Easily add charts to your wordpress website, probably the lightest plugin out there.

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.

Simple Charts vs Page Charts