A PHP wrapper for chartjs/Chart.js This project is an expansion of HugoHeneault's repository
Include js/Chart.min.js and js/driver.js before the end of your body (change src according to your project). If you want to use CDN instead see [here](. For CDN see here https://cdnjs.com/libraries/Chart.js)
<html>
<body>
<!-- Your awesome project comes here -->
<!-- And here are Chart.js -->
<script src="js/Chart.min.js"></script>
<script src="js/driver.js"></script>
</body>
</html>Install ChartJS-PHP via composer
{
"repositories": [
{
"type": "git",
"url": "https://github.com/Ejdamm/Chart.js-PHP"
}],
"require": {
"ejdamm/chart.js-php": "dev-master"
}
}Then, create your charts using PHP.
$data = [
'labels' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
'datasets' => [[
'data' =>[8, 7, 8, 9, 6],
'backgroundColor' => '#f2b21a',
'borderColor' => '#e5801d',
'label' => 'Legend'
]]
];
$options = [];
$attributes = ['id' => 'example', 'width' => 500, 'height' => 500];
$Line = new ChartJs\ChartJS('line', $data, $options, $attributes);
// Echo your line
echo $Line;
?>Finally, load these charts with a small piece of javascript when your document is ready
// Pure JS document.ready
(function() {
loadChartJsPhp();
})();<?php
require 'vendor/autoload.php';
use ChartJs\ChartJS;
$data = [
'labels' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
'datasets' => [[
'data' =>[8, 7, 8, 9, 6],
'backgroundColor' => '#f2b21a',
'borderColor' => '#e5801d',
'label' => 'Legend'
]]
];
$options = ['responsive' => false];
$attributes = ['id' => 'example', 'width' => 500, 'height' => 500];
$Line = new ChartJS('line', $data, $options, $attributes);
?><!DOCTYPE html>
<html>
<head>
<title>Chart.js-PHP</title>
</head>
<body>
<?php
echo $Line;
?>
<script src="vendor/Ejdamm/Chart.js-PHP/js/Chart.min.js"></script>
<script src="vendor/Ejdamm/Chart.js-PHP/js/driver.js"></script>
<script>
(function() {
loadChartJsPhp();
})();
</script>
</body>
</html>Full documentation is available at Chart.js website. There you can find what type of charts and associated properties are available.
If you are going to use time axis you need either to include Moment.js or Chart.bundle.js instead of Chart.js to your project. Chart.bundle.js consists of both Chart.js and Moment.js (which is needed for time axis).
Do not hesitate to edit or improve my code with bugfix and new functionalities!