vlty

Chartlet is a lightweight, performance-focused plugin for creating beautiful, interactive charts and graphs via shortcodes.
Stop bloating your database! Unlike other chart plugins that store every graph as a custom post type, Chartlet stores all configurations directly within the shortcode. This makes your site faster and your data easier to manage.
Using the power of Chart.js (loaded locally for maximum privacy and GDPR compliance), Chartlet allows you to visualize data in seconds. Perfect for data journalism, financial reports, or simply adding a professional touch to your blog posts.
<h3>Key Benefits:</h3>
<ul>
<li>Zero Database Bloat: No per-chart database entries. Everything lives in your content.</li>
<li>Ultra Lightweight: Optimized for Core Web Vitals and speed.</li>
<li>GDPR Compliant: No external CDNs. Chart.js is served directly from your server.</li>
<li>Intuitive Builder: Create charts visually in your admin settings and get a shortcode instantly.</li>
<li>Native Gutenberg Block: Insert charts directly from the block inserter with a live server-side preview.</li>
</ul>
<h3>Features</h3>
<ul>
<li>8 Chart Types: Bar, Line, Pie, Doughnut, Radar, Polar area, Scatter, and Bubble charts.</li>
<li>Gutenberg Block: Native <code>chartlet/chart</code> block with real-time server-side preview in the editor.</li>
<li>Live Shortcode Builder: Configure labels, data points, colors, and dimensions with a real-time generator.</li>
<li>Fully Responsive: Charts automatically scale to fit any screen size (mobile, tablet, desktop).</li>
<li>Smart Defaults: Set global brand colors and heights in the settings to keep your charts consistent.</li>
<li>Custom Units: Add prefixes (e.g., $) or suffixes (e.g., %) to your data tooltips.</li>
<li>Translation Ready: Fully compatible with multilingual sites.</li>
</ul>
<h3>Usage</h3>
Gutenberg block: Open the block inserter and search for “Chartlet”. Insert the block, enter data, and the chart preview updates live in the editor.
Shortcode builder: Go to Chartlet → Generate. Use the visual builder to: 
1. Select your chart type. 
2. Input labels and data (separated by <code>,</code>). 
3. Customize colors, title, and height. 
4. Add a value suffix (e.g., %) or prefix (e.g., $). 
5. Click Generate Shortcode, copy it, and paste it anywhere!
Shortcode examples:
<pre><code>[chartlet type="bar" labels="Jan,Feb,Mar" data="10,20,15" colors="#3366cc,#dc3912" title="Revenue" height="300" prefix="$"]

[chartlet type="scatter" data="1:5, 2:10, 3:8"]

[chartlet type="bubble" data="1:5:3, 2:10:5, 3:8:10"]
</code></pre>

Chartlet

The lightest way to create beautiful, responsive charts in WordPress. No database clutter, no heavy libraries — just pure performance.

Dylan Kuhn

No recent updates? This plugin once went 9 years without an update. It probably works!
WordPress already lets you attach time-based custom data to posts. Tally Graph lets you plot that data over time using the Google Chart API. Any numeric data will work, whether it is related to athletic training, profits, environmental footprint, weight loss, or any topic you care about.
<h4>Features</h4>
<ul>
<li>Tallies data from any numeric value you enter under “Custom Field” in the WordPress post editor.</li>
<li>Provides daily, weekly, monthly, or yearly tallies.</li>
<li>Tally either data that accumulates, like donations, or just track a number like current weight.</li>
<li>You can make basic use of Tally Graph without any knowledge of the Google Chart API, but you can also use nearly any <a href="https://developers.google.com/chart/image/docs/chart_params" rel="nofollow ugc">Google Chart API parameters</a>.</li>
<li>Rarely requires upgrading</li>
</ul>
<h4>Limitations</h4>
Tally Graph is easier to use than direct Google Chart API calls, but may not be what you need if:
<ul>
<li>You’re looking for a point-and-click full graphical user interface </li>
<li>A post for each data point is too cumbersome for your graphs</li>
<li>You need to graph time intervals shorter than a day</li>
</ul>
Move on to the Other Notes tab for details.
<h3>Usage</h3>
You’ll want to do two things to use Tally Graph:
<ul>
<li>Enter Data – put the numbers you want to track in a WordPress custom field.</li>
<li>Visualize Data – tally and plot your numbers over time in a Google Chart.</li>
</ul>
<h4>Enter Data</h4>
Tally Graph looks in WordPress <a href="https://codex.wordpress.org/Using_Custom_Fields" rel="nofollow ugc">custom fields</a> for data to pass on to the Google Chart API. As indicated by those instructions, a custom field consists of a key and value. You’ll make up the key. The value must be some kind of number. In the next step you’ll use the key name to tell Tally Graph which custom field data to use.
If you want to enter data without publishing a post, just put the custom fields on a dummy post and check “Keep this post private”. You may still want to edit the post date.
<h4>Visualize Data</h4>
Say you have a bunch of posts with the custom field key “Marbles Lost”. You may feel like you’ve been losing your marbles faster recently, but you’re not sure, so you write a new post (or a page) containing this shortcode:
<pre><code>[tally_graph key="Marbles Lost"]
</code></pre>
The Tally Graph plugin will replace that shortcode with a bar chart of how many marbles you’ve lost each month for the past six months. Those are default settings you can change with some more parameters.
<pre><code>[tally_graph key="Marbles Lost" tally_interval="day" interval_count="14" 
to_date="2008-05-01" chs="300x220" chtt="Marbles Lost"]
</code></pre>
That shortcode results in a 300 pixel wide, 220 pixel high graph of your marbles lost in the 14 days prior to May 1st, 2008.
Shortcodes are great in post and page content, but if you want a graph somewhere else on your site, like in a sidebar, you’ll need a <a href="https://codex.wordpress.org/Template_Tags" rel="nofollow ugc">template tag</a>. Aside from the different format, it works the same:
<pre><code><?php echo tally_graph('key=Marbles Lost&tally_interval=week&interval_count=4'); ?>
</code></pre>
That makes a nice sidebar graph of marbles lost over 4 weeks, up to the date of the last post displayed.
<h3>Tag Reference</h3>
Read the Usage section first.
You type a tag directly into a post or page using WordPress <a href="https://codex.wordpress.org/Shortcode_API" rel="nofollow ugc">shortcode format</a>. To put a tag in a theme template, use <a href="https://codex.wordpress.org/Template_Tags/How_to_Pass_Tag_Parameters#Tags_with_query-string-style_parameters" rel="nofollow ugc">template tag with querystring parameters</a>. Both formats take the same parameters listed below.
<h4>tally_graph</h4>
This tag is replaced with an image created with the Google Chart API.
Shortcode: <code>[tally_graph key="My Key"]</code>
Template Tag: <code><?php echo tally_graph('key=My Key'); ?></code>
Parameters:
<ul>
<li>
key – Required.
The key name of the custom field to use for the graph. Multiple keys can be included, separated by a comma.
</li>
<li>
tally_interval
valid values: <code>day</code>, <code>week</code>, <code>month</code>, or <code>year</code>. default is <code>month</code>.
this is the interval of time over which the custom field values are tallied.
</li>
<li>
label_interval
valid values: <code>day</code>, <code>week</code>, <code>month</code>, or <code>year</code>. default is tally_interval.
this is the interval of time that is labeled at the bottom of the graph
</li>
<li>
interval_count
Default is <code>6</code>.
This is the number of intervals to include in the graph.
</li>
<li>
to_date
Valid values include several date formats, like <code>2007-10-31</code>, <code>October 31, 2007</code>, <code>today</code>, or <code>yesterday</code>. Default is the date of the most recent post displayed.
The graph is constructed backward in time from this date.
</li>
<li>
method
Valid values are <code>cumulative</code>, <code>track</code>, or <code>delta</code>. Default is <code>cumulative</code>.
The <code>cumulative</code> method totals custom field values for each interval.
The <code>track</code> method doesn’t total field values, but fills in time gaps between values. This is good for tracking numbers like current weight that you just want to track without tallying.
The <code>delta</code> method computes a running total, adding changes to the total for each interval. This can be used for data where only losses and gains are entered. One entry is necessary to establish a starting value, then gains and losses are recorded as positive and negative values.
</li>
<li>
no_cache
Valid values: <code>true</code> or <code>false</code>. Default is <code>false</code>.
Turn off URL caching. Rarely used – only when the same graph appears more than once on a page.
</li>
<li>
chs
Default is <code>200x200</code>.
This is a <a href="https://developers.google.com/chart/image/docs/chart_params" rel="nofollow ugc">Google Chart API</a> parameter, the chart size in pixels.
</li>
<li>
cht
Default is <code>bvs</code>.
This is a <a href="https://developers.google.com/chart/image/docs/chart_params" rel="nofollow ugc">Google Chart API</a> parameter, the chart type. <code>bvs</code> is a vertical bar chart.
</li>
<li>
Any other <a href="https://developers.google.com/chart/image/docs/chart_params" rel="nofollow ugc">Google Chart API parameters</a> are passed along, so you can go nuts with all the options. You’ll probably use at least <code>chtt</code>, the chart title.
</li>
</ul>
<h4>tally_graph_url</h4>
If you want to create your own image tag in a template, this tag will give you only the URL for the chart.
Template Tag: <code><?php echo tally_graph_url(); ?></code>
Parameters are the same as the <code>tally_graph</code> tag.

Tally Graph

Add Google charts and graphs to your WordPress site based on tallies of any numeric custom field over time. Visualize progress toward any goal.

Chartlet vs Tally Graph