Hyperlinks on Google Charts

I love Google Charts! If you have ever needed to present information on a web page in a chart form, then Google Charts is really worth looking at. Once you have the chart on your webpage you may want to click on a entry of the legend (the little box that tells you what-is-what on the chart) to take you to more information on that section of the chart. Sadly, the API does not currently have a way to add links to a chart.

This is a simple way to add hyperlinks (or hotspots) to a Google chart using an image USEMAP.

<img src="http://chart.apis.google.com/chart?cht=lc&chd=s:Uf9a,a3fG&chs=250x100&chl=1|2|3|4&chco=000000,0000FF&chma=0,30,30,30&chdl=Desktops|Laptops"
   usemap="#chart" border=0>
<map name="chart">
<area shape="rect" coords="199,31,249,49" href="javascript:alert('More information on Desktops')">
<area shape="rect" coords="199,50,249,69" href="javascript:alert('More information on Laptops')">
</map>

The above HTML ends up looking like this. If you were [on a normal webpage] to click on the “Desktops”, or “Laptops” sections of the graphics you will see the javascript popup. Sadly, the USEMAP does not work on WordPress (this website) web pages, but you get the idea. You can of-course replace the javascript with a link to another page if you like, or even another chart!

The down side of this approach is that it works great as long as the legend does not move or the size of the chart does not change. It seems to work pretty well with line and bar charts, so select your chart type carefully and play around and see what happens.

Firefox HTTPS error ssl_error_rx_record_too_long

I just had an interesting problem when accessing a HTTPS (SSL) service in Firefox. I got the following error message.

SSL received a record that exceeded the maximum permissible length.
(Error code: ssl_error_rx_record_too_long)

It turned out the the HTTPS service (on port 443) was not actually a HTTPS service and it was configured as a normal HTTP service. The initial connection from the browser was communicating in HTTPS, and expecting a security certificate, but instead it was getting back the normal HTTP “Bad Request” HTML. A confusing error message, but an easy problem to fix.

Internet Explorer does not open application/rtf mimetype

Unknown File Type Dialog

I had an odd problem lately where Internet Explorer (IE 7 & 8 ) stopped opening RTF documents served up by our website. The RTF files were served up by a CGI, so they did not have a “rtf” extension on the URL. IE would present a dialog saying that it did not know what the file type was “Unknown File Type”. All the other browsers (Firefox, Safari, etc) worked fine.

On further investigation I found the server was responding with a mime-type of “application/rtf” and it seems IE no longer knows what this is and expects a mime-type of “application/msword”. I found 2 solutions.

1. The best solution, if you control the server, is to change the mime-type of the documents to “application/msword” ().
2. If you can not change the server, then try adding the following registry entry to define the “application/rtf” mime-type

   [HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/rtf]
   "Extension"=".rtf"

Using Javascript to POST data between pages

The following is a simple example of how to submit data from one HTML page to another using the POST method from Javascript. Normally, if data needs to be sent from one HTML page to another, it is done by appending the information to the query parameter of the the URL in the familiar “name=value” format. e.g.

< href="post.aspx?user=peter&cc=aus">Click</a>

Although this works fine, in most cases, problems occur when there is a lot of data to send and the URL exceeds about 2000 characters. The other disadvantage is that the URL looks ugly. The traditional method to get around this is to POST the data using a form. e.g.

<form name="myform" method="post" action="post.aspx">
<input name="user" value="peter"/>
<input value="cc" value="aus"/>
<a href="javascript:myform.submit()">Click</a>
<form>

This works fine, however, it does tend to make the formatting of the resulting HTML difficult and increases the size of the final HTML page significantly if there are lots of links on it.

The following javascript function takes the URL of the target page and an associative array of name/values paires and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

function postwith (to,p) {
  var myForm = document.createElement("form");
  myForm.method="post" ;
  myForm.action = to ;
  for (var k in p) {
    var myInput = document.createElement("input") ;
    myInput.setAttribute("name", k) ;
    myInput.setAttribute("value", p[k]);
    myForm.appendChild(myInput) ;
  }
  document.body.appendChild(myForm) ;
  myForm.submit() ;
  document.body.removeChild(myForm) ;
}

To insert a link into a page just use a normal anchor tag in the HTML and call the function.

<a href="javascript:postwith('post.aspx',{user:'peter',cc:'aus'})">click</a>

This works on Microsoft IE, Mozilla Firefox and OS X Safari.