Pie Chart Semantic UI theme
Pie chart reading from database
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' => [ // Different colors for each segment 'rgba(255, 99, 132, 0.2)', // Red - S24_2841 'rgba(54, 162, 235, 0.2)', // Blue - S24_3420 'rgba(255, 206, 86, 0.2)', // Yellow - S24_3949 'rgba(75, 192, 192, 0.2)', // Green - S24_4278 'rgba(153, 102, 255, 0.2)', // Purple - S32_4289 'rgba(255, 159, 64, 0.2)' // Orange - S50_1341 ], 'borderColor' => [ // Different border colors for each segment 'rgba(255, 99, 132, 1)', // Red - S24_2841 'rgba(54, 162, 235, 1)', // Blue - S24_3420 'rgba(255, 206, 86, 1)', // Yellow - S24_3949 'rgba(75, 192, 192, 1)', // Green - S24_4278 'rgba(153, 102, 255, 1)', // Purple - S32_4289 'rgba(255, 159, 64, 1)' // Orange - S50_1341 ], 'borderWidth' => 1 // Border width for each segment ] ], 'pie', // Chart type (e.g., 'pie') [ 'plugins' => [ 'legend' => ['display' => true] // Display the legend ] ] // Custom options (e.g., 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(); ?>
Ordernumber | Productcode | Quantityordered | Priceeach | Orderlinenumber |
---|---|---|---|---|
10100 | S18_4409 | 22 | 75.46 | 4 |
10101 | S18_2325 | 25 | 108.12 | 4 |
10101 | S18_2795 | 26 | 167.09 | 1 |
10101 | S24_1937 | 45 | 32.53 | 3 |
10101 | S24_2022 | 46 | 44.35 | 2 |
10102 | S18_1342 | 390 | 95.55 | 2 |
10102 | S18_1367 | 41 | 43.13 | 1 |
10103 | S10_1949 | 26 | 214.3 | 11 |
10103 | S10_4962 | 42 | 119.67 | 4 |
10103 | S12_1666 | 27 | 121.64 | 8 |