Created
July 23, 2020 22:24
-
-
Save LucianoCharlesdeSouza/fb2061934b427fd2ab8f643a3772fa47 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE> | |
| <html lang="pt-br"> | |
| <head> | |
| <title>Gráficos com ChartJs</title> | |
| <style> | |
| .container { | |
| width: 800px; | |
| height: 100px; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <canvas class="myChart" width="700" height="350"></canvas> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
| <script> | |
| $(function () { | |
| $(document).ready(function () { | |
| $.ajax({ | |
| url: "inicializado.php", | |
| data: {data: []}, | |
| dataType: 'json', | |
| success: function (response) { | |
| gerarChart(response); | |
| } | |
| }); | |
| }); | |
| function gerarChart(response) { | |
| var ctx = document.getElementsByClassName("myChart"); | |
| window.myChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: response.labels, | |
| datasets: [{ | |
| label: 'Idade do Usuário', | |
| data: response.dados, | |
| backgroundColor: [ | |
| 'rgba(255, 99, 132, 0.2)', | |
| 'rgba(54, 162, 235, 0.2)', | |
| 'rgba(255, 206, 86, 0.2)', | |
| 'rgba(75, 192, 192, 0.2)', | |
| 'rgba(153, 102, 255, 0.2)' | |
| ], | |
| borderColor: [ | |
| 'rgba(255,99,132,1)', | |
| 'rgba(54, 162, 235, 1)', | |
| 'rgba(255, 206, 86, 1)', | |
| 'rgba(75, 192, 192, 1)', | |
| 'rgba(153, 102, 255, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| yAxes: [{ | |
| ticks: { | |
| beginAtZero: true, | |
| fontSize: 15 | |
| }, | |
| }], | |
| xAxes: [{ | |
| ticks: { | |
| fontSize: 15 | |
| } | |
| }] | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $host = 'localhost'; | |
| $dbuser = 'root'; | |
| $dbpass = ''; | |
| $dbname = 'php-brasil'; | |
| $options = [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES UTF8"]; | |
| $db = new PDO("mysql:dbname=" . $dbname . ";host=" . $host, $dbuser, $dbpass, $options); | |
| $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); | |
| $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); | |
| $sql = "SELECT * FROM chart"; | |
| $stmt = $db->prepare($sql); | |
| try { | |
| $stmt->execute(); | |
| if ($stmt->rowCount() > 0) { | |
| $dados = $stmt->fetchAll(); | |
| } | |
| } catch (PDOException $e) { | |
| die($e->getMessage()); | |
| } | |
| $labels = null; | |
| $dados_chart = null; | |
| foreach ($dados as $chart) { | |
| $labels_chart[] = $chart['start']; | |
| $dados_chart[] = $chart['id']; | |
| } | |
| $data = [ | |
| 'labels' => $labels_chart, | |
| 'dados' => $dados_chart | |
| ]; | |
| echo json_encode($data); | |
| exit(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -- phpMyAdmin SQL Dump | |
| -- version 5.0.2 | |
| -- https://www.phpmyadmin.net/ | |
| -- | |
| -- Host: 127.0.0.1 | |
| -- Tempo de geração: 24-Jul-2020 às 00:24 | |
| -- Versão do servidor: 10.4.13-MariaDB | |
| -- versão do PHP: 7.4.7 | |
| SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; | |
| START TRANSACTION; | |
| SET time_zone = "+00:00"; | |
| /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; | |
| /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; | |
| /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; | |
| /*!40101 SET NAMES utf8mb4 */; | |
| -- | |
| -- Banco de dados: `php-brasil` | |
| -- | |
| -- -------------------------------------------------------- | |
| -- | |
| -- Estrutura da tabela `chart` | |
| -- | |
| CREATE TABLE `chart` ( | |
| `id` int(11) NOT NULL, | |
| `start` time NOT NULL | |
| ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; | |
| -- | |
| -- Extraindo dados da tabela `chart` | |
| -- | |
| INSERT INTO `chart` (`id`, `start`) VALUES | |
| (1, '19:11:10'), | |
| (2, '20:30:00'); | |
| -- | |
| -- Índices para tabelas despejadas | |
| -- | |
| -- | |
| -- Índices para tabela `chart` | |
| -- | |
| ALTER TABLE `chart` | |
| ADD PRIMARY KEY (`id`); | |
| -- | |
| -- AUTO_INCREMENT de tabelas despejadas | |
| -- | |
| -- | |
| -- AUTO_INCREMENT de tabela `chart` | |
| -- | |
| ALTER TABLE `chart` | |
| MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; | |
| COMMIT; | |
| /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; | |
| /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; | |
| /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment