I'm in a php project which need to show the chart. I intend to use Morrisjs to show which use Jquery. But I find out the angularjs is more interesting. Is there person can show me how can I use chart on angularjs with Ajax with data from php return.
Below the link for Google Chart Tools Directive Module for AngularJS
https://github.com/bouil/angular-google-chart
http://gavindraper.com/2013/07/30/google-charts-in-angularjs/
First you have to create a service to get your data.
Take a look at this plnkr http://plnkr.co/edit/KbBg67
$http.get('posts.json').success(function(data) {
instead of posts.json get your data
Below that you can see how we push the data to an array, the file is well commented.
And now, from a controller you can access that said data.
Now you have to create a directive to render the charts.
Here is a really good example that could be adapted to what you want.
http://eric-schaefer.com/blog/2013/07/26/rendering-flot-charts-through-angular-js/
After receiving the data as Arthur described the next step is to bind this data to a directive which visualizes your data. angular-chart does this job for you.
It is an easy to use directive which connects D3.js with the AngularJS 2-Way-DataBinding. This way the chart gets automatically updated whenever you change the configuration options and at the same time the charts saves its state (zoom level, ...) to make it available in the AngularJS world.
Check out the examples to get convinced.
If you are using angularjs, no need to use jquery ajax. Use everything with the help of angularjs.
This is all for charts , Just follow it. First play with dummy data (don't retrive from DB).
Try to implement.
Related
I am using the amCharts javascript library to show some data charts in my website. I want to read the data that will be in the charts from a database.
I'm reading the data with and after that making a call to the javascript function like this:
<?php
echo '<script language="javascript">makeGraph(' . json_encode($data) . ')</script>';
?>
I am getting the results I want this way, but if a client look in the source code of the website, he will see all the data from the database instead of $data since you are not in the server anymore.
So the question is: how can I read and use all the data without exposing it publicly? Because I can not really figure out any other way to do it now.
Thank you very much
If you don't want users to see your data, then don't use JavaScript to process it. Create the charts in php on your server and display the results only.
I have read about Google's Geocoding Service which allows named locations (such as Manchester) to be mapped to coordinates from Google's DB so that markers can be placed on the Google Map: https://developers.google.com/maps/documentation/javascript/geocoding#Geocoding
In my circumstance I have a MySQL DB with a table jobs defined. In this table I store (unsurprisingly) job information, e.g. salary, job title, reference, etc. In this table is a column for the job location too. Most of the time it contains the city (or city plus postcode). The odd few times it is either NULL or has a string such as "No location specified".
To view these records I have a webserver running on my test machine and I display the records of the table in my browser with some HTML and general php script (a DB driven intranet page).
I have now split this page up into two sections. Using the Google Maps v3 API I have the bottom half containing the Google Map. What I am trying to achieve is:
automatic placing of markers based on the location strings in the
location column.
click-able markers where on-click they produce the
info window (which will contain job Title, etc).
What I want to know is what is the best way to do this?
I have read some similar posts here on SO where users have had a similar situation. From these readings I can ascertain that some OP's have made the effort to store the long/lat of the location of their record at the time it was inserted into the table and THEN read the long/lat with Javascript to produce the markers.
To do this I would need to modify some code and the table. This is one option, but I'd rather explore the other which is perhaps using Google's Geocoding service? Has anybody any experience with this? Any advice, recommendation you can give?
Also, lets say I used the latter option. I use PHP script to load the records from the DB. How would I pass the locations to Javascript so that the Google Map API can interrogate for long/lat with the Geocoding service? Is this a less optimal way of achieving it?
Thanks.
Just use Gmap3 Library, and you provide it an address...like so....
http://gmap3.net/en/catalog/18-data-types/address-63
You setup a div...
<div id="test" width=500 height=500></div>
Then your Jquery inserts the map into the div....
$("#test").gmap3({
marker:{
address: "Haltern am See, Weseler Str. 151"
},
map:{
options:{
zoom: 14
}
}
});
The address can be echoed from your PHP (this is considered bad practice though)
$("#test").gmap3({
marker:{
address: '<?php echo $addressfromDB;?>'
},
map:{
options:{
zoom: 14
}
}
});
But its better to do an ajax call, and then include this code in the success callback
$.getJSON('getlocation.php', function(data){
$("#test").gmap3({
marker:{
address: data.address // or whatever structure your json is in.
},
map:{
options:{
zoom: 14
}
}
});
});
That should get you started :)
It sounds like you have everything in place except for the Javascript and the way to get your data from the PHP script.
So lets start with getting the data from the PHP script in to the Javascript. The way to do this is using AJAX (for learning it, not an official source: http://www.w3schools.com/ajax/ajax_intro.asp). Once the web page has been loaded, Javascript can load more information by using an XMLHttpRequest object (or jQuery.ajax() if you prefer to use a Javascript framework). Basically this is Javascript loading a new page in the background and then doing stuff with the contents on it's own. You'll need to set up the PHP script (or make another one - I'm not familiar with this part) to provide the information that you want at a separate URI than the page you're visiting. Then you use this URI in the Javascript XMLHttpRequest. Typically you would get the PHP script to provide data in a form that's easy for computers to understand such as JSON (recomended) or XML (as apposed to HTML which is easy for human's to understand - once rendered). This procedure is called an API. In your JavaScript, you'll use JSON.parse() to turn the response text into actual variables that you can do stuff with.
Once you've got the addresses in Javascript, use the geocoding API you mentioned to turn them into GPS coordinates, and then the Google Maps Javascript API to place markers on the map: https://developers.google.com/maps/documentation/javascript/overlays#Markers. You can add an info window as well (search for InfoWindo in the above page - apparently I can only include 2 links).
As you've mentioned, it's probably a better idea to geocode all of the addresses and keep the lat/lon stored in the database. The biggest reason for this that if you geocode in Javascript as described above, then every time the user loads the page, geocoding will be re-done. This has two issues: 1. For Google, this is an expensive operation that costs them resources. 2. For you, this means it takes longer for the map to populate (because you have to wait on Google's response to your AJAX call - the geocoding one, not the one you'll be implementing as described above) and you might run into Google's usage limits which are in place because of 1. If you decide to geocode ahead of time and store the results in your database, you should be using "The Google Geocoding API", not the Javascript Geocoding Service. I can't add another link to it, but just Google "The Google Geocoding API".
I hope that helps, and if someone else wants to update my answer with more links, feel free.
I'm trying to get data from MySql, parse it via php and echo it in json, then jquery will grab the new data and will update the table with the new data.
I have a basic table with basic data, I'm just trying to display my data dynamically for my users. When they select an option from the dropdown menu, the table will update with the new info.
I can grab the data and encode it to json. The problem I'm having is the jquery part. I don't know how to call the php json data and update the table.
I found datatables.net and their plugin is way more than what I need. I just need a simple example so I can start from there. Can someone show me a simple example of doing live queries?
Thanks!
have you tried getting a look at
http://datatables.net/release-datatables/examples/data_sources/server_side.html
update:
take a look at
http://ptheart.com/beta/testdatatables.php
and let me know if this helps.
update:
then you should try jqgrid
Hi friends i am working on JQ-GRID. I want to show Image in specific column, But i don't know how to attach image in JQ-GRID. Can anybody help me or please send me some links, thanks
jqgrid is a feature monster. I tell this everybody who asks about it.
When jqgrid loads, a function is called which actually gets the data you want to display.
This is normally an ajax call to your php. As a result set of this function, you can just use xml or json.
I prefer json, so I build my result array and do a echo json_encode($myarray)
jQuery("#your_grid_id").jqGrid({ url : '/ajax/getjqgriddata.php'})
Now displaying pictures, there are different ways you can do that. You can either generate a <img src="wherever/mypicture1.png"></img>-link and hand it over in your result, or encode your picture binary data with base64 and deliver it with your result.
A more addvanced way is to use an so called formatter and just returning a id for the image.
This depends on you, but I would suggest to get confident with jqgrid, experiment with returning -links to get a feeling how jqgrid works.
There is plenty of good documentation at:
http://trirand.com/blog/jqgrid/jqgrid.html
Just take a look at it.
I'm looking for a library which do this :
Retrieve a JSON through an AJAX call
Populate table with the JSON
Update in real time the table with the JSON (call every x seconds) and only delete or hide the rows wich are deleted or insert the new rows.
/Editing after first answer
Ok I guess my first explanation was not good.
Retrieving through jQuery a JSON and build a table is good, I could do that, but my request was more on the other part.
I'm looking for a library to display the result in a special way.
Let me explain.
Json request 1 send :
1;Tomato 2;Apple 3;Salad 4;Carot
Json request 2 send :
1;Tomato 3;Salad 4;Carot 5;Potatoes
I would like the second row disapear with a effect (fadeOut) and the rows below move Up. For the row 5, i just want a new row appears with a fade in.
Is that more clear?
Is there any library existing doing this?
I'm doing it in PHP, but i hope to write all this in JS.
The user could just look the table and see the new rows appearing and the old rows deleting.
Any ideas or am I supposed to write it from scratch?
You can get the json like this (use get or post, ill show post here):
function do_json_live(){
$.post('url.php','somedata', function(returnJSON){
alert(returnJSON);
//do something with the `returnJSON`
setTimeout(do_json_live, 2000); //2000 ms = 2 seconds
},'json');
}
If you want something friendly and full of various useful features, you can use jQuery plugin called DataTables.
It provides API allowing you to provide new data from the server on request: http://www.datatables.net/api
It works for simple implementations also, is pretty customizable, allows to change its outlook etc.
Hope this is useful.
Here is a really good article on different polling/comet techniques that you will want to look into. It breifly describes each and points out some pitfalls you might not think of.: http://query7.com/avoiding-long-polling. Also here is a jquery plugin for long polling: http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/
Try Jquery Grid Plugin. You can retrieve JSON from server and build a grid on the client side. Take a look at the web site, there are some examples including php.
First I would read this, but the code is actually really simple.
On your front end, you'd have your table
<table id="myTable"></table>
Then you'd make your AJAX post within JQuery
$.ajax({
url: "yourphpfile",
data: <data you want your php file to read>
success: function(data){
$('#myTable').html(data);
}
});
Your method in php would take in your posted data, it would create an HTML string of a table element, and then you'd set your table's innerHTML on the front end with .html() built into JQuery -- that way you never have to worry about showing/hiding, everytime you post, your given the table itself, so you just display exactly that, you can handle all the fancy stuff server side.
You could use the awesome jqGrid plugin.
To do the autorefresh, you should do this:
setInterval(function(){
$("#grid1").trigger("reloadGrid");
}, 10000);
Hope this helps. Cheers.
If real-time updating is truly required, as Neal suggested, Comet or Stream-Hub would be one avenue worth checking into.
As for the interface, I recently have been using JQuery Templates, and when reconciling added / removed / updated records, I use JQuery selectors to clear & update, and use Templates to add in new records. And because I'm using JQuery in all 3 events, I could easily integrate their motion / visual effects.
JQuery Templates
JQuery Selectors
JQuery Effects
Stream-Hub
I myself only needed polling (every 15 seconds) so I'm using Robert Fischer's improved JQuery PeriodicalUpdater
JQuery Periodical Updater