README

👁 Latest Version
👁 Software License
👁 Build Status
👁 Coverage Status
👁 Quality Score
👁 Total Downloads
👁 StyleCI

Renders a ChartJs plugin widget

Installation

The preferred way to install this extension is through composer. 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

"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 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 website.

Contributing

Please see CONTRIBUTING for details.

Credits

• Antonio Ramirez
• All Contributors

License

The BSD License (BSD). Please see License File for more information.

👁 2amigOS!

Custom Software | Web & Mobile Software Development
www.2amigos.us