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
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 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 json for transfer the information between php and javascript but doesn't work.
The query it's okay, i check it
The result of the query named "dia" is a date and "importe" is a number(float)
Any idea ?
Thanks for the help
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi" > </script>
</head>
<body>
<div id="line_chart" style="width: 100%; height: 500px"></div>
<?php
$consulta = "SELECT fecha as dia,SUM(importe) as importe FROM tfg.reservas WHERE fecha < '2019-05-31' AND fecha > '2019-05-20' GROUP BY DAY(fecha) asc;";
$json = array();
$resultado = mysqli_query($conexion,$consulta);
if ($resultado->num_rows > 0) {
while($fila = mysqli_fetch_array($resultado)) {
$dataRow = array(
$fila['dia'],
$fila['importe'],
);
array_push($json, $dataRow);
}
}
$jsonstring = json_encode($json);
?>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable([
[{type: 'date', label: 'dia'}, {type: 'number', label: 'importe'}]
]);
data.addRows(<?= $jsonstring ?>);
var options = {
title:'Sensors Data',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
I'm having problem with calling php page with ajax. When I click the button, the chart.php is not displayed. Both of the buttons don't work. The target php files are the same with different data only, so I included only one of the chart.php pages. How can I fix this? please. Thanks for your help!
Index.php code:
<!DOCTYPE html>
<html>
<head>
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="etc/main.css" />
<script type="text/javascript" src="etc/jquery-2.1.4.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<button id='actbutton1'> Chart1</button>
<button id='actbutton2'> Chart2</button>
</div>
<div id="contentliquid">
<div id="content">
<div id="querydiv">
</div>
</div>
</div>
<div id="leftcolumn">
</div>
</div>
<script>
document.getElementById('actbutton1').onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "chart1.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("querydiv").innerHTML = xhr.responseText;
}
}
xhr.send();
}
document.getElementById('actbutton2').onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "chart2.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("querydiv").innerHTML = xhr.responseText;
}
}
xhr.send();
}
</script>
</body>
</html>
The page I call with ajax, chart1.php, is this:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
}
$query = "SELECT Week, Omean FROM charts";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Chart1</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Week','Omean'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Week"]."', ".$row["Omean"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Chart1',
'width':1700,
'height':600,
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
legend: { position: 'bottom' }
};
var chart = new
google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options); // <-- use data view
}
</script>
</head>
<body>
<div id="curvechart" style="width: 900px; height: 400px"></div>
</body>
</html>