pbosetti-flotr 1.2.1 → 1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. data/lib/flotr.rb +3 -2
  2. data/lib/zooming.rhtml +123 -0
  3. metadata +2 -1
data/lib/flotr.rb CHANGED
@@ -15,6 +15,8 @@ end
15
15
 
16
16
  module Flotr
17
17
  BASENAME = File.dirname(__FILE__)
18
+ OUTPUT_FILE = "flotr.html"
19
+ STD_TEMPLATE = "zooming.rhtml"
18
20
 
19
21
  class Data
20
22
  OPTIONS = [:color, :label, :lines, :bars, :points, :hints, :shadowSize]
@@ -49,14 +51,13 @@ module Flotr
49
51
  end
50
52
 
51
53
  class Plot
52
- OUTPUT_FILE = "flotr.html"
53
54
  attr_accessor :series, :title, :comment, :template, :options
54
55
  attr_accessor :width, :height
55
56
  attr_accessor :label, :xlim, :ylim
56
57
 
57
58
  def initialize(title = "Flotr Plot")
58
59
  @title = title
59
- @template = "#{BASENAME}/interacting.rhtml"
60
+ @template = "#{BASENAME}/#{STD_TEMPLATE}"
60
61
  @series = []
61
62
  @options = {}
62
63
  @width, @height = 600, 300
data/lib/zooming.rhtml ADDED
@@ -0,0 +1,123 @@
1
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
+ <html>
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
+ <title><%= title %></title>
6
+ <link href="<%= BASENAME%>/layout.css" rel="stylesheet" type="text/css">
7
+ <!--[if IE]><script type="text/javascript" src="<%= BASENAME%>/excanvas.pack.js"></script><![endif]-->
8
+ <script type="text/javascript" src="<%= BASENAME%>/jquery.min.js"></script>
9
+ <script type="text/javascript" src="<%= BASENAME%>/jquery.flot.js"></script>
10
+ <script type="text/javascript">
11
+ $(document).ready( function() {
12
+ // setup plot
13
+ function getData( x1, x2 ) {
14
+ var d = [];
15
+ for( var i = x1; i < x2; i += ( x2 - x1 ) / 100 ) {
16
+ d.push( [ i, Math.sin( i * Math.sin( i ) ) ] );
17
+ }
18
+ return [ { label: 'sin(x sin(x))', data: d } ];
19
+ }
20
+
21
+ var options = {
22
+ legend: { <%= @options[:legend_position] ? "position: '#{@options[:legend_position]}'": 'show: false'%> },
23
+ xaxis: {label: <%= "\"#{@label[:X]}\"" or 'null'%>,},
24
+ yaxis: {label: <%= "\"#{@label[:Y]}\"" or 'null'%>,},
25
+ points: { show: <%= @options[:points] or 'true'%> },
26
+ lines: { show: <%= @options[:points] or 'true'%> },
27
+ selection: { mode: 'xy' },
28
+ hints: {
29
+ show: true,
30
+ hintFormatter: function( datapoint ) {
31
+ hintStr = "";
32
+ for( var key in datapoint ) {
33
+ if( key[0] == '_' ) { continue; } // skip internal members
34
+ hintStr += "<strong>" + key + ":</strong> " +
35
+ datapoint[key].toFixed(2) + "<br/>";
36
+ }
37
+ return hintStr;
38
+ } },
39
+ grid: {
40
+ clickable: true,
41
+ hoverable: true,
42
+ hoverFill: '#444',
43
+ hoverRadius: 5
44
+ }
45
+ };
46
+
47
+ // var startData = getData( 0, 3 * Math.PI );
48
+ var startData = <%= self.inspect%>
49
+ var plot = $.plot( $('#placeholder'), startData, options );
50
+
51
+ // setup overview
52
+ var overview = $.plot( $('#overview'), startData, {
53
+ legend: { show: true, container: $('#overviewLegend') },
54
+ lines: { show: true, lineWidth: 1 },
55
+ shadowSize: 0,
56
+ xaxis: { ticks: 4, min: <%= @xlim[:min] or 'null'%>, max: <%= @xlim[:max] or 'null'%>},
57
+ yaxis: { ticks: 3, min: <%= @ylim[:min] or 'null'%>, max: <%= @ylim[:max] or 'null'%>},
58
+ grid: { color: "#999" },
59
+ selection: { mode: 'xy' }
60
+ } );
61
+
62
+ // now connect the two
63
+ var internalSelection = false;
64
+
65
+ $('#placeholder').bind( 'plotselected', function( event, area ) {
66
+ // clamp the zooming to prevent eternal zoom
67
+ if( area.x2 - area.x1 < 0.00001 ) area.x2 = area.x1 + 0.00001;
68
+ if( area.y2 - area.y1 < 0.00001 ) area.y2 = area.y1 + 0.00001;
69
+
70
+ // do the zooming
71
+ plot = $.plot( $('#placeholder'), startData,
72
+ $.extend( true, {}, options, {
73
+ xaxis: { min: area.x1, max: area.x2 },
74
+ yaxis: { min: area.y1, max: area.y2 }
75
+ } ) );
76
+
77
+ if( internalSelection ) return;
78
+ internalSelection = true;
79
+ overview.setSelection( area );
80
+ internalSelection = false;
81
+ } );
82
+
83
+ $('#overview').bind( 'plotselected', function( event, area ) {
84
+ if( internalSelection ) return;
85
+ internalSelection = true;
86
+ plot.setSelection( area );
87
+ internalSelection = false;
88
+ } );
89
+ // setup event handlers
90
+ $("#placeholder").bind( 'plotclick', function( e, pos ) {
91
+ if( !pos.selected ) { return; }
92
+ plot.highlight( pos.selected );
93
+ x = pos.selected.x.toFixed( 2 );
94
+ y = pos.selected.y.toFixed( 2 );
95
+ $("#result").text( 'You clicked on (' + x + ', ' + y + ')' );
96
+ } );
97
+
98
+ $("#placeholder").bind( 'plotmousemove', function( e, pos ) {
99
+ if( !pos.selected ) { return; }
100
+ plot.highlight( pos.selected );
101
+ } );
102
+ } );
103
+ </script>
104
+ </head>
105
+ <body>
106
+ <h1><%= title %></h1>
107
+
108
+ <div style="float:left">
109
+ <div id="placeholder" style="width: <%= @width %>px; height: <%= @height %>px;"></div>
110
+ </div>
111
+
112
+ <div id="miniature" style="float:left;margin-left:20px;margin-top:50px">
113
+ <div id="overview" style="width:166px;height:100px"></div>
114
+ <% if !@options[:legend_position] then %>
115
+ <p id="overviewLegend" style="margin-left:10px"></p>
116
+ <% end %>
117
+ <p><span id="result"></span></p>
118
+ </div>
119
+
120
+ <p style="clear:left"><%= comment %>
121
+ </p>
122
+ </body>
123
+ </html>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pbosetti-flotr
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.2.1
4
+ version: "1.3"
5
5
  platform: ruby
6
6
  authors:
7
7
  - Paolo Bosetti
@@ -36,6 +36,7 @@ files:
36
36
  - lib/excanvas.js
37
37
  - lib/excanvas.pack.js
38
38
  - lib/interacting.rhtml
39
+ - lib/zooming.rhtml
39
40
  - lib/jquery.flot.js
40
41
  - lib/jquery.min.js
41
42
  - lib/layout.css