bar chart using chart js in php mysql

Solutions on MaxInterview for bar chart using chart js in php mysql by the best coders in the world

showing results for - "bar chart using chart js in php mysql"

26 May 2016

1CREATE TABLE `tblsales` (  `SalesId` int(11) NOT NULL,  `Product` varchar(90) NOT NULL,  `TotalSales` double NOT NULL) ENGINE=InnoDB DEFAULT CHARSET=latin1; ---- Dumping data for table `tblsales`-- INSERT INTO `tblsales` (`SalesId`, `Product`, `TotalSales`) VALUES(1, 'Surf Powder', 1400),(2, 'Mr. Clean Powder', 800),(3, 'Tide Powder', 5052),(4, 'Ariel Powder', 8030); ---- Indexes for dumped tables-- ---- Indexes for table `tblsales`--ALTER TABLE `tblsales`  ADD PRIMARY KEY (`SalesId`); ---- AUTO_INCREMENT for dumped tables-- ---- AUTO_INCREMENT for table `tblsales`--ALTER TABLE `tblsales`  MODIFY `SalesId` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

source

Greta

04 Jan 2019

1<?php
2 
3include("db.php");
4 
5$query = "select jan,feb,march,april,may,june,july from  saleschart";
6$result = mysqli_query($conn,$query);
7 
8if(mysqli_num_rows($result) >= 1) {
9    while ($row = mysqli_fetch_assoc($result)) {
10 
11        $jan = $row['jan'];
12        $feb = $row['feb'];
13        $march = $row['march'];
14        $april = $row['april'];
15        $may = $row['may'];
16        $june = $row['june'];
17        $july = $row['july'];
18    }
19}
20    else
21    {
22    echo "somting went wrong";
23 
24    }
25?>
26 
27 
28<html>
29 
30<head>
31 
32    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css" rel="stylesheet">
33    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" rel="stylesheet">
34 
35</head>
36<body>
37 
38 
39 
40<canvas id="myChart" style="height: auto; width: 500px;"></canvas>
41 
42<?php
43 
44echo "<input type='hidden' id= 'jan' value = '$jan' >";
45echo "<input type='hidden' id= 'feb' value = '$feb' >";
46echo "<input type='hidden' id= 'march' value = '$march' >";
47echo "<input type='hidden' id= 'april' value = '$april' >";
48echo "<input type='hidden' id= 'may' value = '$may' >";
49echo "<input type='hidden' id= 'june' value = '$june' >";
50echo "<input type='hidden' id= 'july' value = '$july' >";
51 
52?>
53<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
54<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
55<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
56<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
57 
58 
59<script>
60    var jan = document.getElementById("jan").value;
61    var feb = document.getElementById("feb").value;
62    var march = document.getElementById("march").value;
63    var april = document.getElementById("april").value;
64    var may = document.getElementById("may").value;
65    var june = document.getElementById("june").value;
66    var july = document.getElementById("july").value;
67 
68    window.onload = function()
69    {
70        var randomScalingFactor = function() {
71            return Math.round(Math.random() * 100);
72        };
73        var config = {
74            type: 'bar',
75            data: {
76                borderColor : "#fffff",
77                datasets: [{
78                    data: [
79                        jan,
80                        feb,
81                        march,
82                        april,
83                        may,
84                        june,
85                        july
86                    ],
87                    borderColor : "#fff",
88                    borderWidth : "3",
89                    hoverBorderColor : "#000",
90 
91                    label: 'Monthly Sales Report',
92 
93                    backgroundColor: [
94                        "#0190ff",
95                        "#56d798",
96                        "#ff8397",
97                        "#6970d5",
98                        "#f312cb",
99                        "#ff0060",
100                        "#ffe400"
101 
102                    ],
103                    hoverBackgroundColor: [
104                        "#f38b4a",
105                        "#56d798",
106                        "#ff8397",
107                        "#6970d5",
108                        "#ffe400"
109                    ]
110                }],
111 
112                labels: [
113                    'Jan',
114                    'Feb',
115                    'March',
116                    'April',
117                    'May',
118                    'June',
119                    'July'
120                ]
121            },
122 
123            options: {
124                responsive: true
125 
126            }
127        };
128        var ctx = document.getElementById('myChart').getContext('2d');
129        window.myPie = new Chart(ctx, config);
130 
131 
132    };
133</script>
134 
135</body>
136 
137</html>
138

source