PHPackages                             yiiext/chart - 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. yiiext/chart

ActiveLibrary[Utility & Helpers](/categories/utility)

yiiext/chart
============

This extension provides a set of charting widgets based on gRaphaël.

11344PHP

Since May 9Pushed 13y ago6 watchersCompare

[ Source](https://github.com/yiiext/chart)[ Packagist](https://packagist.org/packages/yiiext/chart)[ RSS](/packages/yiiext-chart/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Chart
=====

[](#chart)

This extension provides a set of charting widgets based on [gRaphaël](http://g.raphaeljs.com/).

Installing and configuring
--------------------------

[](#installing-and-configuring)

Extract files to your application extension directory.

Using Pie Chart
---------------

[](#using-pie-chart)

You can use the folowing code in order to use this type of widget:

```
$this->widget('ext.chart.PieChart', array(
	'data'=>$data, //Chart data
	'legendPosition'=>'west', // Legend block position. Can be 'east', 'west', 'north' or 'south'. Default is 'west'.
	// Settings for the pie chart
	'options'=>array(
		'centerTop'=>130, // Distance from widget's left side to the center of pie chart
		'centerLeft'=>130, // Distance from widget's top side to the center of pie chart
		'radius'=>100 // Radius of the chart
	),
	// Set of JavaScript event handlers for the chart. Array indexes have to be a valid event name.
	// Value can be either a string with callback function or array of strings of the same content.
	'eventHandlers'=>array(
		'click'=>'function(){alert($(this).attr("id"));}',
		'hover'=>array(
			'function(){alert("In!");}',
			'function(){alert("Out!");}'
		),
	),
	// Settings for chart label. Params 'left' and 'top' could be 'auto'.
	// In this case label would be centered in corresponding direction
	'label'=>array(
		'left'=>'auto', // Distance from the widget's left side to the middle of the label text
		'top'=>10,// Distance from the widget's top side to the middle of the label text
		'text'=>'Simple Pie Chart', // Label text
		'font'=>'10px sans-serif', // Label font settings, default is '12px sans-serif'
	),
	// HTML options for the widget container
	'htmlOptions'=>array(
		'style'=>'width: 300px; height:240px;'
	),
));

```

Data for this type of widget have to be in following format:

```
array(
	array(
		'legend'=>'Param1', // Legend for the current item
		'value'=>10, // Item's value
		'href'=>'http://google.com', // Link assigned to the current item
	),
	...
);

```

Using Bar Chart
---------------

[](#using-bar-chart)

You can use the folowing code in order to use this type of widget:

```
$this->widget('ext.chart.BarChart', array(
	'data'=>$data, // Chart data
	'stacked'=>true, // If chart bars should be stacked. Default is false.
	'barType'=>'soft', // Type of chart bars. Can be 'soft', 'round', 'sharp' or 'square'. Default is 'soft'.
	'chartType'=>'horizontal', // Type of the chart. Can be either 'vertical' or 'horizontal'. Default is 'vertical'.
	//Settings for the chart's label. Params are 'left' and 'top'. Could be 'auto'.
	// In this case label would be centered in corresponding direction.
	'label'=>array(
		'left'=>'auto', // Distance from the widget's left side to the middle of the label text.
		'top'=>10, // Distance from the widget's top side to the middle of the label text.
		'text'=>'Sinmple Pie Chart', // Label text
		'font'=>'10px sans-serif', // Label font settings, default is '12px sans-serif'
	),
	// Settings for bar chart
	'options'=>array(
		'top'=>10, // Distance from the widget's left side to the left side of the bar chart.
		'left'=>10, // Distance from the widget's top side to the top side of the bar chart.
		'width'=>300, // Width of the bar chart
		'height'=>220, // Height of the bar chart
	),
	// Set of the JavaScript event handlers for the chart. Array indexe has to be a valid event name.
	// Value can be either a string or an array. String is for event that needs one callback function.
	// array is for event that needs multiple handlers.
	'eventHandlers'=>array(
		'click'=>'function(){alert($(this).attr("id"));}',
		'hover'=>array(
			'function(){alert("In!");}',
			'function(){alert("Out!");}'
		),
	),
	// HTML options for the widget container
	'htmlOptions'=>array(
		'style'=>'width: 300px; height:240px;'
	),
));

```

Data for this type of widget have to be in following format:

```
array(
	array(10, 20, 30),
	array(30, 20, 50),
	array(20, 80, 10),
	array(15, 25, 35),
)

```

Each subarray is a set of values for one chart item and can contain any number of items.

Credits
-------

[](#credits)

This extension is brought to you by [CleverTech](http://clevertech.biz/).

###  Health Score

25

—

LowBetter than 35% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 60% 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/261a6249c6f605f3956a2fae40fbb813f6b2e1e6f2bf806180c851a965426e54?d=identicon)[cebe](/maintainers/cebe)

![](https://www.gravatar.com/avatar/fc29e4e7068a00fe9b9db37b8aadda1db6020adcacef810461e47b99c2b150e6?d=identicon)[samdark](/maintainers/samdark)

---

Top Contributors

[![farmani](https://avatars.githubusercontent.com/u/1329580?v=4)](https://github.com/farmani "farmani (3 commits)")[![cebe](https://avatars.githubusercontent.com/u/189796?v=4)](https://github.com/cebe "cebe (1 commits)")[![samdark](https://avatars.githubusercontent.com/u/47294?v=4)](https://github.com/samdark "samdark (1 commits)")

### Embed Badge

![Health badge](/badges/yiiext-chart/health.svg)

```
[![Health](https://phpackages.com/badges/yiiext-chart/health.svg)](https://phpackages.com/packages/yiiext-chart)
```

###  Alternatives

[phstc/jquery-dateformat

jQuery Plugin to format Date outputs using JavaScript.

67622.3k1](/packages/phstc-jquery-dateformat)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)