Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buttflattery/jqueryvisualize
jquery visualize is a extension for YII framework to draw charts for presentation , using FILAMENT GROUP script & jQuery
https://github.com/buttflattery/jqueryvisualize
Last synced: about 1 month ago
JSON representation
jquery visualize is a extension for YII framework to draw charts for presentation , using FILAMENT GROUP script & jQuery
- Host: GitHub
- URL: https://github.com/buttflattery/jqueryvisualize
- Owner: buttflattery
- License: mit
- Created: 2014-11-16T22:30:17.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T16:04:59.000Z (about 6 years ago)
- Last Synced: 2023-05-22T05:26:32.327Z (over 1 year ago)
- Language: PHP
- Size: 124 KB
- Stars: 9
- Watchers: 7
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# YII JqueryVisualize
### Introduction
The plugin is created originaly by the filament group
http://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html
Demo Page: http://www.filamentgroup.com/examples/jqueryui-visualize/vanilla.html
## Integration in Yii Framework
This extension is tested with Yii 1.1.15 will work for lower version too
## Installation
unzip the jqueryVisualize.zip to you extensions directory
```php
application/extension/jqueryVisualize
```
Direct import into page
```php
Yii::import('ext.jqueryVisualize.jqueryVisualize');
```
OR Add to autoloading in application/config/main.php
```php
'import' => array(
'ext.jqueryVisualize.jqueryVisualize',
```
# How the Visualize plugin works
### Example 1 : BAR CHARTS
create a table inside your view
```html
2009 Employee Sales by Department
food
auto
household
furniture
kitchen
bath
Mary
190
160
40
120
30
70
Tom
3
40
30
45
35
49
Brad
10
180
10
85
25
79
Kate
40
80
90
25
15
119
```
Provide an id to the table and then use it as a selector you can use the classname or even element name for selector but it is preferred to use an id.
### Calling the widget
There are various options for he plugin which can be configured please see https://github.com/filamentgroup/jQuery-Visualize for more detail
you can pass all available options in the plugin to the extension see bellow
```php
widget('ext.jqueryVisualize.jqueryVisualize',
array(
'type'=>'bar',
'width'=>500,
'selector'=>'#employe-data',
)
);
?>
```
you can even hide the source table after populating the graph, and provide custom title for the charts if you want see the below example, if you are listing the standard listing quota for any site user.
### Example 2: using AREA STYLE & Hiding Source table
```html
-
Quota
Available
Used
Consumption
20
5
15
```
### Calling the widget
```php
widget('ext.jqueryVisualize.jqueryVisualize',
array(
'type'=>'area',
'width'=>500,
'title'=>'Custom Title separate than table heading',
'selector'=>'#stadardquota',
'hideContainer'=>TRUE //default is FALSE
)
);
?>
```
# Working demo
http://yiidemos.omaraslam.com/jqueryvisualize/index