i'm working on a project and below is the following code i am using to make a bar chart.
the db table named bar contains, id, factor, score, goal_1, goal_2, goal_3 attributes.
i am not getting an error, but the chart is not showing and blank page is displayed to me.
<?php
$connect = mysqli_connect("localhost","root","","chart");
$query = "SELECT * FROM bar";
$result = mysqli_query($connect, $query);
$chart_data = '';
while ($row = mysqli_fetch_array($result)) {
$chart_data .="{ factor:'".$row["factor"]."', goal_1:'".$row["goal_1"]."', goal_2:'".$row["goal_2"]."', goal_3:'".$row["goal_3"]."'},";
}
$chart_data = substr($chart_data, 0, -2);
?>
<html>
<head>
<title>bar chart project</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div class="container" style="width:900px;">
<div id="chart"></div>
</div>
</body>
</html>
<script type="text/javascript">
Morris.bar({
element: 'chart',
data: [<?php echo $chart_data; ?>],
xkey: 'factor',
ykeys: ['goal_1','goal_2','goal_3'],
labels: ['goal_1','goal_2','goal_3'],
hideHover: 'auto',
});
</script>
Try specifying the columns within the query
$query = "SELECT factor, goal_1, goal_2, goal_3 FROM bar";
and add a this to your code
<div id="chart" class="chart" style=<your preferred dimensions></div>
Related
i am using google pie chart but in chart No data massage show but when i run query and
display it coming perfect but same query for data No data show, below the code
please help me,
while running same query it give perfect result but not in chart
<?php require 'connection.php'; ?>
<?php $query = 'SELECT SBU, count(RG) AS State from regionmaster group by SBU';
$result = mysqli_query($conn, $query);
while ($value = mysqli_fetch_assoc($result)) {
// echo $value['SBU'] . $value['State'];
echo "['".$value['SBU']."',".$value['State']."],";
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pic Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
<?php
while ($Chart = mysqli_fetch_assoc($result)) {
echo "['".$Chart['SBU']."',".$Chart['State']."],";
}
?>
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have been trying to make a graph plot with flot, and have ran into a problem.I Think the problem is with the way m using the php variable with flot Aside from that the graph isn't showing so I must have done something wrong. Below is the graph code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.categories.js"></script>
</head>
<body>
<?php
//CONNECTING TO THE SERVER
$servername = "XXX";
$username = "YYY";
$password = "ZZZ";
conn = new mysqli($servername, $username, $password);
$sql = "SELECT NAME, AGE FROM pro_db";
$result = $conn->query($sql);
$wt=array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
//storing the values in the array
$wt[]=$row;//is this the right way
}
} else {
echo "0 results";
}
?>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
//accessing the array
var data = <?php echo $wt; ?>;
$.plot($("#placeholder"), [data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>
</body>
</html>``
Here's completely working example i made. If something doesn't work - there's some error with data. Try var_dump how your $wt array looks like in the end;
$data = [
['Andrew', 31],
['Helen', 29],
['Dasha', 24],
['Denis', 23]
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.categories.js"></script>
<script>
var data = <?php echo json_encode($data) ?>;
$("#canvas").plot([data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
</script>
</body>
</html>
I am pulling data from a MySQL database and plotting with Flot. My problem is in our DB design.
I have 1 table that contains the following columns:
ID (auto incremented) (key)
Timestamp
SensorData (looks like: 34534.3 32452.4 23454.6 6523.45 67546.4 2233)
I would like to parse out my sensor data so I can create Flot plots with individual sensor data. Right now, I am able to plot the ID vs Timestamp and that works. Here is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
</head>
<body>
<h1>Title</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<?php
$server = "www.freesql.org";
$user="username";
$password="password";
$database = "database";
$connection = mysql_connect($server,$user,$password);
$db = mysql_select_db($database,$connection);
$query = "SELECT Id, localtme FROM varia";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result))
{
$dataset1[] = array($row['Id'],$row['localtme']);
}
?>
<script type="text/javascript">
$(function () {
var dataset1 = <?php echo json_encode($dataset1); ?>;
$.plot($("#placeholder"), [ dataset1 ]);
});
</script>
</body>
</html>
I was trying to create a notifications system for a website with the following code :
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
And the notifications.php :
$userid = $_SESSION[username];
$notifications = array();
$sql = "SELECT appreciation FROM ms_notifications WHERE email = '$userid' AND new = '1'";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
while ($r = mysql_fetch_object($res)) {
$notifications[] = $r->appreciation;
}
$nb_result = mysql_num_rows($res);
}
$sql = "UPDATE ms_notifications SET new = '0' WHERE email = '$userid'";
mysql_query($sql) or die(mysql_error());
echo $nb_result;
Problem is that, as I'm new to jquery/Js, I don't know how to put the result inside of a div. For now it stays on the top of the page, above everything.
I tried that, inside the data function but not working... :
$('#test_app').html(data);
I guess it's a very stupid question but help would be really appreciated ! Thank you very much.
UPDATE : Here the HTML Code
<?php
session_start();
include ('connection/database.php');
include ('login_script.php');
include ('notifications.php');
if($logged_in){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Home</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ms.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/font_i/specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<!-- FONT SCRIPT-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 505; // Background image height
var headerHeight = 59; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#main_logo').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed)
</script>
<!-- NOTIFICATIONS_SCRIPT !!!!!! -->
<script type="text/javascript" charset="utf-8">
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
</script>
<style>
body{
font-family:SommetRoundedLight;
}
</style>
</head>
<body>
<div id="container">
<div id="header_contain">
<div id="test_app">
</div>
</div>
</div>
</body>
</html>
<?php }
else{
echo '<script language="javascript" type="text/javascript">
<!--
window.location.replace("connexion.php");
-->
</script>';
} ?>
Thanks again
Use .append() instead of .html()
Instead of
$('#test_app').html(data);
just use:
$('#test_app').html('<div>' + data + '</div>');
Seems to simple to be it. Am I missing something?
<code>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery.pager.js Test</title>
<link href="Pager.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>
</head>
<body>
$query = "select name from student";
$result = mysql_query(Query);
while($row=mysql_fetch_array($result)){
$student_name = $row['name'];
?>
<h1 id="result"><?php echo $student_name; ?></h1>
<? }
?>
<div id="pager" />
</body>
</html>
</code>
For my above code am not geting the student name , if i remove the pager script , the student name will appear, may i know , why, where i made mistake..
i thing i have to pass somthing to html() , but i am not sure..
while($row=mysql_fetch_array($result)){ $student_name = $row['name']; }
should be
$student_name = NULL;
while($row=mysql_fetch_array($result)){ $student_name .= $row['name']; }