When I place this in my base application html.haml file:
= javascript_include_tag :defaults, 'jquery-1.3.2.min', 'highcharts'
<!--[if IE]>
javascript_include_tag 'excanvas.compiled'
<![endif]-->
%script{:type => "text/javascript"}
$(document).ready(function() {
= yield :javascripts
});
I get a textual description of a graph that is supposed to appear visually:
$(document).ready(function() { var chart = new Highcharts.Chart({ chart: { margin: [50, 30, 0, 30], renderTo: 'pie-chart-container' }, credits: { text: 'Data provided by NETMARKETSHARE', enabled: true, href: 'http://marketshare.hitslink.com/browser … px?qprid=3' }, legend: { style: {left: 'auto', right: '50px', top: '75px', bottom: 'auto' }, layout: 'vertical' }, plotOptions: { pie: {dataLabels: {color: 'white', enabled: true, formatter: function() { if (this.y > 15) return this.point.name; }, style: {font: '10pt Helvetica', textShadow: '#000000 1px 1px 2px' } } } }, series: [ {type: 'pie', data: [{y: 3.57, identifier: 'applewebkit', name: 'Safari'}, {y: 22.32, sliced: true, identifier: 'gecko', name: 'Firefox'}, {y: 56.9, identifier: 'msie', name: 'Internet Explorer'}, {y: 17.21, name: 'Other'}]} ], subtitle: { text: 'January 2010' }, title: { text: 'Browser Market Share' }, tooltip: { formatter: function() { return "" + this.point.name + ": " + this.y + " %"; } }, xAxis: { title: {text: '' } }, yAxis: { title: {text: '' } } }); });