{"id":16317854,"url":"https://github.com/buttflattery/jqueryvisualize","last_synced_at":"2025-10-25T17:30:50.689Z","repository":{"id":23369119,"uuid":"26730409","full_name":"buttflattery/jqueryVisualize","owner":"buttflattery","description":"jquery visualize is a extension for YII framework to draw charts for presentation , using FILAMENT GROUP script \u0026 jQuery","archived":false,"fork":false,"pushed_at":"2018-10-22T16:04:59.000Z","size":127,"stargazers_count":9,"open_issues_count":0,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-31T09:42:13.300Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buttflattery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-16T22:30:17.000Z","updated_at":"2018-10-22T16:05:00.000Z","dependencies_parsed_at":"2022-08-05T22:16:16.101Z","dependency_job_id":null,"html_url":"https://github.com/buttflattery/jqueryVisualize","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2FjqueryVisualize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2FjqueryVisualize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2FjqueryVisualize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2FjqueryVisualize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buttflattery","download_url":"https://codeload.github.com/buttflattery/jqueryVisualize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238183856,"owners_count":19430209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T22:09:25.396Z","updated_at":"2025-10-25T17:30:50.243Z","avatar_url":"https://github.com/buttflattery.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YII JqueryVisualize\n\n### Introduction \n\nThe plugin is created originaly by the filament group \nhttp://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html\n\nDemo Page: http://www.filamentgroup.com/examples/jqueryui-visualize/vanilla.html\n\n## Integration in Yii Framework \n    This extension is tested with Yii 1.1.15 will work for lower version too \n\n## Installation \nunzip the jqueryVisualize.zip to you extensions directory\n\n```php\napplication/extension/jqueryVisualize\n```\nDirect import into page \n```php\nYii::import('ext.jqueryVisualize.jqueryVisualize');\n```\nOR Add to autoloading in application/config/main.php\n```php\n'import' =\u003e array(\n'ext.jqueryVisualize.jqueryVisualize',\n```\n\n# How the Visualize plugin works\n\n### Example 1 : BAR CHARTS\n\ncreate a table inside your view \n```html\n\u003ctable id=\"employe-data\"\u003e\n        \u003ccaption\u003e2009 Employee Sales by Department\u003c/caption\u003e\n        \u003cthead\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003cth scope=\"col\"\u003efood\u003c/th\u003e\n            \u003cth scope=\"col\"\u003eauto\u003c/th\u003e\n            \u003cth scope=\"col\"\u003ehousehold\u003c/th\u003e\n            \u003cth scope=\"col\"\u003efurniture\u003c/th\u003e\n            \u003cth scope=\"col\"\u003ekitchen\u003c/th\u003e\n            \u003cth scope=\"col\"\u003ebath\u003c/th\u003e\n        \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003cth scope=\"row\"\u003eMary\u003c/th\u003e\n            \u003ctd\u003e190\u003c/td\u003e\n            \u003ctd\u003e160\u003c/td\u003e\n            \u003ctd\u003e40\u003c/td\u003e\n            \u003ctd\u003e120\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n            \u003ctd\u003e70\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth scope=\"row\"\u003eTom\u003c/th\u003e\n            \u003ctd\u003e3\u003c/td\u003e\n            \u003ctd\u003e40\u003c/td\u003e\n            \u003ctd\u003e30\u003c/td\u003e\n            \u003ctd\u003e45\u003c/td\u003e\n            \u003ctd\u003e35\u003c/td\u003e\n            \u003ctd\u003e49\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth scope=\"row\"\u003eBrad\u003c/th\u003e\n            \u003ctd\u003e10\u003c/td\u003e\n            \u003ctd\u003e180\u003c/td\u003e\n            \u003ctd\u003e10\u003c/td\u003e\n            \u003ctd\u003e85\u003c/td\u003e\n            \u003ctd\u003e25\u003c/td\u003e\n            \u003ctd\u003e79\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003cth scope=\"row\"\u003eKate\u003c/th\u003e\n            \u003ctd\u003e40\u003c/td\u003e\n            \u003ctd\u003e80\u003c/td\u003e\n            \u003ctd\u003e90\u003c/td\u003e\n            \u003ctd\u003e25\u003c/td\u003e\n            \u003ctd\u003e15\u003c/td\u003e\n            \u003ctd\u003e119\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n```\nProvide 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.\n\n### Calling the widget\n\nThere are various options for he plugin which can be configured please see https://github.com/filamentgroup/jQuery-Visualize for more detail \nyou can pass all available options in the plugin to the extension see bellow\n```php\n\u003c?php\n    $this-\u003ewidget('ext.jqueryVisualize.jqueryVisualize',\n        array(\n            'type'=\u003e'bar',\n            'width'=\u003e500,\n            'selector'=\u003e'#employe-data',\n        )\n    );\n?\u003e\n```\nyou 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.\n\n### Example 2: using AREA STYLE \u0026 Hiding Source table \n\n```html\n\u003ctable id=\"stadardquota\" \u003e\u003c!--Table Contents Start here--\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003cth style=\"text-align:center;\" scope=\"col\"\u003eQuota\u003c/th\u003e\n        \u003cth style=\"text-align:center;\" scope=\"col\"\u003eAvailable\u003c/th\u003e\n        \u003cth style=\"text-align:center;\" scope=\"col\"\u003eUsed\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003cth style=\"text-align:center;\" scope=\"col\"\u003eConsumption\u003c/th\u003e\n        \u003ctd data-title=\"Quota\" style=\"text-align:center;\"\u003e20\u003c/td\u003e\n        \u003ctd data-title=\"Available\" style=\"text-align:center;\"\u003e5\u003c/td\u003e\n        \u003ctd data-title=\"Used\" style=\"text-align:center;\"\u003e15\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\u003c!--Table Contents End here--\u003e\n```\n### Calling the widget\n\n```php\n\u003c?php\n$this-\u003ewidget('ext.jqueryVisualize.jqueryVisualize',\n    array(\n        'type'=\u003e'area',\n        'width'=\u003e500,\n        'title'=\u003e'Custom Title separate than table heading',\n        'selector'=\u003e'#stadardquota',\n        'hideContainer'=\u003eTRUE //default is FALSE\n    )\n);\n?\u003e\n```\n# Working demo \n\nhttp://yiidemos.omaraslam.com/jqueryvisualize/index\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttflattery%2Fjqueryvisualize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttflattery%2Fjqueryvisualize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttflattery%2Fjqueryvisualize/lists"}