In my previous post we were talking about how to create a REST web service. But now we want to build a client and consume this service. The address was http://localhost/DbUsersApi.php?action=get_user_list and the result was a JSON file: {“user_list”:[{“userid”:”D3B6F994-1DA5-47FB-8A2A-750A65AAB137″,”firstname”:”Joe”,”lastname”:”Bloggs”},{“userid”:”E19F2EC8-62B9-4C88-84DC-E0D6903177E0″,”firstname”:”John”,”lastname”:”Doe”}]} We will use a simple HTML file with Javascript. Consume the service with Javascript: Create a new file […]
Awesome charts with High Charts
This is a simple demo of the great High Charts. You can find all the files needed for High Charts and jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!doctype html> <html lang="en"> <head> </head> <body> <script src="jquery.js"></script> <script src="highcharts.js"></script> <script src="exporting.js"></script> <div id="container"></div> <script> $(function () { $('#container').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, chart: { type: 'line', zoomType: 'xy' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); </script> </body> </html> |
Configure WebStorm for AngularJS
1. Go to the JetBrains website, download and install WebStorm (a free trial is available for 30 days if you don’t have a licence). 2. Go to the AngularJS website. Here you can find the library and a useful documentation. 3. Download the latest version of AngularJS (the UNCOMPRESSED file otherwise WebStorm will not be able to use […]
Tools For Angular
Different useful tools to develop AngularJS apps. Notepad++ simply the best free open source text editor. Sublime Text 3 Chrome developer tool – out of the box (just right click then Inspect Element). AngularJS Batarang Chrome extension: useful to debug our application. JetBrains Webstorm IDE: according to me the best JavaScript editor.
AJAX
AJAX (Asynchronous Javascript And Xml) = a methodology employing DOM in combination with techniques for retrieving data without reloading a page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <div id="demo"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadDoc()">Change Content</button> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("demo").innerHTML = xhttp.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); } </script> </body> </html> |