Charts Bootstrap theme
Chartjs Graphs & Charts
HIDE CODE
<style>
canvas{
height: 600px!important;
}
</style>
<?php
// Bar Chart Example - First Instance
$xcrud1 = Xcrud::get_instance();
$xcrud1->table('orderdetails');
$xcrud1->chart_labels(
['S24_2841', 'S24_3420', 'S24_3949', 'S24_4278', 'S32_4289', 'S50_1341'], // Labels
[ // Multiple datasets (even if there's just one)
[
'label' => '# of Quantity Ordered', // Dataset label
'data' => '#select quantityOrdered from orderdetails where id IN (60,61,62,63,64,65)', // Data points
'backgroundColor' => 'rgba(255, 99, 132, 0.2)', // Bar background color
'borderColor' => 'rgba(255, 99, 132, 1)', // Bar border color
'borderWidth' => 1, // Border width
'pointStyle'=> 'circle',
'pointRadius' => 10,
'pointHoverRadius' => 15
],
[
'label' => '# Price of Order', // Dataset label
'data' => '#select priceEach from orderdetails where id IN (60,61,62,63,64,65)', // Data points
'backgroundColor' => 'rgba(30, 23, 132, 0.2)', // Bar background color
'borderColor' => 'rgba(30, 23, 132, 0.2)', // Bar border color
'borderWidth' => 1, // Border width
'pointStyle'=> 'circle',
'pointRadius' => 10,
'pointHoverRadius' => 15
]
],
'line', // Chart type (e.g., 'bar')
[
'scales' => [
'y' => ['beginAtZero' => true] // Custom scale options
],
'plugins' => [
'legend' => ['display' => true], // Custom plugin options (e.g., legend display)
'title' => [
'display' => true,
'text' => 'Point Style: ctx.chart.data.datasets[0].pointStyle',
]
]
] // Custom options (e.g., scale settings, legend display)
);
$xcrud1->chart_view(true);
$xcrud1->unset_add();
$xcrud1->unset_edit();
$xcrud1->unset_remove();
$xcrud1->unset_view();
$xcrud1->unset_csv();
$xcrud1->unset_limitlist();
$xcrud1->unset_numbers();
$xcrud1->unset_pagination();
$xcrud1->unset_print();
$xcrud1->unset_search();
$xcrud1->unset_title();
$xcrud1->unset_sortable();
echo $xcrud1->render();
?>