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,
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'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 creating one admin panel and i want to show column chart and pie chart. I do some part of code and my pie chart working but colum chart does not showing any result or not a error.
My code below :-
<?php
$serverName = "localhost";
$connectionInfo = array( "Database"=>"TripBrip", "UID"=>"", "PWD"=>"");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date_of_journey', 'Booking'],
<?php
$query = "SELECT count(booking_id) AS count, date_of_journey FROM tbl_booking GROUP BY date_of_journey ORDER BY date_of_journey";
$exec = sqlsrv_query($con,$query);
while($row = sqlsrv_fetch_array($exec)){
echo "['".$row['date_of_journey']."',".$row['count']."],";
}
?>
]);
var options = {
title: 'Date wise booking'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
}
</script>
</head>
<body>
<h3>Column Chart</h3>
<div id="columnchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
any one can help me how can i do for solving this issue
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 trying the below code..
Integrating fullcalendar:-
<doctype! html>
<html lang="urf-8">
<head>
<title>Full calendar</title>
<link rel="stylesheet" href="fullcalendar.css"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#cal').fullCalendar({
// put your options and callbacks here
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agendaWeek,agendaDay'
},
editable: false,
events: "json-events.php",
})
});
</script>
</head>
<body>
<div id="cal" ></div>
</body>
</html>
Json-events.php code:-
<?php
include("connect.php");
$query = "select * from calendar";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
$eventsArray['id'] = $row['calendar_id'];
$eventsArray['title'] = $row['subject'];
$eventsArray['start'] = mktime($row['start_date_time']);
$events[] = $eventsArray;
}
echo json_encode($events);
?>
For debugging when i access json-events.php i am getting the result, but no events are displaying in fullcalendar.
Please help me..
Problem lies in format of your date strings in JSON. Format is not compatible with date formats for plugin. If you convert to UNIX timestamps using strtotime() in php they will work.