PHP code example of practically / yii2-chartjs

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

practically / yii2-chartjs example snippets

use practically\chartjs\Chart;

echo Chart::widget([
    'type' => Chart::TYPE_BAR,
    'datasets' => [
        [
            'data' => [
                'Label 1' => 10,
                'Label 2' => 20,
                'Label 3' => 30
            ]
        ]
    ]
]);

echo Chart::widget([
    'type' => Chart::TYPE_BAR,
    'datasets' => [
        [
            'query' => Model::find()
                ->select('type')
                ->addSelect('count(*) as data')
                ->groupBy('type')
                ->createCommand(),
            'labelAttribute' => 'type'
        ]
    ]
]);

echo Chart::widget([
    'type' => Chart::TYPE_SCATTER,
    'datasets' => [
        [
            'query' => Model::find()
                ->select('type')
                ->addSelect('sum(column_one) as x')
                ->addSelect('sum(column_two) as y')
                ->groupBy('type')
                ->createCommand(),
            'labelAttribute' => 'type'
        ]
    ]
]);

echo Chart::widget([
    ...

    'options' => [
        'class' => 'chart',
        'data-attribute' => 'my-value'
    ],

    ...
]);

echo Chart::widget([
    ...

    'clientOptions' => [
        'title' => [
            'display' => true,
            'text' => 'My New Title',
        ],
        'legend' => ['display' => false],
    ]

    ...
]);

echo Chart::widget([
    ...

     'clientOptions' => [
        'scales' => [
            'yAxes' => [
                [
                    'ticks' => [
						'min' => 0,
						'max' => 100,
						'callback' => new JsExpression('function(value, index, values) {
                             return \'£\'+value;
                        }')
                    ],
					'scaleLabel' => [
						'display' => true,
						'labelString' => 'Average (%)',
					]
				]
			]
        ],
        'tooltips' => [
            'callbacks' => [
                'label' => new JsExpression('function(tooltipItem, chart) {
                    var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || \'\';
                    return datasetLabel + \' £\'+tooltipItem.yLabel;
                }')
            ]
        ]
    ]

    ...
]);

echo Chart::widget([
    ...

     'clientOptions' => [
        'scales' => [
            'y' => [
				'min' => 0,
				'max' => 100,
				'title' => [
					'display' => true,
					'text' => 'Average (%)',
				],
				'ticks' => [
					'callback' => new JsExpression('function(value, index, values) {
							return \'£\'+value;
					}')
				]
            ]
        ],
		'plugins' => [
			'tooltip' => [
				'callbacks' => [
					'label' => new JsExpression('function(context) {
						return \'£\'+context.chart.data.labels[context.dataIndex];
					}')
				]
			]
		]
    ]

    ...
]);

Chart::widget([
    'type' => Chart::TYPE_DOUGHNUT,
    'jsVar' => 'DoughnutChart',
    'jsEvents' => [
        'onclick' => new JsExpression('function(e) {
            var el = DoughnutChart.getElementAtEvent(e);
            window.location.href = "/search/ + el[0]._model.label;
        }')
    ]
]);