TUTORIAL || How To MAKE GRAPHS WITH PHP MYSQL AND WITH CHARTJS METHOD

What Will I Learn?

• We will learn how to create Graphics
• We will learn how to wrap data in a graph
• We will learn the system work from the graph

Requirements

• Xampp app
• Text editor
• Browser apps (chrome, Mozilla ferofex, opera, and more)

Difficulty

• Intermediate

Tutorial Contents

Description

Graphics are tools that can be used to communicate information graphically. Includes graphics in documents that can help you describe numerical data, such as comparisons and trends, making it easier for readers to understand it.

ChartJS is one of the libraries that utilize the canvas elements to create graphs that will be displayed through a web browser, we can use the ChartJS library to display report information in graphical form so that it is more easily understood by others than to display data in tabular form. ChartJS itself supports 6 chart types as follows:

• Tipe 1 line chart

source

• Tipe 2 – bar chart

source

• Tipe 3 radar chart

source

• Tipe 4 pola area chart

source

• Tipe 5 pie dan dognot chart

source

• Tipe 6 blue charts

source

Tutorial Contents

• First make sure your Xampp app is already run apache and mysql.
  

  
  
  

• After that create a folder with any name and save that folder in C: \ xampp \ htdocs and then create the index.php file in your folder earlier.

• Now we will take the ChartJS library, which can be done in the first two ways is to download ChartJS here .

• Then extra file Chart.js.zip Into your htdocs I'm here using C: \ xampp \ htdocs \ graph.

• Then open the index.php file that you created earlier and write this script:

"< html>
    < head>
        < title>Learn Make Graphic with PHP< /title>
        < script src="Chart.bundle.js">< /script>
        < style type="text/css">
            .container {
                width: 50%;
                margin: 15px auto;
            }
        < /style>
    < /head>
    < body>
        < div class="container">
            < canvas id="myChart" width="100" height="100">< /canvas>
        < /div>
        < script>
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            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)',
                                'rgba(255, 159, 64, 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)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                },
                options: {
                    scales: {
                        yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    }
                }
            });
        < /script>
    < /body>
< /html> "

• The above is the first way we now discuss the second bit way, the second way we can use the CDN so that we do not need to download the library ChartJS manually, it is certainly easier and its performance so much faster. so its implementation you can change the script index.php on line 4 to be like this:

"< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js">< /script>"

• If you have finished all the next step we test the results by the way we type in our browser Url http: // localhost / graph / , and see the results would be like this:

• then prepare the Database with the name "exercise" after that uatlah table with the name "sales" with size "4 colom s" like this:

• If it's done it will come out like this and fill in a word like this:

• If the tablenya is done now we just need to mengimputkan data into the table. Like this:
  

• For more convenience please copy sql below and run:

'
INSERT INTO `penjualan` VALUES (1,'January',2016,10);
INSERT INTO `penjualan` VALUES (2,'February',2016,12);
INSERT INTO `penjualan` VALUES (3,'Maret',2016,13);
INSERT INTO `penjualan` VALUES (4,'April',2016,18);
INSERT INTO `penjualan` VALUES (5,'May',2017,16);
INSERT INTO `penjualan` VALUES (6,'Juni',2016,14);
INSERT INTO `penjualan` VALUES (7,'July',2016,15);
INSERT INTO `penjualan` VALUES (8,'Agustus',2016,12);
INSERT INTO `penjualan` VALUES (9,'September',2016,19);
INSERT INTO `penjualan` VALUES (10,'Oktober',2016,12);
INSERT INTO `penjualan` VALUES (11,'November',2016,12);
INSERT INTO `penjualan` VALUES (12,'Desember',2016,20);  '

• Once the data is input then it will look like this:

• Now we just need to modify the index.php earlier in order to connect to the database to see the graph from the sales table, and edit it like this:

< ?php
$koneksi = mysqli_connect("localhost", "root", "", "latihan");
$bulan = mysqli_query($koneksi, "SELECT bulan FROM penjualan WHERE tahun='2016' order by id asc");
$penghasilan = mysqli_query($koneksi, "SELECT hasil_penjualan FROM penjualan WHERE tahun='2016' order by id asc");
? >
< html>
< head>
< title>Learn Make Graphic with PHP< /title>
< script src="Chart.bundle.js">< /script>

    < style type="text/css">
        .container {
            width: 50%;
            margin: 15px auto;
        }
    < /style>
< /head>
< body>
    < div class="container">
        < canvas id="myChart" width="100" height="100">< /canvas>
    < /div>
    < script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [< ?php while ($b = mysqli_fetch_array($bulan)) { echo '"' . $b['bulan'] . '",';}?>],
                datasets: [{
                        label: '# of Votes',
                        data: [< ?php while ($p = mysqli_fetch_array($penghasilan)) { echo '"' . $p['hasil_penjualan'] . '",';}?>],
                        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)',
                            'rgba(255, 159, 64, 0.2)',
                            '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)',
                            'rgba(255, 159, 64, 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)',
                            'rgba(255, 159, 64, 1)',
                            '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)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderWidth: 1
                    }]
            },
            options: {
                scales: {
                    yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                }
            }
        } );
    < /script>
< /body> < /html> ' 

• Once done in edit and try running will come out like this:

• And the chart of the sales table is done.

Curriculum

• TUTORIAL || Cara Membuat Form Pencarian Dengan PHP Dan MYSQL [ How To Create Search Form With PHP And MYSQL]

---

Posted on Utopian.io - Rewarding Open Source Contributors

---