├── .styleci.yml ├── .editorconfig ├── CHANGELOG.md ├── src ├── ChartJsAsset.php └── ChartJs.php ├── CONTRIBUTING.md ├── .php_cs.dist ├── LICENSE.md ├── composer.json ├── CONDUCT.md └── README.md /.styleci.yml: -------------------------------------------------------------------------------- 1 | preset: psr2 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | trim_trailing_whitespace = true 5 | charset = utf-8 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 4 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 2.1.0 - 2017-07-26 4 | 5 | - Chg #26: Updated to latest ChartJs 2.6 (tonydspaniard) 6 | - Fix #25: Correct example code on README (chunlaw) 7 | 8 | > [![2amigOS!](http://www.gravatar.com/avatar/55363394d72945ff7ed312556ec041e0.png)](http://www.2amigos.us) 9 | > Custom Software | Web & Mobile Software Development 10 | > [www.2amigos.us](https://2amigos.us) 11 | -------------------------------------------------------------------------------- /src/ChartJsAsset.php: -------------------------------------------------------------------------------- 1 | 6 | * For the full copyright and license information, please view 7 | * the LICENSE file that was distributed with this source code. 8 | */ 9 | 10 | namespace dosamigos\chartjs; 11 | 12 | use yii\web\AssetBundle; 13 | 14 | /** 15 | * 16 | * ChartPluginAsset 17 | */ 18 | class ChartJsAsset extends AssetBundle 19 | { 20 | public $sourcePath = null; 21 | 22 | public $js = [ 23 | 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js' 24 | ]; 25 | 26 | public $depends = [ 27 | 'yii\web\JqueryAsset', 28 | ]; 29 | } 30 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are **welcome** and will be fully **credited**. 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/2amigos/yii2-datepicker-widget). 6 | 7 | 8 | ## Pull Requests 9 | 10 | - **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](http://pear.php.net/package/PHP_CodeSniffer). 11 | 12 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests. 13 | 14 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 15 | 16 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 17 | 18 | - **Create feature branches** - Don't ask us to pull from your master branch. 19 | 20 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 21 | 22 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting. 23 | 24 | 25 | ## Running Tests 26 | 27 | ``` bash 28 | $ phpunit 29 | ``` 30 | 31 | 32 | **Happy coding**! 33 | -------------------------------------------------------------------------------- /.php_cs.dist: -------------------------------------------------------------------------------- 1 | 5 | For the full copyright and license information, please view 6 | the LICENSE file that was distributed with this source code. 7 | EOF; 8 | 9 | $finder = PhpCsFixer\Finder::create() 10 | ->exclude( 11 | [ 12 | '.github', 13 | 'docs', 14 | 'temp', 15 | 'vendor', 16 | 'runtime', 17 | 'public' 18 | ] 19 | ) 20 | ->in(__DIR__); 21 | 22 | return PhpCsFixer\Config::create() 23 | ->setRules( 24 | [ 25 | '@PSR1' => true, 26 | '@PSR2' => true, 27 | 'header_comment' => ['header' => $header], 28 | 'array_syntax' => ['syntax' => 'short'], 29 | 'combine_consecutive_unsets' => true, 30 | 'no_extra_consecutive_blank_lines' => [ 31 | 'break', 32 | 'continue', 33 | 'extra', 34 | 'return', 35 | 'throw', 36 | 'use', 37 | 'parenthesis_brace_block', 38 | 'square_brace_block', 39 | 'curly_brace_block' 40 | ], 41 | 'no_useless_else' => true, 42 | 'no_useless_return' => true, 43 | 'ordered_class_elements' => true, 44 | 'ordered_imports' => true, 45 | 'phpdoc_add_missing_param_annotation' => true, 46 | 'phpdoc_order' => true, 47 | 'phpdoc_align' => true 48 | ] 49 | ) 50 | ->setFinder($finder); 51 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The BSD License (BSD) 2 | 3 | Copyright (c) 2013-2015, 2amigOS! Consulting Group LLC. 4 | 5 | > Redistribution and use in source and binary forms, with or without modification, 6 | > are permitted provided that the following conditions are met: 7 | > 8 | > Redistributions of source code must retain the above copyright notice, this 9 | > list of conditions and the following disclaimer. 10 | > 11 | > Redistributions in binary form must reproduce the above copyright notice, this 12 | > list of conditions and the following disclaimer in the documentation and/or 13 | > other materials provided with the distribution. 14 | > 15 | > Neither the name of 2amigOS! Consulting Group, LLC. nor the names of its 16 | > contributors may be used to endorse or promote products derived from 17 | > this software without specific prior written permission. 18 | > 19 | >THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | >ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | >WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 | >DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 23 | >ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 | >(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 | >LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 26 | >ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | >(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 28 | >SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2amigos/yii2-chartjs-widget", 3 | "description": "ChartJs widget for Yii2.", 4 | "type": "yii2-extension", 5 | "keywords": [ 6 | "2amigos", 7 | "yii", 8 | "yii2", 9 | "yii 2", 10 | "extension", 11 | "widget", 12 | "chartjs" 13 | ], 14 | "homepage": "http://yiiwheels.com/extension/chartjs-widget", 15 | "license": "BSD-3-Clause", 16 | "authors": [ 17 | { 18 | "name": "2amigOS! Consulting Group", 19 | "email": "hola@2amigos.us", 20 | "homepage": "http://2amigos.us", 21 | "role": "Developer" 22 | } 23 | ], 24 | "support": { 25 | "issues": "https://github.com/2amigos/yii2-chartjs-widget/issues", 26 | "source": "https://github.com/2amigos/yii2-chartjs-widget" 27 | }, 28 | "minimum-stability": "dev", 29 | "prefer-stable": true, 30 | "require": { 31 | "php": ">=7.3", 32 | "yiisoft/yii2": "^2.0", 33 | "nnnick/chartjs": "^2.9" 34 | }, 35 | "require-dev": { 36 | "roave/security-advisories": "dev-master", 37 | "friendsofphp/php-cs-fixer": "^2.16", 38 | "phpunit/phpunit": "^8.5" 39 | }, 40 | "autoload": { 41 | "psr-4": { 42 | "dosamigos\\chartjs\\": "src" 43 | } 44 | }, 45 | "extra": { 46 | "installer-types": ["bower-asset", "npm-asset"], 47 | "branch-alias": { 48 | "dev-master": "1.0-dev" 49 | } 50 | }, 51 | "repositories": [ 52 | { 53 | "type": "composer", 54 | "url": "https://asset-packagist.org" 55 | } 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at `hola@2amigos.us`. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /src/ChartJs.php: -------------------------------------------------------------------------------- 1 | 6 | * For the full copyright and license information, please view 7 | * the LICENSE file that was distributed with this source code. 8 | */ 9 | 10 | namespace dosamigos\chartjs; 11 | 12 | use yii\base\InvalidConfigException; 13 | use yii\base\Widget; 14 | use yii\helpers\Html; 15 | use yii\helpers\Json; 16 | use yii\web\JsExpression; 17 | 18 | /** 19 | * 20 | * Chart renders a canvas ChartJs plugin widget. 21 | */ 22 | class ChartJs extends Widget 23 | { 24 | /** 25 | * @var array the HTML attributes for the widget container tag. 26 | */ 27 | public $options = []; 28 | /** 29 | * @var array the options for the underlying ChartJs JS plugin. 30 | * Please refer to the corresponding ChartJs type plugin Web page for possible options. 31 | * For example, [this page](http://www.chartjs.org/docs/#lineChart) shows 32 | * how to use the "Line chart" plugin. 33 | */ 34 | public $clientOptions = []; 35 | /** 36 | * @var array the datasets configuration options and data to display on the chart. 37 | * See [its documentation](http://www.chartjs.org/docs/) for the different options. 38 | */ 39 | public $data = []; 40 | /** 41 | * @var string the type of chart to display. The possible options are: 42 | * - "Line" : A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the 43 | * comparison of two data sets. 44 | * - "Bar" : A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the 45 | * comparison of multiple data sets side by side. 46 | * - "Radar" : A radar chart is a way of showing multiple data points and the variation between them. They are often 47 | * useful for comparing the points of two or more different data sets 48 | * - "PolarArea" : Polar area charts are similar to pie charts, but each segment has the same angle - the radius of 49 | * the segment differs depending on the value. This type of chart is often useful when we want to show a comparison 50 | * data similar to a pie chart, but also show a scale of values for context. 51 | * - "Pie" : Pie charts are probably the most commonly used chart there are. They are divided into segments, the arc 52 | * of each segment shows a the proportional value of each piece of data. 53 | * - "Doughnut" : Doughnut charts are similar to pie charts, however they have the centre cut out, and are therefore 54 | * shaped more like a doughnut than a pie! 55 | */ 56 | public $type; 57 | /** 58 | * @var array the plugin objects allowing to assign custom callback functions to Chart events. 59 | * See [plugins & events documentation] 60 | * (http://www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api). 61 | */ 62 | public $plugins = []; 63 | 64 | /** 65 | * Initializes the widget. 66 | * This method will register the bootstrap asset bundle. If you override this method, 67 | * make sure you call the parent implementation first. 68 | * @throws InvalidConfigException 69 | */ 70 | public function init() 71 | { 72 | parent::init(); 73 | if ($this->type === null) { 74 | throw new InvalidConfigException("The 'type' option is required"); 75 | } 76 | if (!isset($this->options['id'])) { 77 | $this->options['id'] = $this->getId(); 78 | } 79 | } 80 | 81 | /** 82 | * Renders the widget. 83 | */ 84 | public function run() 85 | { 86 | echo Html::tag('canvas', '', $this->options); 87 | $this->registerClientScript(); 88 | } 89 | 90 | /** 91 | * Registers the required js files and script to initialize ChartJS plugin 92 | */ 93 | protected function registerClientScript(): void 94 | { 95 | $id = $this->options['id']; 96 | $view = $this->getView(); 97 | ChartJsAsset::register($view); 98 | 99 | $config = Json::encode( 100 | [ 101 | 'type' => $this->type, 102 | 'data' => $this->data ?: new JsExpression('{}'), 103 | 'options' => $this->clientOptions ?: new JsExpression('{}'), 104 | 'plugins' => $this->plugins 105 | ] 106 | ); 107 | 108 | $js = ";var chartJS_{$id} = new Chart($('#{$id}'),{$config});"; 109 | $view->registerJs($js); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ChartJs Widget 2 | ============== 3 | 4 | [![Latest Version](https://img.shields.io/github/tag/2amigos/yii2-chartjs-widget.svg?style=flat-square&label=release)](https://github.com/2amigos/yii2-chartjs-widget/tags) 5 | [![Software License](https://img.shields.io/badge/license-BSD-brightgreen.svg?style=flat-square)](LICENSE.md) 6 | [![Build Status](https://img.shields.io/travis/2amigos/yii2-chartjs-widget/master.svg?style=flat-square)](https://travis-ci.org/2amigos/yii2-chartjs-widget) 7 | [![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) 8 | [![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) 9 | [![Total Downloads](https://poser.pugx.org/2amigos/yii2-chartjs-widget/downloads)](https://packagist.org/packages/2amigos/yii2-chartjs-widget) 10 | [![StyleCI](https://styleci.io/repos/16515084/shield?branch=master)](https://styleci.io/repos/16515084) 11 | 12 | Renders a [ChartJs plugin](http://www.chartjs.org/docs/) widget 13 | 14 | Installation 15 | ------------ 16 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). This requires the 17 | composer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already 18 | set. 19 | 20 | 21 | Either run 22 | 23 | ``` 24 | composer require 2amigos/yii2-chartjs-widget:~2.0 25 | ``` 26 | or add 27 | 28 | ```json 29 | "2amigos/yii2-chartjs-widget" : "~2.0" 30 | ``` 31 | 32 | to the require section of your application's `composer.json` file. 33 | 34 | Usage 35 | ----- 36 | The following types are supported: 37 | 38 | - Line 39 | - Bar 40 | - Radar 41 | - Polar 42 | - Pie 43 | - Doughnut 44 | - Bubble 45 | - Scatter 46 | - Area 47 | - Mixed 48 | 49 | The following example is using the `Line` type of chart. Please, check [ChartJs plugin](http://www.chartjs.org/docs/) 50 | documentation for the different types supported by the plugin. 51 | 52 | ``` 53 | use dosamigos\chartjs\ChartJs; 54 | 55 | 'line', 57 | 'options' => [ 58 | 'height' => 400, 59 | 'width' => 400 60 | ], 61 | 'data' => [ 62 | 'labels' => ["January", "February", "March", "April", "May", "June", "July"], 63 | 'datasets' => [ 64 | [ 65 | 'label' => "My First dataset", 66 | 'backgroundColor' => "rgba(179,181,198,0.2)", 67 | 'borderColor' => "rgba(179,181,198,1)", 68 | 'pointBackgroundColor' => "rgba(179,181,198,1)", 69 | 'pointBorderColor' => "#fff", 70 | 'pointHoverBackgroundColor' => "#fff", 71 | 'pointHoverBorderColor' => "rgba(179,181,198,1)", 72 | 'data' => [65, 59, 90, 81, 56, 55, 40] 73 | ], 74 | [ 75 | 'label' => "My Second dataset", 76 | 'backgroundColor' => "rgba(255,99,132,0.2)", 77 | 'borderColor' => "rgba(255,99,132,1)", 78 | 'pointBackgroundColor' => "rgba(255,99,132,1)", 79 | 'pointBorderColor' => "#fff", 80 | 'pointHoverBackgroundColor' => "#fff", 81 | 'pointHoverBorderColor' => "rgba(255,99,132,1)", 82 | 'data' => [28, 48, 40, 19, 96, 27, 100] 83 | ] 84 | ] 85 | ] 86 | ]); 87 | ?> 88 | ``` 89 | Plugins usage example (displaying percentages on the Pie Chart): 90 | ``` 91 | echo ChartJs::widget([ 92 | 'type' => 'pie', 93 | 'id' => 'structurePie', 94 | 'options' => [ 95 | 'height' => 200, 96 | 'width' => 400, 97 | ], 98 | 'data' => [ 99 | 'radius' => "90%", 100 | 'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels 101 | 'datasets' => [ 102 | [ 103 | 'data' => ['35.6', '17.5', '46.9'], // Your dataset 104 | 'label' => '', 105 | 'backgroundColor' => [ 106 | '#ADC3FF', 107 | '#FF9A9A', 108 | 'rgba(190, 124, 145, 0.8)' 109 | ], 110 | 'borderColor' => [ 111 | '#fff', 112 | '#fff', 113 | '#fff' 114 | ], 115 | 'borderWidth' => 1, 116 | 'hoverBorderColor'=>["#999","#999","#999"], 117 | ] 118 | ] 119 | ], 120 | 'clientOptions' => [ 121 | 'legend' => [ 122 | 'display' => false, 123 | 'position' => 'bottom', 124 | 'labels' => [ 125 | 'fontSize' => 14, 126 | 'fontColor' => "#425062", 127 | ] 128 | ], 129 | 'tooltips' => [ 130 | 'enabled' => true, 131 | 'intersect' => true 132 | ], 133 | 'hover' => [ 134 | 'mode' => false 135 | ], 136 | 'maintainAspectRatio' => false, 137 | 138 | ], 139 | 'plugins' => 140 | new \yii\web\JsExpression(' 141 | [{ 142 | afterDatasetsDraw: function(chart, easing) { 143 | var ctx = chart.ctx; 144 | chart.data.datasets.forEach(function (dataset, i) { 145 | var meta = chart.getDatasetMeta(i); 146 | if (!meta.hidden) { 147 | meta.data.forEach(function(element, index) { 148 | // Draw the text in black, with the specified font 149 | ctx.fillStyle = 'rgb(0, 0, 0)'; 150 | 151 | var fontSize = 16; 152 | var fontStyle = 'normal'; 153 | var fontFamily = 'Helvetica'; 154 | ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 155 | 156 | // Just naively convert to string for now 157 | var dataString = dataset.data[index].toString()+'%'; 158 | 159 | // Make sure alignment settings are correct 160 | ctx.textAlign = 'center'; 161 | ctx.textBaseline = 'middle'; 162 | 163 | var padding = 5; 164 | var position = element.tooltipPosition(); 165 | ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); 166 | }); 167 | } 168 | }); 169 | } 170 | }]') 171 | ]) 172 | ``` 173 | 174 | 175 | Further Information 176 | ------------------- 177 | ChartJs has lots of configuration options. For further information, please check the 178 | [ChartJs plugin](http://www.chartjs.org/docs/) website. 179 | 180 | Contributing 181 | ------------ 182 | 183 | Please see [CONTRIBUTING](CONTRIBUTING.md) for details. 184 | 185 | Credits 186 | ------- 187 | 188 | - [Antonio Ramirez](https://github.com/tonydspaniard) 189 | - [All Contributors](../../contributors) 190 | 191 | License 192 | ------- 193 | 194 | The BSD License (BSD). Please see [License File](LICENSE.md) for more information. 195 | 196 | > [![2amigOS!](http://www.gravatar.com/avatar/55363394d72945ff7ed312556ec041e0.png)](http://www.2amigos.us) 197 | > Custom Software | Web & Mobile Software Development 198 | > [www.2amigos.us](https://2amigos.us) 199 | --------------------------------------------------------------------------------