-
Notifications
You must be signed in to change notification settings - Fork 2
/
README
97 lines (74 loc) · 3.23 KB
/
README
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
GoogleVizualisation
===================
The original blog post: http://blog.redstorm.be/2008/12/03/google-vizualisation-plugin-for-rails
GoogleVizualisation allows you to use Google Vizualisations in your rails application easily.
More information about the different available vizualisations can be found here: http://code.google.com/apis/visualization/documentation/gallery.html
More information about the API: http://code.google.com/apis/visualization/
Available charts
================
Currently the following charts are supported:
- AnnotatedTimeline (as in google finance)
- AreaChart
- ImageAreaChart
- BarChart
- ImageBarChart
- ColumnChart
- Gauge
- IntensityMap
- LineChart
- ImageLineChart
- MotionChart
- PieChart
- ImagePieChart
- ScatterChart
More support for other available charts/vizualisations to come. Feel free to help ;-)
Installation
============
in your application's vendor/plugins: git clone git://github.com/philippelegrain/google_vizualisation.git
Usage
======
1. Start by including <%= google_vizualisation_include_tag %> into the <head> of your application (in application.html.erb or any other layout.)
2. Create any kind of chart (all available charts can be found in google_vizualisation/lib/google_charts directory) in your controller/action i.e.:
@scatter_chart = GoogleCharts::ScatterChart.new(
:width => 400, :height => 240,
:titleX => 'Age', :titleY => 'Weight',
:legend => 'none', :pointSize => 5
)
Note: width and height params are mandatory; they will be passed to the javascript object as well as the <div> where the chart is embeded.
3. Add columns to your chart (each column needs a name and a type. Available types are: Float(a number), String, Date).
@scatter_chart.add_column("Age",Float)
@scatter_chart.add_column("Weight",Float)
NOTE: order MATTERS when adding columns to a chart.
4. Add values to the columns:
@scatter_chart.add_values("Age",[8,4,11,4,3,6.5])
@scatter_chart.add_values("Weight",[12,5.5,14,5,3.5,7])
As you can see, each column is identified by its name, so name MUST be unique.
5. Add your newly created chart to the corresponding view by including:
<%= google_vizualisation_tag(@scatter_chart) %>
6. You're all set. The previous lines of code will generate the following Javascript into your view:
<script type="text/javascript">
google.load("visualization", "1", {packages:["scatterchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number','Age');
data.addColumn('number','Weight');
data.addRows(6);
data.setValue(0,1,12);
data.setValue(1,1,5.5);
data.setValue(2,1,14);
data.setValue(3,1,5);
data.setValue(4,1,3.5);
data.setValue(5,1,7);
data.setValue(0,0,8);
data.setValue(1,0,4);
data.setValue(2,0,11);
data.setValue(3,0,4);
data.setValue(4,0,3);
data.setValue(5,0,6.5);
var chart = new google.visualization.ScatterChart(document.getElementById('e0b216caf7eb624e34869ad603d47e8297f585ee'));
chart.draw(data, {legend: "none",titleX: "Age",height: 240,titleY: "Weight",width: 400,pointSize: 5});
}
</script>
<div id="e0b216caf7eb624e34869ad603d47e8297f585ee" style="width: 400px; height: 240px;"></div>
Copyright (c) 2008 Philippe Legrain, released under the MIT license