I want to generate a Google annotated timeline graph with variables from an PHP array, but always got a "undefined variable" error.
<?php
$years = array(1991, 1992, 1993, 1994);
$graphs = array(20, 30, 40, 50);
echo<<<_END
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'>
</script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Data');
data.addRows([
<?php
for ($i=0; $i<=3; $i++){
echo "[new Date(" . $years[$i] . ", 1, 1), " . $graphs[$i] . "],";
/* output
[new Date(1991, 1, 1), 20],
[new Date(1992, 1, 1), 30],
etc..
*/
}
?>
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
<div id='chart_div1' style='width: 700px; height: 240px;'>
</div>
</body>
</html>
_END;
?>
Why are you trying to do a php loop inside your heredoc? Just close your php code and let the html code parse seperately -
<?php
$years = array(1991, 1992, 1993, 1994);
$graphs = array(20, 30, 40, 50);
?>
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'>
</script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Data');
data.addRows([
<?php
for ($i=0; $i<=3; $i++){
echo "[new Date(" . $years[$i] . ", 1, 1), " . $graphs[$i] . "],";
/* output
[new Date(1991, 1, 1), 20],
[new Date(1992, 1, 1), 30],
etc..
*/
}
?>
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div1'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
<div id='chart_div1' style='width: 700px; height: 240px;'>
</div>
</body>
</html>
with doing that the code runs fine - see http://phpfiddle.org/main/code/fki-b1i
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 need to execute this .php file for different IE versions but the following errors appear when I emulate to:
IE 8:"gvjs_VL" is undefined.
IE <8: "JSON" is undefined.
I have tried also to use json2 when the IE version was <= 8 but it did not solve the issue.
What could be happening?
Thank you in advance. :)
<!DOCTYPE html>
<?php
$chartData = array(array("Area" , "Number of people"),
array("A" , 5000),
array("B" , 8000),
array("C" , 400),
array("D" , 40000),
array("E" , 1000),
array("F" , 1400 ));
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chartContainer">
<div id="piechart" class="piechart">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable( <?php echo json_encode($chartData, JSON_NUMERIC_CHECK); ?>);
// Optional; add a title and set the width and height of the chart
var options = {fontName:'Arial', legend:{position: 'labeled', maxLines:15, alignment:'start'},
textStyle: {color: 'black', fontSize: 30},
pieHole: 0.4, sliceVisibilityThreshold:0.0,
chartArea: {
width: "100%",
top: "0%",
left: "0%"},
};
// Display the chart inside the div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</div>
</div>
</body>
I am not able to run your PHP code so I try to test the Google Charts Sample with JS.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Output in IE browser:
If you check the source code then you can notice that Google Charts using SVG in their charts. SVG is not supported in IE <= 8.
Reference:
SVG (basic support)
This can be the one of the reason that it is not working in IE <=8 versions.
At present, IE 8 and earlier versions are not supported. It is recommended to upgrade to IE 11 browser. It can help to avoid this issue.
I am using chart.js in php program to print chart using jquery but not able to display chart
I have also included bootstrap files in my original code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 400px;height:400px;">
<canvas id="myChart" width="400" height="400" style="color: red;"></canvas>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
$(document).ready(function(){
var data1 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'My First dataset',
backgroundColor: '#16a085',
data: [10, 5, 2, 20, 30, 45]
}]
};
var options1 = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var ctx = $('#myChart');
var piechart = new Chart(ctx).Bar(data1,options1);
});
</script>
</body>
</html>
Not able to display graph using
var piechart = new Chart(ctx).Bar(data1,options1);
but i can display chart using
var piechart = new Chart(ctx,{
type:'bar',
data:data1 ,
options: options1,
});
But I want to display chart using 1st method
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 a problem loading a PHP file using .get (even used .load) with the google calendar Javascript included in the file. Here is an example:
index.php
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
$(document).live('ready',function(){
$('#insidefolders').load('file.php', function () {
});
});
*/
$.get('file.php', function show_province(e){
$('#insidefolders').html(e);
});
});
</script>
</head>
<body>
<div id="insidefolders"></div>
</body>
file.php:
<div id="chart_div" style="width: 320px; height: 150px;" ></div>
The thing is, I need the chart to be shown in the file.php file. I tried to create it inside the index.php and then clone it, but that did not work either.
So again, I'm just trying to load file.php inside index.php, but the google calendar javascript inside index.php won't load to the div inside index.php
Any help or suggestions?
I don't understand perfectly the problem, but maybe you should initialize the calendar in the callback of $.get
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
$.get('file.php', function show_province(e){
$('#insidefolders').html(e);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});