{"id":15169492,"url":"https://github.com/2amigos/yii2-chartjs-widget","last_synced_at":"2025-10-01T02:31:14.959Z","repository":{"id":13818617,"uuid":"16515084","full_name":"2amigos/yii2-chartjs-widget","owner":"2amigos","description":"ChartJs Widget For Yii2","archived":true,"fork":false,"pushed_at":"2022-02-15T07:24:09.000Z","size":73,"stargazers_count":108,"open_issues_count":15,"forks_count":67,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-09-22T22:01:56.752Z","etag":null,"topics":["2amigos","chartjs","chartjs-widget","charts","php","yii"],"latest_commit_sha":null,"homepage":"https://2amigos.us","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/2amigos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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-02-04T15:02:04.000Z","updated_at":"2024-07-14T17:46:23.000Z","dependencies_parsed_at":"2022-08-24T13:47:41.445Z","dependency_job_id":null,"html_url":"https://github.com/2amigos/yii2-chartjs-widget","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2amigos%2Fyii2-chartjs-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2amigos%2Fyii2-chartjs-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2amigos%2Fyii2-chartjs-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2amigos%2Fyii2-chartjs-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2amigos","download_url":"https://codeload.github.com/2amigos/yii2-chartjs-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875269,"owners_count":16554660,"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":["2amigos","chartjs","chartjs-widget","charts","php","yii"],"created_at":"2024-09-27T07:02:15.871Z","updated_at":"2025-10-01T02:31:14.632Z","avatar_url":"https://github.com/2amigos.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"ChartJs Widget\n==============\n\n[![Latest Version](https://img.shields.io/github/tag/2amigos/yii2-chartjs-widget.svg?style=flat-square\u0026label=release)](https://github.com/2amigos/yii2-chartjs-widget/tags)\n[![Software License](https://img.shields.io/badge/license-BSD-brightgreen.svg?style=flat-square)](LICENSE.md)\n[![Build Status](https://img.shields.io/travis/2amigos/yii2-chartjs-widget/master.svg?style=flat-square)](https://travis-ci.org/2amigos/yii2-chartjs-widget)\n[![Coverage Status](https://img.shields.io/scrutinizer/coverage/g/2amigos/yii2-chartjs-widget.svg?style=flat-square)](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget/code-structure)\n[![Quality Score](https://img.shields.io/scrutinizer/g/2amigos/yii2-chartjs-widget.svg?style=flat-square)](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget)\n[![Total Downloads](https://poser.pugx.org/2amigos/yii2-chartjs-widget/downloads)](https://packagist.org/packages/2amigos/yii2-chartjs-widget) \n[![StyleCI](https://styleci.io/repos/16515084/shield?branch=master)](https://styleci.io/repos/16515084)\n\nRenders a [ChartJs plugin](http://www.chartjs.org/docs/) widget\n\nInstallation\n------------\nThe preferred way to install this extension is through [composer](http://getcomposer.org/download/). This requires the \ncomposer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already \nset.\n\n\nEither run\n\n```\ncomposer require 2amigos/yii2-chartjs-widget:~2.0\n```\nor add\n\n```json\n\"2amigos/yii2-chartjs-widget\" : \"~2.0\"\n```\n\nto the require section of your application's `composer.json` file.\n\nUsage\n-----\nThe following types are supported: \n\n- Line \n- Bar \n- Radar \n- Polar \n- Pie \n- Doughnut \n- Bubble \n- Scatter \n- Area \n- Mixed\n\nThe following example is using the `Line` type of chart. Please, check [ChartJs plugin](http://www.chartjs.org/docs/) \ndocumentation for the different types supported by the plugin.\n\n```\nuse dosamigos\\chartjs\\ChartJs;\n\n\u003c?= ChartJs::widget([\n    'type' =\u003e 'line',\n    'options' =\u003e [\n        'height' =\u003e 400,\n        'width' =\u003e 400\n    ],\n    'data' =\u003e [\n        'labels' =\u003e [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\"],\n        'datasets' =\u003e [\n            [\n                'label' =\u003e \"My First dataset\",\n                'backgroundColor' =\u003e \"rgba(179,181,198,0.2)\",\n                'borderColor' =\u003e \"rgba(179,181,198,1)\",\n                'pointBackgroundColor' =\u003e \"rgba(179,181,198,1)\",\n                'pointBorderColor' =\u003e \"#fff\",\n                'pointHoverBackgroundColor' =\u003e \"#fff\",\n                'pointHoverBorderColor' =\u003e \"rgba(179,181,198,1)\",\n                'data' =\u003e [65, 59, 90, 81, 56, 55, 40]\n            ],\n            [\n                'label' =\u003e \"My Second dataset\",\n                'backgroundColor' =\u003e \"rgba(255,99,132,0.2)\",\n                'borderColor' =\u003e \"rgba(255,99,132,1)\",\n                'pointBackgroundColor' =\u003e \"rgba(255,99,132,1)\",\n                'pointBorderColor' =\u003e \"#fff\",\n                'pointHoverBackgroundColor' =\u003e \"#fff\",\n                'pointHoverBorderColor' =\u003e \"rgba(255,99,132,1)\",\n                'data' =\u003e [28, 48, 40, 19, 96, 27, 100]\n            ]\n        ]\n    ]\n]);\n?\u003e\n```\nPlugins usage example (displaying percentages on the Pie Chart):\n```\necho ChartJs::widget([\n    'type' =\u003e 'pie',\n    'id' =\u003e 'structurePie',\n    'options' =\u003e [\n        'height' =\u003e 200,\n        'width' =\u003e 400,\n    ],\n    'data' =\u003e [\n        'radius' =\u003e  \"90%\",\n        'labels' =\u003e ['Label 1', 'Label 2', 'Label 3'], // Your labels\n        'datasets' =\u003e [\n            [\n                'data' =\u003e ['35.6', '17.5', '46.9'], // Your dataset\n                'label' =\u003e '',\n                'backgroundColor' =\u003e [\n                        '#ADC3FF',\n                        '#FF9A9A',\n                    'rgba(190, 124, 145, 0.8)'\n                ],\n                'borderColor' =\u003e  [\n                        '#fff',\n                        '#fff',\n                        '#fff'\n                ],\n                'borderWidth' =\u003e 1,\n                'hoverBorderColor'=\u003e[\"#999\",\"#999\",\"#999\"],                \n            ]\n        ]\n    ],\n    'clientOptions' =\u003e [\n        'legend' =\u003e [\n            'display' =\u003e false,\n            'position' =\u003e 'bottom',\n            'labels' =\u003e [\n                'fontSize' =\u003e 14,\n                'fontColor' =\u003e \"#425062\",\n            ]\n        ],\n        'tooltips' =\u003e [\n            'enabled' =\u003e true,\n            'intersect' =\u003e true\n        ],\n        'hover' =\u003e [\n            'mode' =\u003e false\n        ],\n        'maintainAspectRatio' =\u003e false,\n\n    ],\n    'plugins' =\u003e\n        new \\yii\\web\\JsExpression('\n        [{\n            afterDatasetsDraw: function(chart, easing) {\n                var ctx = chart.ctx;\n                chart.data.datasets.forEach(function (dataset, i) {\n                    var meta = chart.getDatasetMeta(i);\n                    if (!meta.hidden) {\n                        meta.data.forEach(function(element, index) {\n                            // Draw the text in black, with the specified font\n                            ctx.fillStyle = 'rgb(0, 0, 0)';\n\n                            var fontSize = 16;\n                            var fontStyle = 'normal';\n                            var fontFamily = 'Helvetica';\n                            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);\n\n                            // Just naively convert to string for now\n                            var dataString = dataset.data[index].toString()+'%';\n\n                            // Make sure alignment settings are correct\n                            ctx.textAlign = 'center';\n                            ctx.textBaseline = 'middle';\n\n                            var padding = 5;\n                            var position = element.tooltipPosition();\n                            ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);\n                        });\n                    }\n                });\n            }\n        }]')\n])\n```\n\n\nFurther Information\n-------------------\nChartJs has lots of configuration options. For further information, please check the\n[ChartJs plugin](http://www.chartjs.org/docs/) website.\n\nContributing\n------------\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\nCredits\n-------\n\n- [Antonio Ramirez](https://github.com/tonydspaniard)\n- [All Contributors](../../contributors)\n\nLicense\n-------\n\nThe BSD License (BSD). Please see [License File](LICENSE.md) for more information.\n\n\u003e [![2amigOS!](http://www.gravatar.com/avatar/55363394d72945ff7ed312556ec041e0.png)](http://www.2amigos.us)  \n\u003e \u003ci\u003eCustom Software | Web \u0026 Mobile Software Development\u003c/i\u003e  \n\u003e [www.2amigos.us](https://2amigos.us)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2amigos%2Fyii2-chartjs-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2amigos%2Fyii2-chartjs-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2amigos%2Fyii2-chartjs-widget/lists"}