Hi, I have successfully created subdomain and transfered my software files into application directory. Now everything is working fine, but I have a dashboard when Admin logs In, and on dashboard I have displayed Chart using chart js to display some database data as graphical representation.
So in my views/dashboard/ I have,
- index.php
- data.php
- app.js
1 . Here, index.php is the dashboard page and on this page I have a code as below:
<div class="box box-success">
<div class="box-body">
<div class="chart">
<canvas id="barChart" width="50" height="20"></canvas>
</div>
</div>
</div>
- In data.php I have written My SQL query which returns total no of groups each FieldOfficer has.
<?php
header('Content-Type: application/json');
$servername = "";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password,$dbname);
if ($conn->connect_error) {
}
$sql = "SELECT CONCAT(employee.FirstName,' ',employee.LastName) as FullName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";
$result = $conn->query($sql);
if ($result!=null) {
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
}
$conn->close();
print json_encode($data);
In above data.php I have mentioned all my database credentials properly. It works
- Now in app.js I have foll code,
$(document).ready(function(){
$.ajax({
url: "data.php",
method: "GET",
dataType: "json",
success: function(data) {
console.log(data);
var emp = [];
var groups = [];
for(var i in data) {
emp.push(" " +data[i].FirstName);
groups.push(data[i].TotalGroups);
}
var chartdata = {
labels: emp,
datasets : [
{
label: 'SHG Groups',
backgroundColor: 'rgba(200, 200, 200, 200)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: groups
}
]
};
var ctx = document.getElementById("barChart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
Everything works very fine on localhost. Graph is displayed properly on localhost. But on the subdomain it does not shows the Graph. When I inspect the code, The error is as below.
Access to XMLHttpRequest been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
How to resolve this?
