This is the MorrisJS widget. It's a very simple API for drawing line and bar charts.
The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies.
To install, either run
$ composer require antishov/yii2-morrisjs
or add
"antishov/yii2-morrisjs": "@stable"
to the require section of your composer.json file.
use antishov\Morris;
use yii\web\JsExpression;
echo Morris\Line::widget([
'resize' => true,
'gridTextSize' => 11,
'element' => 'lineChart',
'data' => [
['date' => '14/06/2017', 'value' => 2],
['date' => '15/06/2017', 'value' => 4],
['date' => '16/06/2017', 'value' => 1]
],
'xKey' => 'date',
'yKeys' => ['value'],
'labels' => ['Impressions'],
'xLabels' => 'day',
'yLabelFormat' => new JsExpression(
'function (y) {if (y === parseInt(y, 10)) {return y;}else {return "";}}'
),
'yMin' => 'auto 40',
'lineColors' => ['rgb(123, 204, 221)'],
'pointFillColors' => ['rgb(82, 188, 211)'],
]);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.
gridTextSize - Set the point size of the axis labels (default: 12).
element - Identifier that will be assigned to the chart.
data - The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options.
xKey - A string containing the name of the attribute that contains date (X) values (see available formats at spec).
yKeys - A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted).
labels - A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option).
xLabels - Sets the x axis labelling interval. By default the interval will be automatically computed (see valid interval strings at spec).
yLabelFormat - function that accepts y-values and formats them for display as y-axis labels.
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].
lineColors - lineColors Array containing colors for the series lines/points.
pointFillColors - Colors for the series points. By default uses the same values as lineColors.
use antishov\Morris;
use yii\web\JsExpression;
echo Morris\Bar::widget([
'element' => 'barChart',
'data' => [
['date' => '2017-06-14', 'value' => 2.36],
['date' => '2017-06-15', 'value' => 0.79],
['date' => '2017-06-16', 'value' => 9.99]
],
'xKey' => 'date',
'yKeys' => ['value'],
'labels' => ['Revenue'],
'barColors' => ['rgb(82, 188, 211)', 'rgb(49, 167, 193)'],
]);element - Identifier that will be assigned to the chart.
data - The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options.
xKey - A string containing the name of the attribute that contains date (X) values (see available formats at spec).
yKeys - A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted).
labels - A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option).
barColors - Array containing colors for the series bars.
yii2-morrisjs is released under the MIT License. See the bundled LICENSE.md for details.