How to create areachart with Mysql dynamic data

data.php

								
									<?php
									header('Content-Type: application/json');

									$conn = mysqli_connect("localhost","root","","phpgraphs");

									$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";

									$result = mysqli_query($conn,$sqlQuery);

									$data = array();
									foreach ($result as $row) {
										$data[] = $row;
									}

									mysqli_close($conn);

									echo json_encode($data);
									?>

index.php

								
									<!DOCTYPE html>
									<html>
									<head>
									  <title>Creating dynamic data chart using PHP and Chart.js</title>
									  <style type="text/css">
									    BODY {
									      width: 550PX;
									    }

									    #chart-container {
									      width: 100%;
									      height: auto;
									    }
									    .card {
									      position: relative;
									      display: -webkit-box;
									      display: -ms-flexbox;
									      display: flex;
									      -webkit-box-orient: vertical;
									      -webkit-box-direction: normal;
									      -ms-flex-direction: column;
									      flex-direction: column;
									      min-width: 0;
									      word-wrap: break-word;
									      background-color: #fff;
									      background-clip: border-box;
									      border: 1px solid rgba(0, 0, 0, 0.125);
									      border-radius: 0.25rem;
									    }

									    .card-body {
									      -webkit-box-flex: 1;
									      -ms-flex: 1 1 auto;
									      flex: 1 1 auto;
									      padding: 1.25rem;
									    }
									  </style>
									  <script type="text/javascript" src="js/jquery.min.js"></script>
									  <script type="text/javascript" src="js/Chart.min.js"></script>
									</head>
									<body>
									  <div class="card-body">
									    <p>How to create Area Chart with Mysql dynamic data </p>
									    <div class="card"  id="chart-container">
									      <canvas id="graphCanvas"></canvas>
									    </div>
									  </div>

									  <script type="text/javascript">
									    $(document).ready(function(){
									      $.ajax({
									        url: "data.php",
									        method: "GET",
									        success: function(data){
									          console.log(data);
									          var name = [];
									          var marks = [];

									          for (var i in data){
									            name.push(data[i].student_name);

									            marks.push(data[i].marks);
									          }
									          var chartdata = {
									            labels: name,
									            datasets: [{
									              label: 'Student Marks',
									              backgroundColor : [ '#00c0ef'],
									              hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
									              hoverBorderColor: 'rgba(230, 236, 235, 0.75)',
									              data: marks

									            }]
									          };
									          var graphTarget = $("#graphCanvas");
									          var barGraph = new Chart(graphTarget, {
									            type: 'line',
									            data: chartdata,
									            options: {
									              scales: {
									                yAxes: [{
									                  ticks: {
									                    beginAtZero: true
									                  }
									                }]
									              }
									            }
									          });
									        },
									        error: function(data) {
									          console.log(data);
									        }

									      });
									    });
									  </script>
									</body>
									</html>

Download

Comments