I am new in PHP and JavaScript, i need to create a pie chart using JSON data which will be get from the URL. The JSON data is :
[
{"Domain":"Artificial Intelligence","Count":"46"},
{"Domain":"Data Architecture","Count":"21"},
{"Domain":"Data Science","Count":"50"},
]
The code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js">
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn- na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<?php
# Reading JSN Data from URLS
$jsn_data =
file_get_contents("http://localhost:9080/Badges/reporting/badge_json.php");
<div id="chart"></div>
<script type="text/javascript">
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
<script>
</body>
s</html>
But this code does not work. please tell me how do this ?
dataLabel: "Badge_SubDomain" doesn't exist in your data source.
Maybe try something like ...
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: result,
dataValue: "count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
});
Fix these:
JSON property Count is a string, not an integer
The code is broken, it needs to be fixed
The variable result is not defined anywhere in the <script> tag
The JavaScript snippet is inside <?php/> tag, move it outside
here's the fixed code:
index.php:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/structure/infragistics.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
$.ajax({type:"GET", url: "badge_json.php", success: function(data) {
$("#chart").igPieChart({
width: "435px",
height: "435px",
dataSource: data,
dataValue: "Count",
dataLabel: "Domain",
labelsPosition: "bestFit"
});
}});
</script>
</body>
</html>
and badge_json.php:
<?php
header('Content-type: application/json');
// your data goes here
$data = array(
['Domain' => 'Artificial Intelligence', 'Count' => 46],
['Domain' => 'Data Architecture', 'Count' => 21],
['Domain' => 'Data Science', 'Count' => 50]
);
echo json_encode($data);
?>
Related
I'm learning jquery and ajax. I have tried the following code, to post value to php from jquery. But it doesn't work. Can someone tell me what mistake am I doing here, and what is the solution.
I just want value1 to be printed by the PHP server side code, with that value being sent by the Jquery based client side code.
<html>
<head>
<title>Practice 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<?php
if (isset($_POST['data'])) {
$data = $_POST['data'];
print( "data is: $data" );
return;
}
?>
<body onload='process()'>
<script type="text/javascript">
$.post(window.location, {'data': "value1"}, function (data) {
$('#response').text(data);
});
</script>
</body>
</html>
You're trying to output to an element that doesn't exist '#response', also the process function is missing.
Try something like this:
<html>
<head>
<title>Practice 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head>
<?php
if (isset($_POST['data'])) {
$data = $_POST['data'];
print( "data is: $data" );
return;
}
?>
<body>
<div id="response"></div>
<script type="text/javascript">
$.post(window.location, {'data': "value1"}, function (data) {
$('#response').text(data);
});
</script>
</body>
</html>
I'm trying to apply both a table class and columns styling properties to a DataTable. However, none of the attributes actually do something.
I have written // doesn't do anything where something doesn't seem to work like I want it to.
The table data is added dynamically shortly after the table is created.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="example" ></table>');
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
Try adding 'https' in the begenning of these two links and then execute the code.
1- link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"
2- script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"
Try the below Solution, Load Contents from CDN correctly.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="./js/client.js"></script>
<style>
.override {
display:solid; !important;
}
</style>
<script>
$(document).ready(function() {
$("#demo").html("<table cellpadding='0' cellspacing='0' border='0' class='stripe' id='example'></table>");
// class= doesn't do anything
t = $('#example').DataTable({
columns:
[
{width:"300px", title: "Name", data: "name" },
// width doesn't do anything
{className: "dt[-head|-body]-right", title: "Age", data: "age" },
// className doesn't do anything
{title: "Nationality", data: "nationality"}
]
});
connect();
});
</script>
</head>
<body>
<div id="demo" style="width:500px"> </div>
</body>
</html>
I have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.
This question already has answers here:
jQuery and CORS
(3 answers)
Closed 8 years ago.
hey guys i am unable to fetch cross domain json data here is my code below which doesn't work
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
var furl= "http://192.168.2.36/gemadmin/display.php?callback=?";
$.getJSON( furl)
.done(function( data ) {
console.log(data);
});
})();
</script>
</body>
</html>
and this code works properly since its just localhost
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getJSON demo</title>
<style>
img {
height: 100px;
float: left;
}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="images"></div>
<script>
(function() {
var furl= "http://localhost/gemadmin/display.php";
$.getJSON( furl)
.done(function( data ) {
console.log(data);
});
})();
</script>
</body>
</html>
why is the first version not working ? and what is the solution to make it work?
server code(display.php)
<?php
include 'config.php';
$sql = "select * from menu;";
$result= $mysqli->query($sql);
$data = $result->fetch_all( MYSQLI_ASSOC );
header('Content-Type: application/json');
echo json_encode( $data );
?>
The answer:
Found the answer instead of $.getJSON() use $.get and do a json parse
example
jQuery.getJSON demo
img {
height: 100px;
float: left;
}
<div id="images"></div>
<script>
(function() {
var furl= "http://localhost/gemadmin/display.php?callback=?";
$.get( furl)
.done(function( data ) {
var obj = JSON.parse(data);
console.log(obj);
});
})();
</script>
</body>
</html>
don't forget to add 'callback=?'to your url
Use Like This
$.ajax({
url: "URL",
type: "POST",
contentType: "application/json;charset=utf-8",
data: JSON.stringify("YOUR JSON"),
dataType: "json",
success: function (response) {
alert(response);
},
error: function (x, e) {
alert('Failed');
alert(x.responseText);
alert(x.status);
}
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
demo_ajax_json.js
{
"firstName": "John",
"lastName": "Doe",
"age": 25
}
A simple example
I am using jqplot i want following answer.when i drag points then automatically change graph.any one have solution????
i want display only two points
But i get following output
this is my code anyone having solution
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dragable.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<style>
#chart1{
margin-top:5em;
margin-left:1.5em;
}
</style>
</head>
<body>
<div class="example-plot" id="chart1"></div>
<div id="d1"></div>
<div id="d2"></div>
<script type="text/javascript">
var chartNumberTicks=8;
var s1;
$(document).ready(function () {
s1 = [['2014',1000000],['2015', 968526],['2016', 933905],['2017',895822],['2018', 853930],['2019', 807849],['2020', 757161],['2021', 701403],['2022', 640069],['2023', 572603],['2024', 498389],['2025',416754],['2026',326956],['2027',228178],['2028',119522],['2029',0]];
plotpoints();
$('#chart1').bind('jqplotDataClick',function (ev, seriesIndex, pointIndex, data) {
s1 = [['2014-02-04',900000],['2015-01-02', 858526],['2016-01-03', 833905],['2017-01-04',795822],['2018-01-01', 753930],['2019-01-02', 607849],['2020-01-03', 557161],['2021-01-04', 501403],['2022-01-01', 440069],['2023-01-02', 372603],['2024-01-03', 358389],['2025-01-03',316754],['2026-01-03',229996],['2027-01-03',208178],['2028-01-03',108178],['2029-01-03',0]];
plotpoints();
}
);
});
function plotpoints(){
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart1',[s1],{
title: '',
axes: {enter code here
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
numberTicks:chartNumberTicks
},
yaxis: {
tickOptions: {
formatString: '%d'
}, tickInterval: 100000,max:1200000,min:-100000
}
}
});
}
</script>
</body>
</html>