PHPackages revilkent/jquery-widget-polygonal-graph - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. revilkent/jquery-widget-polygonal-graph ActiveLibrary[Utility & Helpers](/categories/utility) revilkent/jquery-widget-polygonal-graph ======================================= jQuery widget (widget factory) that draws a polygonal graphic using canvas tag of HTML5 38JavaScript Since Sep 11Pushed 11y ago2 watchersCompare [ Source](https://github.com/frasim/jquery-widget-polygonal-graph)[ Packagist](https://packagist.org/packages/revilkent/jquery-widget-polygonal-graph)[ RSS](/packages/revilkent-jquery-widget-polygonal-graph/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependenciesVersions (1)Used By (0) jquery-widget-polygonal-graph ============================= [](#jquery-widget-polygonal-graph) **jQuery Widget Polygonal Graph** is a jQuery widget based on widget factory. It draws a polygonal graphic on a circle using canvas tag of HTML5. [![](https://raw.githubusercontent.com/revilkent/jquery-widget-polygonalGraph/master/screenshot.png)](https://raw.githubusercontent.com/revilkent/jquery-widget-polygonalGraph/master/screenshot.png) If you have a set of data included in a range and you want to represent it, you can do it using **PolygonalGraph** widget! Each data is rapresented by a point on the circle. If a data is small it will be close to the center, vice versa if the data is near to the max value it will be close to the circumference. This graphic is very intuitive, eg to rapresent and compare characteristics of footballers (attack, defence, speed, ...) or even characters of an RPG (life, magic points, agility, ...), etc... \###1) Requirements This widget is based on jQuery Widget Factory, than you must include **jquery** and **jquery-ui** libraries: ``` ``` In this case the libraries are in a folder named "jquery". \###2) Include the widget ``` ``` \###3) Getting started Include a canvas in the body: ``` ``` Than you can use your widget: ``` var labels = new Array('ATT', 'DEF', 'SPD', 'ENE', 'MEN'); // labels that will be displayed var data = new Array(90, 74, 73, 64, 66); // the data you want to show in the graphic var myVar = $("#myCanvas").polygonalGraphWidget( { labels: labels, data: data } ); ``` In the script above we simply create two arrays, **labels** and **data**, with the same number of elements. They must contain at least **three** elements. *data* will contains number between 0 and **max\_val** (99 by default). Than we pass these arrays to a widget named "polygonalGraphWidget" that is anchored to the canvas element identified by the id **myCanvas**. This two parameters are REQUIRED! *data* can be an array of arrays too. Every array must have the same number of element than *labels*. \###3) Settings In addition to *labels* and *data*, you can add others optional parameters to customize the widget. By default they are: ``` - max_val: 99 // max value reference - textFont: "bold 16px Times New Roman" // font of labels - textColor: "#000" // color of lables - circleLineWidth: 5 // circle line width in px - circleRadius: 150 // circle radius in px - circleLineColor: "#333" // circle line color - circleBackgroundColor: "rgba(100, 161, 265, 1)" // circle background color - graph_colors: [ // graph line colors (they will be cycled) "rgba(255, 0, 0, 0.6)" "rgba(0, 255, 0, 0.6)" "rgba(0, 0, 255, 0.6)" ] - phase_start: (Math.PI / 2), // initial phase in radians (it establishes where the first point will be placed on the circumference) - margin: 15 // margin in px of lables from circumference - grid: true // show grid (true=yes, false=no) ``` \###COMPLETE EXAMPLE ``` Polygonal Graph Widget var labels = new Array('ATT', 'DEF', 'SPD', 'ENE', 'MEN'); var data = new Array(90, 74, 73, 64, 66); var myVar = $("#myCanvas").polygonalGraphWidget( { labels: labels, data: data } ); ``` ### Health Score 21 — LowBetter than 18% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community8 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/f12eab1dd111624c8b47570c678efb6a282b11db72b8199144c88c94febc0395?d=identicon)[revilkent](/maintainers/revilkent) --- Top Contributors [![frasim](https://avatars.githubusercontent.com/u/3758387?v=4)](https://github.com/frasim "frasim (1 commits)") ### Embed Badge ![Health badge](/badges/revilkent-jquery-widget-polygonal-graph/health.svg) ``` [![Health](https://phpackages.com/badges/revilkent-jquery-widget-polygonal-graph/health.svg)](https://phpackages.com/packages/revilkent-jquery-widget-polygonal-graph) ``` ### Alternatives [spomky-labs/cbor-php CBOR Encoder/Decoder for PHP 5811.7M43](/packages/spomky-labs-cbor-php)[scribu/scb-framework A set of useful classes for faster plugin development 22393.7k](/packages/scribu-scb-framework)[friendsoftypo3/rtehtmlarea Highly configurable RTE based on HtmlArea for TYPO3 v8. 1074.5k](/packages/friendsoftypo3-rtehtmlarea) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)