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>
Related
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 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'm trying to remove product from session cart.I'm sending request from Ajax to event on click and nothing happens.Here is my code.I don't get any response,like the button at all don't work anything. I on button press to erase id from session data and remove product div.
function removeFromBasket(item) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert('item removed')
}
else if(xmlhttp.status == 400) {
alert("request error 400");
}
else{
alert("something went wrong");
}
};
xmlhttp.open("GET","cart.php?remove="+item,true);
xmlhttp.send();
}
cart.php
<?php
require "cfg.php";
if(isset($_GET['remove'])){
$id = $_GET['remove'];
$items = $_SESSION["cart"];
if(($key = array_search($id, $items)) !== false) {
unset($items[$key]);
$ses = $_SESSION["cart"] = array_values($items);
}
print_r($ses);
die();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<?php
$cart = Session::get("cart");
$cartItems = array_keys($cart);
$q = "select * from items where id in (".implode(",",$cartItems).")";
$db = Database::getInstance();
$res = $db->_db->query($q);
foreach($res as $item){
?>
<form method="post" action="" class='.remove'>
<div style='border:1px solid blue;padding:4px;'>
<?=$item['name']?> (<?=$cart[$item['id']]?>)
<input class='glyphicon glyphicon-remove' onclick='removeFromBasket(<?= $cart[$item['id']] ?>)' name='submit' type='button' value='Remove' >
</div>
<?php
}
?>
I want to connect my index.php page with ngconnect.php and want to display my table record.
This is my index.php page below.................
<html>
<head>
<title>first ng app recieve data from database</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<script>
$(function(){
var app = angular.module('myapp',[]);
app.controller('myctrl',function($scope,$http){
$http({method:'GET', url:'ngconnect.php'}).success(function(response){
$scope.names = response;
});
});
});
</script>
</body>
</html>
This is my ngconnect.php page below.............
<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = mysql_connect($servername, $username, $password);
if (!$conn) {
die("Connection failed: " . $conn->connect_error);
} else {
$db_selected = mysql_select_db('dsc');
if (!$db_selected) {
die ('Can\'t use dsc : ' . mysql_error());
} else {
$result = mysql_query('SELECT * from user');
if (!$result) {
die('Invalid query: ' . mysql_error());
} else {
$data = array();
while ($row = mysql_fetch_array($result)) {
$data[] = $row;
}
echo json_encode($data);
}
}
}
mysql_close($conn);
?>
Why my data is not being display?
ngconnect.php does display the following.....
[{"0":"1","user_id":"1","1":"Amit","first_name":"Amit","2":"","middle_name":"","3":"Kushwaha","last_name":"Kushwaha","4":"akushwaha.softvisionindia#gmail.com","email":"akushwaha.softvisionindia#gmail.com","5":"2","rate_dsc_2":"2","6":"3","rate_dsc_3":"3","7":"4","rate_token":"4","8":"e10adc3949ba59abbe56e057f20f883e","password":"e10adc3949ba59abbe56e057f20f883e","9":"Enabled","status":"Enabled","10":"8858234949","phone":"8858234949","11":"NULL","forget_link":"NULL","12":"00:00:00","forget_time":"00:00:00"},{"0":"2","user_id":"2","1":"Sandeep","first_name":"Sandeep","2":"","middle_name":"","3":"Tripathi","last_name":"Tripathi","4":"sandeep.softvisionindia#gmail.com","email":"sandeep.softvisionindia#gmail.com","5":"10","rate_dsc_2":"10","6":"20","rate_dsc_3":"20","7":"30","rate_token":"30","8":"e10adc3949ba59abbe56e057f20f883e","password":"e10adc3949ba59abbe56e057f20f883e","9":"Enabled","status":"Enabled","10":"9936882864","phone":"9936882864","11":"","forget_link":"","12":"00:00:00","forget_time":"00:00:00"}]
Try these codes..Hope it will help You..
I assume that your responce is in json format (array of object) as you posted your responce of php file..
<html>
<head>
<title>first ng app recieve data from database</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('myctrl', function ($scope, $http) {
$http.get('ngconnect.php').success(function(data) {
$scope.names = data;
});
});
</script>
</body>
</html>
In My Project I am having some javascript to implement my work, but it is not taking when I am starting the page,but it is working after reloading the page.
Here is the code:
<?php
require_once"session.php";
$slat =$_GET['slat'];
$slang =$_GET['slang'];
$elat =$_GET['elat'];
$elang =$_GET['elang'];
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php require_once"header.php";?>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Near My Location Contacts</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* function refreshPage() {
alert('dfg');
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
}
refreshPage();*/
//<![CDATA[
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
//var haight = new google.maps.LatLng(37.7699298, -122.4469157);
//var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
var haight = new google.maps.LatLng(<?php echo $slat;?>,<?php echo $slang;?>);
var oceanBeach = new google.maps.LatLng(<?php echo $elat;?>,<?php echo $elang;?>);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var request = {
origin:haight,
destination:oceanBeach,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();calcRoute()">
<div data-role=page id=nmContacts >
<div data-role=header data-theme="e" >
Back</font>
<h1 align="left"><font size="2px">Near My Contacts</font></h1>
</div>
<div data-role=content style="width:100%;height:100%;">
<div data-role=content id="map_canvas" style="width:95%; height:300px"></div>
<div id="directionsPanel" style="width:97%;height 100%"></div>
</div>
</body>
</html>
In the above I am having body onload it is not working at the first time after refreshing only it is working.
Here is the answer:
Before You are calling to this page You have to specify in href like the following
assume that you are having the following link to load:
sample
here `href="external" You have to specify otherwise it wont work.....