Calling chart JS with PHP Data (file structure)How can I prevent SQL injection in PHP?PHP and EnumerationsPHP: Delete an element from an arrayConvert HTML + CSS to PDF with PHP?startsWith() and endsWith() functions in PHPHow do I get PHP errors to display?How Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql

Calling chart JS with PHP Data (file structure)How can I prevent SQL injection in PHP?PHP and EnumerationsPHP: Delete an element from an arrayConvert HTML + CSS to PDF with PHP?startsWith() and endsWith() functions in PHPHow do I get PHP errors to display?How Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql_* functions in PHP?

Partial sums of primes

Can somebody explain Brexit in a few child-proof sentences?

Did US corporations pay demonstrators in the German demonstrations against article 13?

Simple image editor tool to draw a simple box/rectangle in an existing image

Can I rely on these GitHub repository files?

Is there a problem with hiding "forgot password" until it's needed?

Teaching indefinite integrals that require special-casing

Is there a good way to store credentials outside of a password manager?

Latex for-and in equation

Installing PowerShell on 32-bit Kali OS fails

For airliners, what prevents wing strikes on landing in bad weather?

Is the next prime number always the next number divisible by the current prime number, except for any numbers previously divisible by primes?

Organic chemistry Iodoform Reaction

Adding empty element to declared container without declaring type of element

What does the "3am" section means in manpages?

Why is delta-v is the most useful quantity for planning space travel?

What was required to accept "troll"?

Reply ‘no position’ while the job posting is still there (‘HiWi’ position in Germany)

Blender - show edges angles “direction”

What to do when my ideas aren't chosen, when I strongly disagree with the chosen solution?

Is there an wasy way to program in Tikz something like the one in the image?

What do you call the infoboxes with text and sometimes images on the side of a page we find in textbooks?

How will losing mobility of one hand affect my career as a programmer?

node command while defining a coordinate in TikZ

Calling chart JS with PHP Data (file structure)

How can I prevent SQL injection in PHP?PHP and EnumerationsPHP: Delete an element from an arrayConvert HTML + CSS to PDF with PHP?startsWith() and endsWith() functions in PHPHow do I get PHP errors to display?How Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql_* functions in PHP?

Morning all, bit of a long winded one so I'll try to keep it brief.

I'm experimenting with HTML that calls continual PHP themes, rather than writing the code in each HTML (php) page.

For instance, home.php looks like this:

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

You'll see that half way down, I have charts.php which is simply the HTML to chart.js (bootstrap themed) like so:

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

In the root directly (where charts.php is) I have a folder to js/charts/pie.js which contains this:

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

and the php code which I place at the top of charts.php is this:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

Those two echos appear on the page home page in the right place (ie, directly above the first chart), but the chart doesn't show. I suspect it is because of the files being in different locations rather than in one code block.

Could I add the php query to the top of pie.js instead? If I use pretend data in the dataset and labels, the chart appears.

asked Mar 7 at 10:21

Lucero79

1225

Could I add the php query to the top of pie.js instead? Not unless you have explicitly set up .js files to be handled by PHP, which is usually not the case, and probably not recommended.

– Jonnix
Mar 7 at 10:26

add a comment |

Morning all, bit of a long winded one so I'll try to keep it brief.

I'm experimenting with HTML that calls continual PHP themes, rather than writing the code in each HTML (php) page.

For instance, home.php looks like this:

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

You'll see that half way down, I have charts.php which is simply the HTML to chart.js (bootstrap themed) like so:

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

In the root directly (where charts.php is) I have a folder to js/charts/pie.js which contains this:

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

and the php code which I place at the top of charts.php is this:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

Could I add the php query to the top of pie.js instead? If I use pretend data in the dataset and labels, the chart appears.

asked Mar 7 at 10:21

Lucero79

1225

Could I add the php query to the top of pie.js instead? Not unless you have explicitly set up .js files to be handled by PHP, which is usually not the case, and probably not recommended.

– Jonnix
Mar 7 at 10:26

add a comment |

Morning all, bit of a long winded one so I'll try to keep it brief.

I'm experimenting with HTML that calls continual PHP themes, rather than writing the code in each HTML (php) page.

For instance, home.php looks like this:

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

You'll see that half way down, I have charts.php which is simply the HTML to chart.js (bootstrap themed) like so:

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

In the root directly (where charts.php is) I have a folder to js/charts/pie.js which contains this:

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

and the php code which I place at the top of charts.php is this:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

Could I add the php query to the top of pie.js instead? If I use pretend data in the dataset and labels, the chart appears.

asked Mar 7 at 10:21

Lucero79

1225

Morning all, bit of a long winded one so I'll try to keep it brief.

I'm experimenting with HTML that calls continual PHP themes, rather than writing the code in each HTML (php) page.

For instance, home.php looks like this:

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

You'll see that half way down, I have charts.php which is simply the HTML to chart.js (bootstrap themed) like so:

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

In the root directly (where charts.php is) I have a folder to js/charts/pie.js which contains this:

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

and the php code which I place at the top of charts.php is this:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

Could I add the php query to the top of pie.js instead? If I use pretend data in the dataset and labels, the chart appears.

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

<?php include("includes/config.php");?>
<!DOCTYPE html>
<html lang="en">

<head>
 <?php include("includes/head-tag.php");?>
</head>

<body id="page-top">
 <?php include("includes/nav.php");?>

 
 <div id="wrapper">

 <!-- Sidebar -->
 <ul class="sidebar navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#"><i class="fas fa-fw fa-tachometer-alt"></i><span style="margin-left:5px">Dashboard</span></a></li> 
	 <li class="nav-item"><a class="nav-link" href="assets.php"><i class="fas fa-fw fa-server"></i><span style="margin-left:5px">Assets</span></a></li>
	 <li class="nav-item"><a class="nav-link" href="people.php"><i class="fas fa-fw fa-user"></i><span style="margin-left:5px">People</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-chart-bar"></i></i><span style="margin-left:5px">Reports</span></a></li>
	 <li class="nav-item"><a class="nav-link" href=""><i class="fas fa-cogs"></i></i><span style="margin-left:5px">Settings</span></a></li>
 <li class="nav-item"><a class="nav-link" href="logout.php" data-toggle="modal" data-target="#logoutModal"><i class="fas fa-sign-out-alt"></i></i><span style="margin-left:5px">Log Out</span></a></li>
 </ul>


 <div id="content-wrapper">

 <div class="container-fluid">

 <!-- Breadcrumbs-->
 <?php include("includes/breadcrumb.php");?>
		
	 <!-- Card Deck -->
	 <?php include("cards.php");?>


 <!-- DataTables Example -->
 <?php include("charts.php");?>
 

 </div>
 <!-- /.container-fluid -->

 <!-- Sticky Footer -->
	 <?php include("includes/footer.php");?>


 </div>
 <!-- /.content-wrapper -->

 </div>
 <!-- /#wrapper -->

 <!-- Scroll to Top Button-->
 <a class="scroll-to-top rounded" href="#page-top">
 <i class="fas fa-angle-up"></i>
 </a>

 <!-- Logout Modal -->
 <?php include("includes/logout.php");?>

 <!-- Scripts -->
 <?php include("includes/scripts.php");?>

</body>
</html>

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

<div class="card mb-4 border-0">		 
 <div class="card-deck">
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Assets By Type</div>
 <div class="card-body">
 <canvas id="doughnutChart"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-chart-pie"></i> Phone Models</div>
 <div class="card-body">
 <canvas id="doughnutChartPho"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 <div class="card">
 <div class="card-header"><i class="fa fa-laptop"></i> Total Laptops</div>
 <div class="card-body">
 <canvas id="doughnutChartLap"></canvas>
 </div>
 <div class="card-footer">
 <small class="text-muted">Last updated 3 mins ago</small>
 </div>
 </div>
 </div>
	 </div>

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

//doughnut 
 var ctxD = document.getElementById("doughnutChart").getContext('2d');
 var myLineChart = new Chart(ctxD, 
 type: 'doughnut',
 data: 
 labels: <?php echo json_encode($json); ?>,
 datasets: [
 data: <?php echo json_encode($json2); ?>,
 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"],
 ]
 ,
 options: 
 responsive: true
 
 );

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= [];
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
	extract($row);
	$json[]= $type;
	$json2[]= (int)$manufacturer;

echo json_encode($json);
echo json_encode($json2);
?>

php chart.js

asked Mar 7 at 10:21

Lucero79

1225

asked Mar 7 at 10:21

Lucero79

1225

asked Mar 7 at 10:21

Lucero79

1225

asked Mar 7 at 10:21

Lucero79

1225

asked Mar 7 at 10:21

Lucero79

1225

Could I add the php query to the top of pie.js instead? Not unless you have explicitly set up .js files to be handled by PHP, which is usually not the case, and probably not recommended.

– Jonnix
Mar 7 at 10:26

add a comment |

Could I add the php query to the top of pie.js instead? Not unless you have explicitly set up .js files to be handled by PHP, which is usually not the case, and probably not recommended.

– Jonnix
Mar 7 at 10:26

Could I add the php query to the top of pie.js instead? Not unless you have explicitly set up .js files to be handled by PHP, which is usually not the case, and probably not recommended.

– Jonnix
Mar 7 at 10:26

add a comment |

1 Answer
1

active

oldest

votes

ChartJS expects the data in a comma separated statement, such as:

 data: 5, 7, 8, 9;

I suspect the json_encode is confusing it, and would suggest you return strings, rather than arrays:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
 extract($row);
 $json .= "'".$type."',";
 $json2 .= (int)$manufacturer.",";

echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

answered Mar 7 at 11:46

neophytte

301213

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55041372%2fcalling-chart-js-with-php-data-file-structure%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

ChartJS expects the data in a comma separated statement, such as:

 data: 5, 7, 8, 9;

I suspect the json_encode is confusing it, and would suggest you return strings, rather than arrays:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
 extract($row);
 $json .= "'".$type."',";
 $json2 .= (int)$manufacturer.",";

echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

answered Mar 7 at 11:46

neophytte

301213

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

|
show 1 more comment

ChartJS expects the data in a comma separated statement, such as:

 data: 5, 7, 8, 9;

I suspect the json_encode is confusing it, and would suggest you return strings, rather than arrays:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
 extract($row);
 $json .= "'".$type."',";
 $json2 .= (int)$manufacturer.",";

echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

answered Mar 7 at 11:46

neophytte

301213

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

|
show 1 more comment

ChartJS expects the data in a comma separated statement, such as:

 data: 5, 7, 8, 9;

I suspect the json_encode is confusing it, and would suggest you return strings, rather than arrays:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
 extract($row);
 $json .= "'".$type."',";
 $json2 .= (int)$manufacturer.",";

echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

answered Mar 7 at 11:46

neophytte

301213

ChartJS expects the data in a comma separated statement, such as:

 data: 5, 7, 8, 9;

I suspect the json_encode is confusing it, and would suggest you return strings, rather than arrays:

$stmt=$pdo->prepare("SELECT * FROM asset_details");
$stmt->execute(); 
$json= "";
$json2= [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
 extract($row);
 $json .= "'".$type."',";
 $json2 .= (int)$manufacturer.",";

echo $json; // should be 'Red','Green','Blue' ... 
echo $json2; // should be 5,6,9,4 ... etc 
?>

answered Mar 7 at 11:46

neophytte

301213

answered Mar 7 at 11:46

neophytte

301213

answered Mar 7 at 11:46

neophytte

301213

answered Mar 7 at 11:46

neophytte

301213

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

|
show 1 more comment

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

Hmm, interesting, thanks for this. I suspect you are correct. However, the echo test now shows: '1','2',Array1,1, and no chart data still.

– Lucero79
Mar 11 at 11:40

Can you show the output from "SELECT type,manufacturer FROM asset_details" ?

– neophytte
Mar 11 at 12:36

Sure, I get this: type manufacturer 1 1 2 1

– Lucero79
Mar 11 at 13:31

that doesn't seem consistent with the previous output, but try changing the second line to json2 .= $manufacturer.",";

– neophytte
Mar 11 at 22:57

Sorry for the late reply. I have been unwell the last few days. I appreciate your help though, but this still doesn't seem to work. I can see the echos are behaving correctly in as much as I get the ' ' and , , between the data. I also have a Notice: Array to string conversion on line 9 which is the $json2 .= $manufacturer.",";

– Lucero79
Mar 14 at 8:21

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ufdjrw

1 Answer
1

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Post as a guest

Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

1928 у кіно

Захаров Федір Захарович

Ель Греко

1 Answer
1

1 Answer
1

1 Answer
1