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);
});
Related
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'm trying to get Google Charts to work from a MySQL DB.
I've created an array & can see that it is populated, when viewing source on the live page
However, the chart doesn't appear. Would anyone be able to advise me why this might be?
Head Script
<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', 'Total Orders'],
['2017-9-6',200],['2017-8-6',1500],['2017-7-7',800],['2017-7-3',1,800],['2017-7-2',200],['2017-6-13',10000],['2017-10-5',800],['2017-10-12',4,500],['',],
]);
var options = {
title: 'Orders Per Day'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
}
</script>
Body Script
<h3>Column Chart</h3>
<div id="columnchart" style="width: 900px; height: 500px;"></div>
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
Reading through several posts, I have got the basic idea of creating google charts but I am still not clear with how it is created from data extracted from tables in DB. Some json parsing of objects is done, but not clear with it. I have written some code. Please provide me with some direction ahead.
//chartDraw.php
<html>
<head>
<!--Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>">
<script type="text/javascript">
//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});
//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);
function drawChart(){
var jsonData = $.ajax({
url:"getdata.php",
dataType:"json",
async:false
}).responseText;
//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);
//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart -->
<div id="chart_div"></div>
</body>
</html>
//getdata.php specified in the url property
<?php
mysql_connect('localhost','uname','123456');
mysql_select_db('rcusers');
$sqlquery1="select userid,group_name,req_nodes,actualPE from jobs where userid='zhang' limit 200";
$sqlresult1=mysql_query($sqlquery1);
while($row=mysql_fetch_assoc($sqlresult1)){
$userDetails[]=$row;
}
?>
What next and How am I supposed to send the data to json objects and where? I am confused..
This simple example may be help you
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#test').click(function() {
$.ajax({
type: 'POST',
url: 'fetch_data.php',
dataType: 'json',
cache: false,
success: function(result) {
var data = google.visualization.arrayToDataTable([
['T', result[0]],
['W', result[1]],
['E', result[2]]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
});
});
});
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
click
</body>
</html>
fecth_data.php
<?php
$array = array(1,2,3,4);
echo json_encode($array);
?>