Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 116 lines (91 sloc) 3.574 kB
1b45435 @jsiarto Updated README
jsiarto authored
1 # highcharts-rails
9b36e53 @abbottry Initial commit
abbottry authored
2
1b45435 @jsiarto Updated README
jsiarto authored
3 Highcharts-rails is a simple helper for displaying Highcharts graphs in your Rails application. This plugin is completely dependent on the [Highcharts javascript library](http://highcharts.com) by Torstein Hønsi.
9b36e53 @abbottry Initial commit
abbottry authored
4
1b45435 @jsiarto Updated README
jsiarto authored
5 Highcharts-rails accepts a combination of hashes and arrays that formatted in a way that Highcharts expects and allows developers to calculate chart data and format chart data/labels/tooltips in the controller and/or model instead of the view.
9b36e53 @abbottry Initial commit
abbottry authored
6
1b45435 @jsiarto Updated README
jsiarto authored
7 This plugin is packaged with [Highcharts 1.1.3](http://highcharts.com/download), and [jQuery 1.3.2](http://docs.jquery.com/Release:jQuery_1.3.2).
9b36e53 @abbottry Initial commit
abbottry authored
8
42f539e @jsiarto Added installation section to README
jsiarto authored
9 ## Installation
10
11 Get the plugin:
12
13 script/plugin install git://github.com/loudpixel/highcharts-rails.git
14
15 Run the rake setup:
16
17 rake highcharts_rails:install
18
1b45435 @jsiarto Updated README
jsiarto authored
19 ## Usage
9b36e53 @abbottry Initial commit
abbottry authored
20
1b45435 @jsiarto Updated README
jsiarto authored
21 Include the following in the head of your application layout:
9b36e53 @abbottry Initial commit
abbottry authored
22
1b45435 @jsiarto Updated README
jsiarto authored
23 <%= javascript_include_tag 'jquery-1.3.2.min', 'highcharts' %>
24 <!--[if IE]>
25 <%= javascript_include_tag 'excanvas.compiled' %>
26 <![endif]-->
9b36e53 @abbottry Initial commit
abbottry authored
27
1b45435 @jsiarto Updated README
jsiarto authored
28 Some people like to put their javascript at the bottom of the page, regardless of your preference you should include the following to write your javascript, unless you feel it necessary to include your javascript in each view.
9b36e53 @abbottry Initial commit
abbottry authored
29
1b45435 @jsiarto Updated README
jsiarto authored
30 <script type="text/javascript">
31 $(document).ready(function() {
32 <%= yield :javascript %>
33 });
34 </script>
9b36e53 @abbottry Initial commit
abbottry authored
35
1b45435 @jsiarto Updated README
jsiarto authored
36 We can collect all of our data, and format everything we need to in our controller:
9b36e53 @abbottry Initial commit
abbottry authored
37
1b45435 @jsiarto Updated README
jsiarto authored
38 # Create a pie chart
39 browser_data = [
40 {:name => 'Safari', :y => 3.57, :identifier => 'applewebkit'},
41 {:name => 'Firefox', :y => 22.32, :identifier => 'gecko'},
42 {:name => 'Internet Explorer', :y => 56.9, :identifier => 'msie'},
43 {:name => 'Other', :y => 17.21}
44 ]
9b36e53 @abbottry Initial commit
abbottry authored
45
1b45435 @jsiarto Updated README
jsiarto authored
46 user_agent = request.env['HTTP_USER_AGENT'].downcase
47
48 # determine the users browser and pull that piece of the pie chart
49 browser_data.each do |browser|
50 if user_agent.index(browser[:identifier].to_s)
51 browser[:sliced] = true
52
53 # some browsers will match more than one identifier, stop looking as soon as one is found
54 break;
55 end
56 end
57
58 # format the labels that show up on the chart
59 pie_label_formatter = '
60 function() {
61 if (this.y > 15) return this.point.name;
32dea87 @jsiarto Fixed small typos in README file example code
jsiarto authored
62 }'
1b45435 @jsiarto Updated README
jsiarto authored
63
64 # format the tooltips
65 pie_tooltip_formatter = '
66 function() {
67 return "<strong>" + this.point.name + "</strong>: " + this.y + " %";
68 }'
69
70 @pie_chart =
71 Highchart.pie({
72 :chart => {
73 :renderTo => "pie-chart-container",
74 :margin => [50, 30, 0, 30]
75 },
76 :credits => {
77 :enabled => true,
78 :href => 'http://marketshare.hitslink.com/browser-market-share.aspx?qprid=3',
79 :text => 'Data provided by NETMARKETSHARE'
80 },
81 :plotOptions => {
82 :pie => {
83 :dataLabels => {
84 :formatter => pie_label_formatter,
85 :style => {
86 :textShadow => '#000000 1px 1px 2px'
87 }
88 }
89 }
90 },
91 :series => [
92 {
93 :type => 'pie',
94 :data => browser_data
95 }
96 ],
97 :subtitle => {
98 :text => 'January 2010'
99 },
100 :title => {
101 :text => 'Browser Market Share'
102 },
103 :tooltip => {
104 :formatter => pie_tooltip_formatter
105 },
106 })
107
dd82f07 @jsiarto More README updates
jsiarto authored
108 In your views you can use a content block to provide the above your javascript and markup for the chart. This will generate a string of javascript that will produce the Highcharts graph and insert into the div:
1b45435 @jsiarto Updated README
jsiarto authored
109
110 <!-- container to hold the pie chart -->
111 <div id="pie-chart-container" class="chart-container"></div>
112
32dea87 @jsiarto Fixed small typos in README file example code
jsiarto authored
113 <% content_for :javascript do %>
1b45435 @jsiarto Updated README
jsiarto authored
114 <%= @pie_chart %>
115 <% end %>
Something went wrong with that request. Please try again.