Turf-Booking/temp.php at main · TermsBrain/Turf-Booking · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
    <title>Transaction Graph</title>
    <!-- Include Chart.js library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<!-- Create canvas for the chart -->
<canvas id="transactionChart" width="800" height="400"></canvas>

<?php
// Database connection
include 'connection.php';

// Fetch data from the database
$sql = "SELECT created_at, Due, Cash, Total FROM transaction";
$result = $conn->query($sql);

// Extract data for labels, bar dataset, line dataset, and total dataset
$labels = [];
$barData = [];
$lineData = [];
$totalData = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $labels[] = $row["created_at"];
        $barData[] = $row["Due"];
        $lineData[] = $row["Cash"];
        $totalData[] = $row["Total"];
    }
}

$conn->close();
?>

<!-- Script to create the chart -->
<script>
    // Get canvas element
    var ctx = document.getElementById('transactionChart').getContext('2d');

    // Create bar and line chart
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($labels); ?>,
            datasets: [{
                label: 'Due Amount',
                data: <?php echo json_encode($barData); ?>,
                backgroundColor: 'rgba(75, 192, 192, 0.5)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                yAxisID: 'y-axis-bar'
            }, {
                label: 'Cash Amount',
                data: <?php echo json_encode($lineData); ?>,
                type: 'bar',
                fill: false,
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                yAxisID: 'y-axis-line'
            }, {
                label: 'Total Amount',
                data: <?php echo json_encode($totalData); ?>,
                type: 'bar',
                fill: false,
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 2,
                yAxisID: 'y-axis-line'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left',
                    id: 'y-axis-bar'
                }, {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    id: 'y-axis-line'
                }]
            }
        }
    });
</script>

</body>
</html>