|
| 1 | +yii2-morrisjs |
| 2 | +=================== |
| 3 | + |
| 4 | +This is the [MorrisJS](http://morrisjs.github.io/morris.js/index.html) widget. It's a very simple API for drawing line and bar charts. |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
| 8 | +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). Check the [composer.json](https://github.com/antishov/yii2-morrisjs/blob/master/composer.json) for this extension's requirements and dependencies. |
| 9 | + |
| 10 | +To install, either run |
| 11 | + |
| 12 | +``` |
| 13 | +$ composer require antishov/yii2-morrisjs |
| 14 | +``` |
| 15 | + |
| 16 | +or add |
| 17 | + |
| 18 | +``` |
| 19 | +"antishov/yii2-morrisjs": "@stable" |
| 20 | +``` |
| 21 | + |
| 22 | +to the `require` section of your `composer.json` file. |
| 23 | + |
| 24 | +## Usage |
| 25 | + |
| 26 | +### Line Chart |
| 27 | + |
| 28 | +#### Example of code |
| 29 | +```php |
| 30 | +use antishov\Morris; |
| 31 | +use yii\web\JsExpression; |
| 32 | + |
| 33 | +echo Morris\Line::widget([ |
| 34 | + 'resize' => true, |
| 35 | + 'gridTextSize' => 11, |
| 36 | + 'element' => 'lineChart', |
| 37 | + 'data' => [ |
| 38 | + ['date' => '14/06/2017', 'value' => 2], |
| 39 | + ['date' => '15/06/2017', 'value' => 4], |
| 40 | + ['date' => '16/06/2017', 'value' => 1] |
| 41 | + ], |
| 42 | + 'xKey' => 'date', |
| 43 | + 'yKeys' => ['value'], |
| 44 | + 'labels' => ['Impressions'], |
| 45 | + 'xLabels' => 'day', |
| 46 | + 'yLabelFormat' => new JsExpression( |
| 47 | + 'function (y) {if (y === parseInt(y, 10)) {return y;}else {return "";}}' |
| 48 | + ), |
| 49 | + 'yMin' => 'auto 40', |
| 50 | + 'lineColors' => ['rgb(123, 204, 221)'], |
| 51 | + 'pointFillColors' => ['rgb(82, 188, 211)'], |
| 52 | + ]); |
| 53 | +``` |
| 54 | + |
| 55 | +#### Properties |
| 56 | +`resize` - Set to `true` to enable automatic resizing when the containing element resizes. (default: `false`). This has a significant performance impact, so is disabled by default. |
| 57 | + |
| 58 | +`gridTextSize` - Set the point size of the axis labels (default: `12`). |
| 59 | + |
| 60 | +`element` - Identifier that will be assigned to the chart. |
| 61 | + |
| 62 | +`data` - The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options. |
| 63 | + |
| 64 | +`xKey` - A string containing the name of the attribute that contains date (X) values (see available formats at [spec](http://morrisjs.github.io/morris.js/lines.html)). |
| 65 | + |
| 66 | +`yKeys` - A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted). |
| 67 | + |
| 68 | +`labels` - A list of strings containing labels for the data series to be plotted (corresponding to the values in the `ykeys` option). |
| 69 | + |
| 70 | +`xLabels` - Sets the x axis labelling interval. By default the interval will be automatically computed (see valid interval strings at [spec](http://morrisjs.github.io/morris.js/lines.html)). |
| 71 | + |
| 72 | +`yLabelFormat` - function that accepts y-values and formats them for display as y-axis labels. |
| 73 | + |
| 74 | +`yMin` - Min. bound for Y-values. Alternatively, set this to `'auto'` to compute automatically, or `'auto [num]'` to automatically compute and ensure that the min y-value is at most `[num]`. |
| 75 | + |
| 76 | +`lineColors` - lineColors Array containing colors for the series lines/points. |
| 77 | + |
| 78 | +`pointFillColors` - Colors for the series points. By default uses the same values as `lineColors`. |
| 79 | + |
| 80 | + |
| 81 | +### Bar Chart |
| 82 | + |
| 83 | +``` php |
| 84 | +use antishov\Morris; |
| 85 | +use yii\web\JsExpression; |
| 86 | + |
| 87 | +echo Morris\Bar::widget([ |
| 88 | + 'element' => 'barChart', |
| 89 | + 'data' => [ |
| 90 | + ['date' => '2017-06-14', 'value' => 2.36], |
| 91 | + ['date' => '2017-06-15', 'value' => 0.79], |
| 92 | + ['date' => '2017-06-16', 'value' => 9.99] |
| 93 | + ], |
| 94 | + 'xKey' => 'date', |
| 95 | + 'yKeys' => ['value'], |
| 96 | + 'labels' => ['Revenue'], |
| 97 | + 'barColors' => ['rgb(82, 188, 211)', 'rgb(49, 167, 193)'], |
| 98 | + ]); |
| 99 | +``` |
| 100 | +#### Properties |
| 101 | +`element` - Identifier that will be assigned to the chart. |
| 102 | + |
| 103 | +`data` - The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options. |
| 104 | + |
| 105 | +`xKey` - A string containing the name of the attribute that contains date (X) values (see available formats at [spec](http://morrisjs.github.io/morris.js/lines.html)). |
| 106 | + |
| 107 | +`yKeys` - A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted). |
| 108 | + |
| 109 | +`labels` - A list of strings containing labels for the data series to be plotted (corresponding to the values in the `ykeys` option). |
| 110 | + |
| 111 | +`barColors` - Array containing colors for the series bars. |
| 112 | + |
| 113 | +## License |
| 114 | + |
| 115 | +**yii2-morrisjs** is released under the MIT License. See the bundled `LICENSE.md` for details. |
0 commit comments