Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2amigos/yii2-chartjs-widget
ChartJs Widget For Yii2
https://github.com/2amigos/yii2-chartjs-widget
2amigos chartjs chartjs-widget charts php yii
Last synced: 6 days ago
JSON representation
ChartJs Widget For Yii2
- Host: GitHub
- URL: https://github.com/2amigos/yii2-chartjs-widget
- Owner: 2amigos
- License: other
- Archived: true
- Created: 2014-02-04T15:02:04.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2022-02-15T07:24:09.000Z (almost 3 years ago)
- Last Synced: 2024-09-22T22:01:56.752Z (4 months ago)
- Topics: 2amigos, chartjs, chartjs-widget, charts, php, yii
- Language: PHP
- Homepage: https://2amigos.us
- Size: 71.3 KB
- Stars: 108
- Watchers: 34
- Forks: 67
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ChartJs Widget
==============
[](https://github.com/2amigos/yii2-chartjs-widget/tags)
[](LICENSE.md)
[](https://travis-ci.org/2amigos/yii2-chartjs-widget)
[](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget/code-structure)
[](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget)
[](https://packagist.org/packages/2amigos/yii2-chartjs-widget)
[](https://styleci.io/repos/16515084)
Renders a [ChartJs plugin](http://www.chartjs.org/docs/) widget
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/). This requires the
composer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already
set.
Either run
```
composer require 2amigos/yii2-chartjs-widget:~2.0
```
or add
```json
"2amigos/yii2-chartjs-widget" : "~2.0"
```
to the require section of your application's `composer.json` file.
Usage
-----
The following types are supported:
- Line
- Bar
- Radar
- Polar
- Pie
- Doughnut
- Bubble
- Scatter
- Area
- Mixed
The following example is using the `Line` type of chart. Please, check [ChartJs plugin](http://www.chartjs.org/docs/)
documentation for the different types supported by the plugin.
```
use dosamigos\chartjs\ChartJs;
= ChartJs::widget([
'type' => 'line',
'options' => [
'height' => 400,
'width' => 400
],
'data' => [
'labels' => ["January", "February", "March", "April", "May", "June", "July"],
'datasets' => [
[
'label' => "My First dataset",
'backgroundColor' => "rgba(179,181,198,0.2)",
'borderColor' => "rgba(179,181,198,1)",
'pointBackgroundColor' => "rgba(179,181,198,1)",
'pointBorderColor' => "#fff",
'pointHoverBackgroundColor' => "#fff",
'pointHoverBorderColor' => "rgba(179,181,198,1)",
'data' => [65, 59, 90, 81, 56, 55, 40]
],
[
'label' => "My Second dataset",
'backgroundColor' => "rgba(255,99,132,0.2)",
'borderColor' => "rgba(255,99,132,1)",
'pointBackgroundColor' => "rgba(255,99,132,1)",
'pointBorderColor' => "#fff",
'pointHoverBackgroundColor' => "#fff",
'pointHoverBorderColor' => "rgba(255,99,132,1)",
'data' => [28, 48, 40, 19, 96, 27, 100]
]
]
]
]);
?>
```
Plugins usage example (displaying percentages on the Pie Chart):
```
echo ChartJs::widget([
'type' => 'pie',
'id' => 'structurePie',
'options' => [
'height' => 200,
'width' => 400,
],
'data' => [
'radius' => "90%",
'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels
'datasets' => [
[
'data' => ['35.6', '17.5', '46.9'], // Your dataset
'label' => '',
'backgroundColor' => [
'#ADC3FF',
'#FF9A9A',
'rgba(190, 124, 145, 0.8)'
],
'borderColor' => [
'#fff',
'#fff',
'#fff'
],
'borderWidth' => 1,
'hoverBorderColor'=>["#999","#999","#999"],
]
]
],
'clientOptions' => [
'legend' => [
'display' => false,
'position' => 'bottom',
'labels' => [
'fontSize' => 14,
'fontColor' => "#425062",
]
],
'tooltips' => [
'enabled' => true,
'intersect' => true
],
'hover' => [
'mode' => false
],
'maintainAspectRatio' => false,
],
'plugins' =>
new \yii\web\JsExpression('
[{
afterDatasetsDraw: function(chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString()+'%';
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
}]')
])
```
Further Information
-------------------
ChartJs has lots of configuration options. For further information, please check the
[ChartJs plugin](http://www.chartjs.org/docs/) website.
Contributing
------------
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
Credits
-------
- [Antonio Ramirez](https://github.com/tonydspaniard)
- [All Contributors](../../contributors)
License
-------
The BSD License (BSD). Please see [License File](LICENSE.md) for more information.
> [](http://www.2amigos.us)
> Custom Software | Web & Mobile Software Development
> [www.2amigos.us](https://2amigos.us)