phpguru.org - Richard Heyes' ramblings and code http://www.phpguru.org/ Quality PHP and Javascript code, along with a mild smattering of humour. Also second home of the RGraph HTML5 canvas graph library. 6th March RGraph release http://www.phpguru.org/article/456 Sat, 06 Mar 2010 21:36:18 +0000 As Spring rolls inevitably on outside (ie it's getting warmer at last!), here's another RGraph release:
  • Documented shadow properties for the Meter chart
  • Added RGraph.getPageWidth() and RGraph.getPageHeight() functions
  • Increased the radius of the ModalDialog corners (ie they're more curvy now)
  • Documented the ModalDialog CSS classes
  • Added context menu to the MSIE example
Go to the RGraph website »]]> HTML5 GeoLocation example http://www.phpguru.org/article/455 Fri, 05 Mar 2010 21:48:12 +0000

An introduction to the HTML5 GeoLocation API. For this to work (currently) you will need to be on the Chrome dev channel which you should use at your own risk (!), or alternatively using Firefox 3.6. There's a bare bones page which demonstrates the API here.

Step one

You can use standard object testing to determine if the browser supports GeoLocation. 

<script>
    /**
    * This function is the callback which is passed the result from the .getCurrentPosition()
    * function. The pos argument can contain more information than just the latitude/longitude,
    * such as altitude, accuracy and speed information.
    * 
    * @param object pos The result from the getCurrentPosition() call
    */
    function myCallback(pos)
    {
        var myLatitude  = pos.latitude;
        var myLongitude = pos.longitude;
    }

    
    /**
    * Test for GeoLocation support and make the call
    */
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(myCallback);
    } else {
        alert("Sorry, your browser doesn't appear to support GeoLocation");
    }
    
</script>

Step two

Once you have tested for it, we can then retrieve the position using the getCurrentPosition() method. You pass this method a callback function which you define. This callback function is given an object (if successful), with various properties:

  • latitude
  • longitude
  • altitude (optional)
  • accuracy
  • altitudeAccuracy (optional)
  • heading (optional)
  • speed (optional)
  • timestamp

The example page

The example page is here. This is bare bones so dissecting it shouldn't be too much trouble.

How does it work?

The GeoLocation API works by retrieving geographical information associated with Internet hardware. From the specification:

"Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location."

Related links

]]> 27th February RGraph release http://www.phpguru.org/article/454 Sun, 28 Feb 2010 02:03:04 +0000 Todays release is a little later in the day due to pesky social commitments. Tut. Anyhoo, this release includes:
  • Added information about the coords array.
  • Added information about dynamically updating your graphs.
  • Zoom in canvas mode now has a dark background option - chart.zoom.background - can be true or false and defaults to true. Note: If you use the full canvas zoom, this will affect you - if you don't like it, you will need to turn it off.
  • Added RGraph_zoomed_canvas CSS class. Also tweaked the default CSS for the two types of zoom.
  • Tweaked the animation example.
  • You can now stipulate two colors instead of one for the line chart (one for up, and one for down). For an example of this, see the last line chart example.
Go to the RGraph website »]]> 20th February RGraph release http://www.phpguru.org/article/452 Sat, 20 Feb 2010 15:50:45 +0000 Unfortunately my shower isn't working at the moment, so this release may be a bit whiffy. Still, here's the list of changes:
  • Added a reasonable performance strategy to the docs
  • Expanded the API docs regarding the data properties
  • Removed the chart.border property from the line chart. You should use CSS on your canvas element instead.
  • Added chart.ymin property to the line chart
  • Tickmarks are no longer drawn on the line chart if the tick is outside the Y scale range
  • Added shadow control to the Meter
  • Fixed the issue with the front page graphs on the website, Google Chrome and missing text. This was done by NOT using asynchronous processing.
Go to the RGraph website »]]> Minor RGraph release http://www.phpguru.org/article/451 Wed, 10 Feb 2010 01:46:03 +0000 There's a new RGraph release available. Only a few tweaks in this release which fix the Pie chart sticks, and add link anchors to the documentation (eg http://www.rgraph.net/docs/bar.html#chart.background.hbars)]]> 7th February RGraph release http://www.phpguru.org/article/450 Sun, 07 Feb 2010 16:29:05 +0000 The following changes are in this release:
  • Added ability to specify number of Y labels - 1, 3 or 5 (the default) to the Bar, Line and Scatter charts
  • Added a little missing documentation to the Line and Scatter charts
  • Small fix to MSIE arrow style tickmarks on the Line chart
  • More optimisations to all chart libraries
  • Added RGraph_zoom_window CSS class - the front page uses it if you want an example
Go to the RGraph website »]]> 31st January RGraph release http://www.phpguru.org/article/448 Sun, 31 Jan 2010 19:32:48 +0000 With less and less going into each release, todays has a bumper four (!) points of (vague) interest:
  • Tweaked the bar and line chart performance
  • Made note about using tables for layout and how it can impact negatively on graph speed
  • Documented Pie chart label sticks
  • Opera (10.5) now supports the canvas text and shadow APIs
Go to the RGraph website »]]>