SupportHost

Ivan Messina

<p>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>.</p>
<p>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.</p>
<p>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.</p>
<p>This <a href="https://wordpress.org/plugins/simple-charts/" rel="ugc">simple charts</a> plugin can be a good alternative for plugins like:<br />
1. <a href="https://it.wordpress.org/plugins/ninja-charts/" rel="nofollow ugc">ninja charts</a><br />
2. <a href="https://it.wordpress.org/plugins/easy-chart-builder/" rel="nofollow ugc">easy chart builder</a><br />
3. <a href="https://it.wordpress.org/plugins/googlegraph/" rel="nofollow ugc">Google graph</a></p>
<h3>Usage</h3>
<p>After the plugin is active, you can just add the shortcode to your pages or posts (or anywhere you can add a shortcode):<br />
[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”]</p>
<p>Shorcode parameters:<br />
* type: you can decide the type of chart you want ot create. Optional, defaults to line. More on charts types below.<br />
* name: Optional, must be unique per page.<br />
* 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.<br />
* labels: a list of comma separed labels.<br />
* 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.<br />
* 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_#”<br />
* 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.<br />
* border: The border color. If empty defaults to the color option.</p>
<p>This is the minimum you can add in the shortcode to make it work:<br />
[simple_chart labels=”Jan, Apr, Mar” data=”2,9,3″ ]</p>
<p>Examples shortcodes:<br />
[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’}}”]<br />
[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’}}”]</p>
<h3>6 Chart types</h3>
<p>Supported charts types are:</p>
<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>
<p>Just insert the shortcode, add the data and the chart will be shown.</p>
<h3>Embed anywhere</h3>
<p>If you can use a shortcode in that content you can add the chart.</p>


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.

DAEXT

<p>UberChart brings the endless customization possibilities included in the <a href="https://www.chartjs.org/" rel="nofollow ugc">Chart.js</a> library to WordPress.</p>
<p>With 240 customization options per chart and 30 options per dataset, this is the ideal plugin for data visualization experts who want to customize every chart detail.</p>
<p>Start now creating perfect HTML-based charts with UberChart!</p>
<h3>Pro Version</h3>
<p>For professionals, we distribute the <a href="https://daext.com/uberchart/" rel="nofollow ugc">Pro Version of UberChart</a>. This upgraded version includes additional features like the ability to link charts with JSON, CSV, XML files, an option to connect charts with spreadsheets available in Google Sheets, better loading performance with the transient API, additional animation options, and more. See this <a href="https://daext.com/uberchart/#features" rel="nofollow ugc">feature comparison</a> for all the details.</p>
<h3>A Versatile Chart Plugin</h3>
<p>Use this versatile chart plugin in your WordPress site to compare categories, show trends over time, highlight relationships between different variables, and more.</p>
<p>UberChart includes the most common chart types, and it’s the perfect chart plugin to present your data in a visual format that is easy to understand and interpret.</p>
<p>The supported chart types are:</p>
<ul>
<li>Line</li>
<li>Area</li>
<li>Bar</li>
<li>Horizontal Bar</li>
<li>Pie</li>
<li>Half Pie</li>
<li>Doughnut</li>
<li>Half Doughnut</li>
<li>Radar</li>
<li>Polar Area</li>
<li>Scatter</li>
<li>Bubble</li>
</ul>
<h3>Features</h3>
<h4>Embedded Spreadsheet Editor</h4>
<p>You can add or modify the chart data using an embedded spreadsheet editor implemented with Handsontable (Handsontable CE 6.2.2).</p>
<p>This feature gives you many advantages:</p>
<ul>
<li>Faster data editing. (compared to standard chart plugins that use input field)</li>
<li>The ability to paste data available from other spreadsheet editors like Excel, OpenOffice Calc, Google Sheets, and more.</li>
<li>The possibility to export the chart data to external spreadsheets.</li>
</ul>
<h4>Live Preview</h4>
<p>Easily preview the chart with a single click directly from the chart editor available in the back end.</p>
<h4>Labels</h4>
<p>Optionally include dataset labels to help the user better understand the data. The labels, when clicked, can optionally enable or disable specific datasets.</p>
<h4>Tooltips</h4>
<p>The chart can optionally display tooltips when the user hovers over specific data points.</p>
<p>You can customize the tooltips in terms of style, with options to control typography, colors, and spacing. Regarding content, with dedicated settings to add titles, prefixes, suffixes, footer information, and more.</p>
<h4>Scales Options</h4>
<p><strong>Common</strong></p>
<p>This category of options allows you to define the basic configuration of a scale. Specifically, whether to display or not a scale, the position of the scale (Bottom, Top, etc.), the type of scale (the available types are Category, Linear, Logarithmic, and Radial), and whether the scale data are stacked.</p>
<p><strong>Gridlines</strong></p>
<p>Customize the gridlines of the chart with options to configure their colors, the line width, whether to draw them on the chart area, and more.</p>
<p><strong>Title</strong></p>
<p>Customize the title of each scale by using custom font size, font family, font style, font color, and more.</p>
<p><strong>Tick</strong></p>
<p>These options allow you to customize the small lines between the axis and the labels (ticks) and the axis labels.</p>
<p>Here you can configure the tick order, the automatic rotation of the tick labels, set a label prefix or suffix, customize the typography of the labels, and more.</p>
<p><strong>Options</strong></p>
<p>Use this section to control advanced options like the number of ticks available in an axis, whether to force a scale to begin at zero, the percentage of space occupied by chart elements like the bar of a  bar chart, and more.</p>
<p><strong>Time</strong></p>
<p>This chart plugin supports time scales. Time scales use the date-fns date utility library and support time format expressed with unicode tokens.</p>
<p>Here you can customize the time format for the chart and the tooltips, define the minimum and maximum values of the time scale, and select the unit (E.g. Year, Month, Day, etc.) and the unit step size.</p>
<h4>Chart models</h4>
<p>The chart options included in UberChart reflect, for the most part, the options supported by the Chart.js library. However, understanding and using all these options is quite complex, especially at the begging.</p>
<p>For this reason, we have included a feature named “models” to simplify the chart creation process and improve the reusability of the chart.</p>
<p>In general, you can use the models to:</p>
<ul>
<li>Quickly create the most common types of charts without dealing with the configuration options.</li>
<li>Reuse particularly complex chart configurations.</li>
<li>Reuse chart configurations that reflect the site brand guidelines.</li>
</ul>
<p>The plugin comes by default with 32 ready-to-use models, but you can create an unlimited number of custom models.</p>
<p>For example, let’s say that your WordPress site includes graphic card reviews, and you want to have bar charts to compare parameters like benchmark results, prices, etc. In that case, you can create a dedicated chart model that allows you to reuse a customized bar chart configuration (with custom bar colors and dimensions, custom typography, etc.) for all your bar charts.</p>
<h4>Dataset customization</h4>
<p>You can customize each chart dataset based on your specific needs. With the dataset options, you can, for example, specify the colors of a dataset, the line tension, the style of the single data points, and more.</p>
<h4>Custom thousands and decimal separator</h4>
<p>The charts can show numeric values with custom thousands and decimal separators.</p>
<p>This feature can be helpful to properly format the currency values displayed in the chart based on the specific currency and the targeted audience.</p>
<h4>Support for a high number of datasets</h4>
<p>The plugin support charts with a maximum of one million data points.</p>
<p>Note that the plugin might automatically decrease this limit based on the PHP configuration.</p>
<h4>Maintenance tasks</h4>
<p>We have included maintenance tasks to perform special operations like bulk deleting data, resetting the plugin options, and adding the default models.</p>
<h4>Size and responsive options</h4>
<p>Control the chart’s size and responsive behavior with the dedicated options.</p>
<p>You can, for example, set the size of the chart container, configure a margin for the chart, select whether to maintain or not the chart aspect ratio with mobile devices, and more.</p>
<h3>Credits</h3>
<p>This plugin makes use of the following resources:</p>
<ul>
<li><a href="https://getcomposer.org/" rel="nofollow ugc">Composer</a> licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow ugc">MIT</a> License</li>
<li><a href="https://select2.org/" rel="nofollow ugc">Select2</a> licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow ugc">MIT</a> License</li>
<li><a href="https://github.com/handsontable/handsontable" rel="nofollow ugc">Handsontable</a> licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow ugc">MIT</a> License</li>
<li><a href="https://github.com/bgrins/spectrum" rel="nofollow ugc">Spectrum</a> licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow ugc">MIT</a> License</li>
<li><a href="http://www.chartjs.org/" rel="nofollow ugc">Chart.js</a> licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow ugc">MIT</a> License</li>
</ul>
<p>You can find the actual copy of the license inside the folder used to store the library files.</p>


UberChart – WordPress Chart Plugin

UberChart brings the endless customization possibilities included in the Chart.js library to WordPress.

Simple Charts vs UberChart – WordPress Chart Plugin