IWS Graphs and Charts – Official WordPress Plugin Documentation
Welcome to the official documentation hub for IWS Graphs and Charts, a high-performance, lightweight, and completely free data visualization engine for WordPress.
🎯 Engine Core Philosophy
Most WordPress charting plugins overload your server metrics by loading bulky JavaScript bundles across your entire domain. IWS Graphs and Charts changes this. It handles rendering over high-speed HTML5 Canvas lines utilizing Chart.js and hooks into a conditional asset architecture.
Performance Guarantee: If a page does not host an active shortcode, zero plugin scripts or style assets are injected into your page payload. Your Core Web Vitals remain completely unimpacted.
📥 Acquisition Channels
The compilation builds are fully open-source and open for global use across these official mirrors:
GitHub Releases: Download From GitHub – https://github.com/itwebservices-ca/IWS-Graphs-and-Charts
SourceForge Mirror: Download From SourceForge – https://sourceforge.net/projects/iws-graphs-and-charts/
⚙️ Initial Setup & Admin GUI Configuration
1. Download the plugin package archive (`iws-graphs-and-charts.zip`).
2. Upload via your WordPress backend under Plugins -> Add New -> Upload Plugin, or manually drop the extracted directory folder directly into `/wp-content/plugins/`.
3. Activate the plugin.
4. Navigate to your new IWS Graphs & Charts admin sidebar control dashboard panel to adjust global defaults:
* Default Chart Type: Fallback style choice used if the `type` property is left empty.
* Default Suffix Unit: System fallback unit suffix symbols (e.g. `%`, `kW`, `Meters`).
* Maximum Layout Width: Global responsive pixel constraint framework boundary limits (Default: `850px`).
⚠️ Vital Syntax Syntax Formatting Constraints
To ensure the JavaScript parsing runtime engine doesn’t throw calculation execution exceptions, you must strictly observe three structural guidelines:
* Strict Spacer Rules: Do not place empty spaces directly after commas when writing data strings.
* ❌ `labels=”Jan, Feb, Mar”`
* `labels=”Jan,Feb,Mar”`
* Raw Number Formats: Strip out thousands-separators, letters, or currency characters. Suffix string parsing is managed by the unit logic attributes.
* ❌ `data=”$4,500″`
* `data=”4500″`
* Balanced Element Lengths: The number of string parameters inside your `labels` parameter must explicitly match the matching comma entries inside your `data` string structure.
📊 Shortcode Variant Integration Library
Copy and paste these pre-formatted shortcode blocks directly inside any Gutenberg shortcode block, Classic editor workspace, or Elementor widget wrapper layout area.
1. Comparative Multi-Line Trend Chart
Perfect for mapping performance trajectories. Separate comparison lines using a pipe (`|`) block.
2. Horizontal Leaderboard Chart
Ideal for ranking matrices or labels requiring extensive horizontal spacing profiles.
[iws_gc type="horizontalBar" title="Top Performing Sales Regions" labels="Toronto,Brampton,Vancouver,Montreal" data="840,910,620,530" unit="CAD"]
3. Vertical Bar Chart
Standard configuration layout built to scale and balance category options across structural axis intervals.
[iws_gc type="bar" title="Monthly Registration Growth" labels="January,February,March,April" data="120,185,340,290" unit="Users"]
4. Interactive Doughnut Layout
Sleek breakdown layouts mapping a single dataset to individual parts. The customized legend automatically reveals corresponding segment values and unit markers directly next to color filters.
[iws_gc type="doughnut" title="Client Acquisition Channels" labels="Organic Search,Direct,Social Media" data="55,30,15" unit="%"]
5. Classic Pie Layout
Standard circular presentation layout profiles best deployed when tracking five or fewer component ratios.
[iws_gc type="pie" title="Company Budget Breakdown" labels="Development,Marketing,Operations" data="45,35,20" unit="k"]
6. Polar Area & Radar Skill Matrix
Advanced radial visualization solutions perfect for cyclical distribution or skill profiling maps.
[iws_gc type="polarArea" title="Regional Operational Scores" labels="North,East,South,West" data="75,45,90,60" unit="kW"]
[iws_gc type="radar" title="Developer Skills Profile" labels="JS,PHP,SEO,UI,Security" data="90,85,75,80,95" unit="Pts"]🧩 Complete Shortcode Parameter Reference
| Attribute | Required | Default Value | Accepted Values | Operational Behavior |
type | Optional | bar | bar, horizontalBar, line, doughnut, pie, polarArea, radar | Dictates the chart rendering style framework. |
labels | REQUIRED | None | Comma-separated strings | Sets data taxonomy category identifiers along axes. |
data | REQUIRED | None | Comma-separated numbers | Sets raw metric input items. Pipes (|) divide multi-line maps. |
title | Optional | None | Alphanumeric string | Renders a clean typography title header above the canvas. |
unit | Optional | None | Suffix text signs (e.g. %, kW) | Appends clear unit contexts onto scales and hover popovers. |
line_labels | Optional | None | Comma-separated strings | Maps customized series names inside multi-dataset legends. |
💬 Frequently Asked Questions (FAQ)
Q: Why is my graph showing as a blank section container?
A: This is consistently caused by a formatting discrepancy inside your shortcode attributes. Ensure your labels count perfectly matches your data point count. Check that no letters or extra spacer gaps have accidentally slipped inside your shortcode parameters.
Q: Can I run multiple distinct graphs on a single post layout page?
A: Yes, absolutely. The engine isolates every script execution lifecycle event by generating cryptographically randomized unique CSS element container string tags on render. You can display multiple chart models stacked or side-by-side without interference.
Q: How do the interactive legend filters operate?
A: All generated legends are interactive out of the box. For multi-line layouts, clicking a dataset tracker filter item instantly toggles the rendering tracking state of that line series on or off. For single bar charts, clicking an option dynamically hides or restores that individual item container with clean CSS transition speeds.
💎 Custom Enterprise Architecture Support
This documentation framework and code engine is developed by IT Web Solutions in Brampton. If your engineering matrix demands high-level platform modifications, custom database integration pipelines, or tailored corporate automation strategies, let’s connect: