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>
Related
I have a Google column chart which is working as expected except that some of the month labels won't show. All of the months have data in them so I am puzzled as why some are not showing. As I am not an expert in mysql or php, I would love someone to point me in the right direction.
See image screenshot:
Screen shot
<?php
$connection = mysqli_connect('localhost', 'root', '', 'farmrex');
$result = mysqli_query($connection, "SELECT
MONTHNAME(expense_date) AS month,
SUM(cost) AS total
FROM
expenses
WHERE
expense_date > NOW() - INTERVAL 12 MONTH
GROUP BY
YEAR(expense_date), MONTH(expense_date)");
//if($result){
// echo "CONNECTED";
//}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Expense Amount'],
<?php
if(mysqli_num_rows($result)> 0){
while($row = mysqli_fetch_array($result)){
echo "['".$row['month']."', ".$row['total']."],";
}
}
?>
]);
var options = {
chart: {
title: 'Monthly Expenses',
subtitle: 'Last 12 months of expenses',
width: 5000,
height: 500
},
vAxis: {
title: 'Expense Amount',
format: '#,##0.00',
format: 'currency'
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<section>
<div id="columnchart" style="width: 900px; height: 500px;"></div>
</section>
</body>
</html>
All good! I managed to fix the issue by using abbreviated month names.
Changed:
MONTHNAME(expense_date) AS month,
to:
DATE_FORMAT(expense_date, '%b') AS month,
I'm creating a simple bar chart using Google Charts with the data fetched from Mysql Database. The chart is displayed properly but I'm unable to format the title of the graph. I have referred to many sites and I'm sure the syntax for 'titleTextStyle' is fine. But the title does not change with the options at all. Can somebody tell me where the problem lies ?
I have attached my full code below.
Thanks in advance.
<?php
include("toconnect.php");
$result = mysqli_query($connection,"SELECT Product_name,COUNT(*) FROM Items_Sold GROUP BY Product_name");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product Name', 'Frequency'],
<?php
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result))
{
echo "['".$row["Product_name"]."','".$row["COUNT(*)"]."'],";
}
}
?>
]);
var options = {
chart: {
title: "Frequently Bought items",titleTextStyle:{ color: '#007DB0',fontName: "Times",fontSize: 60,bold: true},
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;display:inline-block;"></div>
</body>
</html>
you are working with a material chart...
google.charts.Bar
the list of features not working in Material charts can be found here...
Tracking Issue for Material Chart Feature Parity #2143
which includes...
titleTextStyle
try working with a classic chart instead...
google.visualization.ColumnChart
with option...
theme: 'material'
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 using php to plot a graph using flot. The query works fine but no graph is being displayed when I run the code. A blank space is coming up where the graph should be. Here is what I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Graph</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Flot Graph</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<?php
$mysqli=new mysqli('localhost','root',"",'simpledb');
$sql="select name, age from `people` where age=23";
$results = $mysqli->query($sql);
if ($results)
{
while ($row=$results->fetch_assoc())
{
$dataset1[] = array($row['name'],$row['age']);
}
}
else
{
echo "Error";
}
?>
<script type="text/javascript">
var dataset1 = <?php echo json_encode($dataset1); ?>;
$(function ()
{
$.plot($("#placeholder"), [
{
data: dataset1,
bars: {show: true}
}
]);
});
</script>
</body>
</html>
It looks like your x values are strings, yet you haven't included the categories plugin.
Thanks everyone. I got it to work. I'm not sure what the problem was but it worked after I changed the javascript part to :
$(function ()
{
$.plot("#placeholder", [ dataset1 ], {
series: {
bars: {
show:true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength:0
}
});
});
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>