I'm trying to get a Graph from mySQL database, but somehow it doesn't show a graph on my webpage.
This is the graph.html file, which should be showing the graph on the webpage.
<h1>Graphs</h1>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var jsonData = null;
var json = $.ajax({
url: "data.php", // make this url point to the data file
dataType: "json",
async: false,
success: (
function(data) {
jsonData = data;
})
}).responseText;
// Create and populate the data table.
var data = new google.visualization.DataTable(jsonData);
// Create and draw the visualization.
var chart= new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 500px; height: 400px;"></div>
</body>
</html>
In the browser I get an error saying:
Uncaught (in promise) TypeError: $.ajax is not a function and
Error: Could not establish connection. receiving end does not exist.
Any idea how to fix this?
Thanks.
Edit:
In the head I've changed: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> to <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"></script>, I tought i used a slim version of jquery, so i've chand the head of the html file, but it still doesn't work.
I tried downloading jquery using npm install jquery, but that doesn't do anything for either.
Most of my code for the html page is from https://developers.google.com/chart/interactive/docs/php_example.
So i'm kind of lost where to look for errors.
Related
Trying to recreate a simple example of html page with a Highstock plot with no success. Seem to do the same thing as in multiple examples I found online, but the plot is still empty.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 130,
marginBottom: 25,
},
title: {
text: 'test plot'
},
xAxis: {
type: 'datetime',
categories: []
},
yAxis: {
text: 'value'
},
series: [{name:'myline',data:'<?php $data = array(2,3,1,4); echo json_encode($data) ?>'}]
}
chart = new Highcharts.Chart(options);
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
If I change the series line to
series: [{name:'myline',data:[2,3,1,4]}]
it works. So, the problem must be on this line and with the php script.
However, I can't make it to work with php. Tried printing a string with properly formatted numbers, json_encrode and some other things, but can't seem to make it work. All I see in such case is chart with no line on it. Printing out result from php execution script doesn't seem to produce the output of the script as well, only an empty line... What am I doing wrong?
It turned out to be a stupid mistake due to the fact that I'm a noob in this. I had to set up a web server on my computer (I used LAMP) and put my php file into /var/www/ directory. Apter that this data:<?php $data = array(2,3,1,4); echo json_encode($data); ?> works as it should.
I'm new to backboneJS so i have a problem sync the data from PHP server with backbone that i dont even get the json data from the php server to backbone model!Help me
Here is my php code
$data = array('1'=>array('id'=> 1, 'description'=>'Pick up milk', 'status'=> 'incomplete' ));
echo json_encode($data);
and the backbone js code
<html>
<head>
<script src="jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({});
var todoItem = new TodoItem();
todoItem.url = '/backboneJS/todo.php';
console.log(todoItem.fetch());
</script>
<body>
</body>
</html>
I cant get the json data from the php to the backbone.What wrong with my code ?
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script type="text/javascript">
var TodoModel = Backbone.Model.extend({
urlRoot: '/backboneJS/todo.php',
initialize: function(){
// Place init message or else
}
});
var todoItem = new TodoModel();
todoItem.fetch({
success: function(todoResult){
console.log(todoResult);
console.log(todoItem.get(1));
}
});
</script>
</html>
Sticking to design pattern also, if you call your todoItem outside of nested function its likely to be executed before the actual fetch() is performed. Tested locally.
I'm trying to bind a JQXListbox to JSON data and display two fields in the result.
I want to access the datafields in the source object as strings in order to concatenate them so as I can set the resulting string as the displayMember property of jqxListBox. I've tried calling ToString() on the source.datafields[x] array but that doesn't work either.
I'm not sure if the terminology was correct there. Thanks for any help you can give.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="scripts/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css">
<link href="scripts/jqwidgets/styles/jqx.classic.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxdata.js" type="text/javascript"></script>
<script src="scripts/jqwidgets/jqxlistbox.js" type="text/javascript"></script>
</head>
<body>
<div id="jqxlistbox"></div>
<script type="text/javascript">
var string;
$(document).ready(function() {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{name: 'firstname'},
{name: 'lastname'}
],
url: 'my url is here'
};
string = source.datafields[0] + source.datafields[1];
alert(string);
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxlistbox").jqxListBox(
{
source: dataAdapter,
theme: 'classic',
width: 200,
height: 250,
displayMember: 'string',
valueMember: 'firstname'
});
});
</script>
</body>
</html>
I think that the "beforeLoadComplete" callback of the jqxDataAdapter plug-in will help you to customize the loaded data through the plug-in. For more information about that function, please look at: jqxDataAdapter plug-in
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);
?>
Recently I'm starting to use jquery, when trying to popup a modal form using jquery its won't working for me, the css file and javascript files are keeping locally. Please see the code snippet below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
alert('test');
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<body>
<?php
echo '<link rel="stylesheet" type="text/css" href="jquery-ui.css">';
?>
<button id="opener">Open the dialog</button>
</body>
Please correct me if I did any mistake. Thanks all.
You need to include:
modal: true,
in your dialog definition like this:
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
modal: true,
title: 'Basic Dialog'
});