when we pass static list of data like [{category":"a","data:"3"},"category":"b","data":"1"}]
then its working fine, but when we pass page url like {"url": "abc.php","format": "json"} in dataprovider section then chart not populate.
This is my code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"dataProvider":{ "
url": "abc.php",
"format": "json" },
"labelRadius": -35,
"labelText": "[[percents]]%",
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle" }
});
Any solution?
Using amCharts with "static" data
If you have "static" data, use the dataProvider setting, like this:
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"dataProvider": [{
"category": "a",
"data": 3
}, {
"category": "b",
"data": 1
}],
// ...
});
Using amCharts with AJAX data
If you want the data to be loaded using AJAX, one way is to make use of amCharts' Data Loader plugin.
Make sure to include it in your HTML:
<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
Leave out the dataProvider setting, and use dataLoader instead.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"dataLoader": {
"url": "abc.php",
"format": "json"
},
// ...
});
Your abc.php file should return valid JSON, like this:
[{
"category": "a",
"data": 3
}, {
"category": "b",
"data": 1
}]
You can find a complete list of options for the Data Loader plugin here: https://www.amcharts.com/kbase/using-data-loader-plugin/.
Related
Does anyone know how to filter the posts shown on fullcalendar based on their custom fields?
Example: If I wanted to only show "media == twitter" how would I be able to accomplish this using only one json feed?
I appreciate any ideas.
Example of Json:
{
"id": "1",
"title": "Title",
"description": "Details",
"media": "twitter",
},
{
"id": "2",
"title": "Title",
"description": "Details",
"media": "linkedin",
},
{
"id": "3",
"title": "Title",
"description": "Details",
"media": "facebook",
}
The following is the basic setup I have so far of the fullcalendar which is currently working fine.
Example of FullCalendar code:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<? echo '2015-11-01'; ?>',
editable: false,
events: "json.php",
eventClick: function(event) {
if (event.url) {
window.open('#' + event.id,"_self");
return false;
}
}
});
According to above mentioned description as a solution to filter json feed,you need to decode json data into php associative array using json_decode() function and apply filter for specific data while iterating over an associative array.
Please refer the example code snippet to filter json data
<?php $json_data='[
{
"id": "1",
"title": "Title",
"description": "Details",
"media": "twitter"
},
{
"id": "2",
"title": "Title",
"description": "Details",
"media": "linkedin"
},
{
"id": "3",
"title": "Title",
"description": "Details",
"media": "facebook"
}
]';
$result=NULL;
$json_array=json_decode($json_data,true);
if($json_array)
{
foreach($json_array as $json)
{
switch($json['media'])
{
case 'twitter':
$result=$json;
break;
}
}
}
echo json_encode($result);
?>
$result variable will hold the filtered json data.
I have a JSON filed named items.json. I need to create a small search box in which I can input the name OR the category and perform a live search as I type. The return should be:
If I search for AXE it should display all items as I type that start with AXE.
If I search for Hygene it should list all products under that category.
So basically it should be a HTML field, with a live search field, that gets the data from a JSON file via Ajax. If I could use PHP with this too, that would be great.
[
{
"product": "132431",
"productName": "AXE Body Spray",
"categoryName": "Hygene"
},
]
If you have any ideas I would be forever grateful.
I'm really bad at this, and the more specific the better.
Both ideas on how to implement either this: http://blog.comperiosearch.com/wp-content/uploads/2012/06/instantsearch.html or jQuery Autocomplete. I've spent hours reading through the docs but I'm doing something wrong, I'm not experienced enough.
You'd better perform the search client side, and if your data is this simple, there's no need for a plugin. Here you are a working example in Javascript you can elaborate on:
var Test = {
Items : [ { "product": "132431",
"productName": "AXE Body Spray 1",
"categoryName": "Hygene"
},
{ "product": "132432",
"productName": "AXE Body Spray 2",
"categoryName": "Hygene"
},
{ "product": "132433",
"productName": "AXE Body Spray 3",
"categoryName": "Hygene"
},
{ "product": "11",
"productName": "Bacon",
"categoryName": "Food"
},
{ "product": "12",
"productName": "Eggs",
"categoryName": "Food"
},
{ "product": "9",
"productName": "Beer",
"categoryName": "Beverages"
}
],
searchProduct: function(search) {
var founds = $.grep(Test.Items, function(value, index) {
return value.productName.substring(0, search.length) == search;
});
Test.printResults(founds);
},
searchCategory: function(search) {
var founds = $.grep(Test.Items, function(value, index) {
return value.categoryName.substring(0, search.lenght) == search;
});
Test.printResults(founds);
},
printResults: function(founds) {
var html = "";
$.each(founds, function(key, item) {
html += "<option>" + item.productName + "</option>\n";
});
alert(html);
}
};
You can test it like that: Test.searchProduct("AXE"); or Test.searchCategory("Food");.
Good luck!
You can use this:http://w3schools.com/php/php_ajax_livesearch.
(or just google for:"php autocompleat ajax")
Good luck
I am trying to implement AJAX call method into my website using codeigniter, the reason why i want to use AJAX so i can get live updates from the database
The click button works and displays all of the JSON data but the issue is when i try and display a specific array it does not recognize it, it seems to be iterating through every single character.
Also another wierd thing is when the alert is being called i can see the html and head tags I want to be able to print specific arrays for example the array id"
Things i have done to try and work it out
i have alerted the datatype and found out it was a string
i have managed to get ajax to work in regular PHP rather then codeigniter so their is nothing wrong with the database
I have also tried to use jQuery.parseJSON so i can force it to be json but then the script did not run
I used JSONlint and apprently its a valid JSON
Any help would be appreciated
Consolelog
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXpGbk1wkkaPiv_qkBevxAP9s4kk0oiiU&sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
[
[
{
"id": "1",
"postcode": "NW6",
"imgurl": "hello.jpeg",
"from_user": "henny",
"created_at": "2013-03-18 23:03:00"
},
{
"id": "2",
"postcode": "NW2",
"imgurl": "test.jpeg",
"from_user": "belly",
"created_at": "2013-03-15 23:03:00"
}
]
]
Controller
public function insertJSON()
{
$this->load->model("values");
$queryresults = $this->values->getDb();
$arrays = array($queryresults);
echo json_encode($arrays);
}
View
<script type='text/javascript' language='javascript'>
$('#getdata').click(function (data) {
$.ajax({
url: '<?php echo base_url().'index.php/welcome/insertJSON';?>',
type: 'POST',
cache: 'false',
datatype: 'json'
}).done(function (data) {
alert(data);
});
});
</script>
json_encode
[
[
{
"id": "1",
"postcode": "NW6",
"imgurl": "hello.jpeg",
"from_user": "henny",
"created_at": "2013-03-18 23:03:00"
},
{
"id": "2",
"postcode": "NW2",
"imgurl": "test.jpeg",
"from_user": "belly",
"created_at": "2013-03-15 23:03:00"
}
]
]
You need to send the correct response headers back (application/json) from your controller function.
Try changing your controller to the following:
public function insertJSON()
{
$this->load->model("values");
$queryresults = $this->values->getDb();
$arrays = array($queryresults);
$this->output->set_content_type('application/json')
->set_output(json_encode($arrays));
}
I have a an array that has been json encoded from php
The array looks like this(called $jsonGraphData;):
[{"Type":"Category","Name":"games","TotalClicks":"162"},{"Type":"Category","Name":"apps","TotalClicks":"29"},{"Type":"Category","Name":"music","TotalClicks":"28"},{"Type":"Category","Name":"video","TotalClicks":"25"}]
I would like to use the array values in a loop within a jquery function that generates a graph. These are the hard coded values that allows the graph to work:
series: [{
name: 'games',
data: [162]
}, {
name: 'apps',
data: [29]
}, {
name: 'video',
data: [25]
}]
What I would like to do is to use jquery 'each' to loop through the array so that defining the series is dynamic this is what I am trying to achieve:
var totalClicks = $jsonGraphData; (this is the array, the alert works fine).
series: [{
$.each(totalClicks, function(index, val) {
alert('name: ' + val.Name + ' ' + 'data: ' + val.TotalClicks);
//here is where I need the format to be the same as the example above.
});
}]
I lack the knowledge of jquery syntax to achieve this and do not know what to search for on Google.
Try this code
var series = [];
$.each(totalClicks, function(index, val) {
series.push({name: val.Name, data: val.TotalClicks});
});
Or if data should still be an array with only one value in it.
var totalClicks = [{ "Type": "Category", "Name": "games", "TotalClicks": "162" }, { "Type": "Category", "Name": "apps", "TotalClicks": "29" }, { "Type": "Category", "Name": "music", "TotalClicks": "28" }, { "Type": "Category", "Name": "video", "TotalClicks": "25"}]
var series = [];
$(totalClicks).each(function (index, val) {
series.push({ "name": val.Name, "data": [val.TotalClicks] });
});
You don't need to use jQuery for looping through the regular array.
for(var obj in yourArray){
// do whatever you need with it.
alert(obj.Name + " " + obj.TotalClicks);
}
I know this will be a repetition. But I have tried my best to solve it, all in vain. I am unable to populate even a simple grid panel!!! Obviously I am a newbie in extjs.
My js code is as follows:
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: 'compare.php',
fields: ['name', 'area']
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'Name', width: 100, sortable: true, dataIndex: 'name'},
{header: 'Position', width: 100, sortable: true, dataIndex: 'area'}
],
stripeRows: true,
height:250,
width:500,
title:'DB Grid'
});
grid.render('db-grid');
});
and my php is as follows:
<html>
<head>
</head>
<body bgcolor="white">
<?php
$link = pg_Connect('host=my_host port=5432 dbname=da_name user=postgres password=my_password');
$sql = "SELECT name, area FROM \"TABLE\" LIMIT 10";
if (!$link) {
echo "error";
} else {
$result = pg_query($link, $sql);
$rows = array();
$totaldata = pg_num_rows($result);
while($r = pg_fetch_assoc($result)) {
$rows[] = $r;
}
//echo json_encode($rows);
//echo json_encode(array('country' => $rows));
echo '({"total":"'.$totaldata.'","country":'.json_encode($rows).'})';
}
?>
</body>
</html>
And my json is as follows:
[
{
"total": "10",
"country": [
{
"name": "CULTIV",
"area": "1.10584619505971e-006"
},
{
"name": "CULTIV",
"area": "2.87818068045453e-006"
},
{
"name": "CULTIV",
"area": "6.96120082466223e-007"
},
{
"name": "CULTIV",
"area": "1.17171452984621e-007"
},
{
"name": "CULTIV",
"area": "1.25584028864978e-006"
},
{
"name": "CULTIV",
"area": "5.86309965910914e-007"
},
{
"name": "CULTIV",
"area": "4.12220742873615e-007"
},
{
"name": "CULTIV",
"area": "7.59690840368421e-006"
},
{
"name": "CULTIV",
"area": "2.47360731009394e-007"
},
{
"name": "CULTIV",
"area": "4.04940848284241e-005"
}
]
Do I need to set any proxy for this? Actually my application is running on different server than my database.
I have no experience in PostgreSQL but I advice you to use pg_fetch_object() function instead of pg_fetch_assoc() in that case.
Try something like this:
while($obj = $result->pg_fetch_object()) {
$rows = $obj;
}
echo '({"total":"'.$totaldata.'","country":'.json_encode($rows).'})';
Your JSON is malformed. Ext.data.JsonReader (automatically configured when you use a JsonStore) expects a JSON object with a root node, defined in your reader config. The reader should throw an exception if the root is undefined.
So define a root for your JsonReader:
var store = new Ext.data.JsonStore({
url: 'compare.php',
root: 'country', // required!
fields: ['name', 'area']
});
And your JSON should look like this:
{
"total": 10,
"country": [{
"name": "CULTIV",
"area": "6.96120082466223e-007"
},{
...
}]
}