svg-graph 2.1.1 → 2.2.1

data/lib/SVG/Graph/Line.rb

@@ -249,17 +249,22 @@ module SVG
               next if cum_sum[i].nil?
               c = calc_coords(i, cum_sum[i], fieldwidth, fieldheight)
               if show_data_points
-                @graph.add_element( "circle", {
-                  "cx" => c[:x].to_s,
-                  "cy" => c[:y].to_s,
-                  "r" => "2.5",
-                  "class" => "dataPoint#{line}"
-                })
+                shape_selection_string = data[:description][i].to_s
+                if !data[:shape][i].nil?
+                  shape_selection_string = data[:shape][i].to_s
+                end
+                DataPoint.new(c[:x], c[:y], line).shape(shape_selection_string).each{|s|
+                  @graph.add_element( *s )
+                }
               end
 
               make_datapoint_text( c[:x], c[:y] - font_size/2, cum_sum[i] + minvalue)
               # number format shall not apply to popup (use .to_s conversion)
-              add_popup(c[:x], c[:y], (cum_sum[i] + minvalue).to_s)
+              descr = ""
+              if !data[:description][i].to_s.empty?
+                descr = ", #{data[:description][i].to_s}"
+              end
+              add_popup(c[:x], c[:y], (cum_sum[i] + minvalue).to_s + descr, "", data[:url][i].to_s)
             end
           end
 

data/lib/SVG/Graph/Pie.rb

@@ -3,30 +3,30 @@ require_relative 'Graph'
 module SVG
   module Graph
     # === Create presentation quality SVG pie graphs easily
-    # 
+    #
     # == Synopsis
-    # 
+    #
     #   require 'SVG/Graph/Pie'
-    # 
+    #
     #   fields = %w(Jan Feb Mar)
     #   data_sales_02 = [12, 45, 21]
-    #   
+    #
     #   graph = SVG::Graph::Pie.new({
     #   	:height => 500,
     # 	  :width  => 300,
     # 	  :fields => fields,
     #   })
-    #   
+    #
     #   graph.add_data({
     #   	:data => data_sales_02,
     # 	  :title => 'Sales 2002',
     #   })
-    #   
+    #
     #   print "Content-type: image/svg+xml\r\n\r\n"
     #   print graph.burn();
-    # 
+    #
     # == Description
-    # 
+    #
     # This object aims to allow you to easily create high quality
     # SVG pie graphs. You can either use the default style sheet
     # or supply your own. Either way there are many options which can
@@ -35,9 +35,9 @@ module SVG
     # title, subtitle etc.
     #
     # = Examples
-    # 
+    #
     # http://www.germane-software/repositories/public/SVG/test/single.rb
-    # 
+    #
     # == See also
     #
     # * SVG::Graph::Graph
@@ -73,8 +73,8 @@ module SVG
       def set_defaults
         init_with(
           :show_shadow		        => true,
-          :shadow_offset	        => 10, 
-          
+          :shadow_offset	        => 10,
+
           :show_data_labels	      => false,
           :show_actual_values     => false,
           :show_percent		        => true,
@@ -82,11 +82,11 @@ module SVG
           :show_key_data_labels	  => true,
           :show_key_actual_values => true,
           :show_key_percent		    => false,
-          
+
           :expanded				        => false,
           :expand_greatest		    => false,
           :expand_gap             => 10,
-          
+
           :show_x_labels          => false,
           :show_y_labels          => false,
           :datapoint_font_size    => 12
@@ -110,7 +110,7 @@ module SVG
       #   graph.add_data( { :data => [3,5,8,13] } )
       #
       # nil values in the array will be replaced by 0
-      #   
+      #
       #   graph.add_data( { :data => [3,nil,nil,2] } ) is equivalent to graph.add_data( { :data => [3,0,0,2] } )
       #
       def add_data arg
@@ -123,28 +123,28 @@ module SVG
       end
 
       # If true, displays a drop shadow for the chart
-      attr_accessor :show_shadow 
+      attr_accessor :show_shadow
       # Sets the offset of the shadow from the pie chart
       attr_accessor :shadow_offset
       # If true, display the data labels on the chart
-      attr_accessor :show_data_labels 
+      attr_accessor :show_data_labels
       # If true, display the actual field values in the data labels
-      attr_accessor :show_actual_values 
+      attr_accessor :show_actual_values
       # If true, display the percentage value of each pie wedge in the data
       # labels
       attr_accessor :show_percent
       # If true, display the labels in the key
-      attr_accessor :show_key_data_labels 
+      attr_accessor :show_key_data_labels
       # If true, display the actual value of the field in the key
-      attr_accessor :show_key_actual_values 
+      attr_accessor :show_key_actual_values
       # If true, display the percentage value of the wedges in the key
       attr_accessor :show_key_percent
       # If true, "explode" the pie (put space between the wedges)
-      attr_accessor :expanded 
+      attr_accessor :expanded
       # If true, expand the largest pie wedge
-      attr_accessor :expand_greatest 
+      attr_accessor :expand_greatest
       # The amount of space between expanded wedges
-      attr_accessor :expand_gap 
+      attr_accessor :expand_gap
       # The font size of the data point labels
       attr_accessor :datapoint_font_size
 
@@ -187,7 +187,8 @@ module SVG
           count += 1
           v = @data[count]
           perc = show_key_percent ? " "+(v * percent_scale).round.to_s+"%" : ""
-          x + " [" + v.to_s + "]" + perc
+          val = show_key_actual_values  ? " [" + v.to_s + "]"  : ""
+          x + val + perc
         }
       end
 
@@ -218,21 +219,20 @@ module SVG
           max_value = max_value < x ? x : max_value
           total += x
         }
-        percent_scale = 100.0 / total
 
         prev_percent = 0
         rad_mult = 3.6 * RADIANS
         @config[:fields].each_index { |count|
           value = @data[count].to_f
-          percent = percent_scale * value
+          percent = total.zero? ? 0.0 : 100.0 * value / total
           radians = prev_percent * rad_mult
 
-          if percent == 100.0
+          if percent.rationalize(0.001) == 100.0
             @foreground.add_element( "circle", {
               "cx" => radius.to_s,
               "cy" => radius.to_s,
               "r" => radius.to_s,
-              "class" => "fill1"
+              "class" => "fill#{count+1}"
             })
 
             if show_shadow
@@ -343,7 +343,7 @@ module SVG
 
       def get_css
         return <<EOL
-.dataPointLabel{
+.dataPointLabel, .dataPointLabelBackground, .dataPointPopup{
 	fill: #000000;
 	text-anchor:middle;
 	font-size: #{datapoint_font_size}px;
@@ -351,78 +351,89 @@ module SVG
 	font-weight: normal;
 }
 
+.dataPointLabelBackground{
+  stroke: #ffffff;
+  stroke-width: 2;
+}
+
+.dataPointPopup{
+  fill: #000000;
+  visibility: hidden;
+  stroke-width: 2;
+}
+
 /* key - MUST match fill styles */
 .key1,.fill1{
 	fill: #ff0000;
 	fill-opacity: 0.7;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key2,.fill2{
 	fill: #0000ff;
 	fill-opacity: 0.7;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key3,.fill3{
 	fill-opacity: 0.7;
 	fill: #00ff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key4,.fill4{
 	fill-opacity: 0.7;
 	fill: #ffcc00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key5,.fill5{
 	fill-opacity: 0.7;
 	fill: #00ccff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key6,.fill6{
 	fill-opacity: 0.7;
 	fill: #ff00ff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key7,.fill7{
 	fill-opacity: 0.7;
 	fill: #00ff99;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key8,.fill8{
 	fill-opacity: 0.7;
 	fill: #ffff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key9,.fill9{
 	fill-opacity: 0.7;
 	fill: #cc6666;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key10,.fill10{
 	fill-opacity: 0.7;
 	fill: #663399;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key11,.fill11{
 	fill-opacity: 0.7;
 	fill: #339900;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key12,.fill12{
 	fill-opacity: 0.7;
 	fill: #9966FF;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 EOL
       end

data/lib/SVG/Graph/Plot.rb

@@ -4,48 +4,48 @@ require_relative 'DataPoint'
 module SVG
   module Graph
     # === For creating SVG plots of scalar data
-    # 
+    #
     # = Synopsis
-    # 
+    #
     #   require 'SVG/Graph/Plot'
-    # 
+    #
     #   # Data sets are x,y pairs
     #   # Note that multiple data sets can differ in length, and that the
     #   # data in the datasets needn't be in order; they will be ordered
     #   # by the plot along the X-axis.
     #   projection = [
     #     6, 11,    0, 5,   18, 7,   1, 11,   13, 9,   1, 2,   19, 0,   3, 13,
-    #     7, 9 
+    #     7, 9
     #   ]
     #   actual = [
-    #     0, 18,    8, 15,    9, 4,   18, 14,   10, 2,   11, 6,  14, 12,   
+    #     0, 18,    8, 15,    9, 4,   18, 14,   10, 2,   11, 6,  14, 12,
     #     15, 6,   4, 17,   2, 12
     #   ]
-    #   
+    #
     #   graph = SVG::Graph::Plot.new({
     #   	:height => 500,
     #    	:width => 300,
     #     :key => true,
     #     :scale_x_integers => true,
-    #     :scale_y_integerrs => true,
+    #     :scale_y_integers => true,
     #   })
-    #   
+    #
     #   graph.add_data({
     #   	:data => projection
     # 	  :title => 'Projected',
     #   })
-    # 
+    #
     #   graph.add_data({
     #   	:data => actual,
     # 	  :title => 'Actual',
     #   })
-    #   
+    #
     #   print graph.burn()
-    # 
+    #
     # = Description
-    # 
+    #
     # Produces a graph of scalar data.
-    # 
+    #
     # This object aims to allow you to easily create high quality
     # SVG[http://www.w3c.org/tr/svg] scalar plots. You can either use the
     # default style sheet or supply your own. Either way there are many options
@@ -54,15 +54,15 @@ module SVG
     # subtitle etc.
     #
     # = Examples
-    # 
+    #
     # http://www.germane-software/repositories/public/SVG/test/plot.rb
-    # 
+    #
     # = Notes
-    # 
-    # The default stylesheet handles upto 10 data sets, if you
+    #
+    # The default stylesheet handles upto 12 data sets, if you
     # use more you must create your own stylesheet and add the
     # additional settings for the extra data sets. You will know
-    # if you go over 10 data sets as they will have no style and
+    # if you go over 12 data sets as they will have no style and
     # be in black.
     #
     # Unlike the other types of charts, data sets must contain x,y pairs:
@@ -72,9 +72,9 @@ module SVG
     # Additional possible notation
     #   [ [1,2], 5,6] # A data set with 2 points: (1,2) and (5,6), mixed notation
     #   [ [1,2], [5,6]] # A data set with 2 points: (1,2) and (5,6), nested array
-    # 
+    #
     # = See also
-    # 
+    #
     # * SVG::Graph::Graph
     # * SVG::Graph::BarHorizontal
     # * SVG::Graph::Bar
@@ -105,7 +105,7 @@ module SVG
           :show_lines        => true,
           :round_popups      => true,
           :scale_x_integers  => false,
-          :scale_y_integerrs => false,
+          :scale_y_integers  => false,
          )
       end
 
@@ -124,20 +124,20 @@ module SVG
       # would cause the graph to attempt to generate labels stepped by 0.5; EG:
       # 0, 0.5, 1, 1.5, 2, ...
       # default is automatic such that there are 10 labels
-      attr_accessor :scale_y_divisions 
+      attr_accessor :scale_y_divisions
       # Make the X axis labels integers, default: false
-      attr_accessor :scale_x_integers 
+      attr_accessor :scale_x_integers
       # Make the Y axis labels integers, default: false
-      attr_accessor :scale_y_integers 
+      attr_accessor :scale_y_integers
       # Fill the area under the line, default: false
-      attr_accessor :area_fill 
+      attr_accessor :area_fill
       # Show a small circle on the graph where the line
       # goes from one point to the next. default: true
       attr_accessor :show_data_points
       # Set the minimum value of the X axis, if nil the minimum from data is chosen, default: nil
-      attr_accessor :min_x_value 
+      attr_accessor :min_x_value
       # Set the maximum value of the X axis, if nil the maximum from data is chosen, default: nil
-      attr_accessor :max_x_value 
+      attr_accessor :max_x_value
       # Set the minimum value of the Y axis, if nil the minimum from data is chosen, default: nil
       attr_accessor :min_y_value
       # Set the maximum value of the Y axis, if nil the maximum from data is chosen, default: nil
@@ -155,43 +155,45 @@ module SVG
       #   data_set2 = [[1,2], 5,6]
       # or
       #   data_set2 = [[1,2], [5,6]]
-      #   
+      #
       #   graph.add_data({
       #     :data => data_set1,
       #     :title => 'single point'
-      #   })   
+      #   })
       #   graph.add_data({
       #     :data => data_set2,
       #     :title => 'two points'
-      #   })         
+      #   })
+      # @param conf [Hash] with keys
+      #          :data [Array] of x,y pairs, one pair for each point
+      #          :title [String] mandatory name of data series for legend of graph
+      #          :description [Array<String>] (optional) if given, description for each datapoint (shown in popups)
+      #          :shape [Array<String>] (optional) if given, DataPoint shape is chosen based on this string instead of description
+      #          :url [Array<String>] (optional)  if given, link will be added to each datapoint
       def add_data(conf)
-	      @data ||= []
-        raise "No data provided by #{conf.inspect}" unless conf[:data] and
-          conf[:data].kind_of? Array
+        @data ||= []
+        raise "No data provided by #{conf.inspect}" unless conf[:data].is_a?(Array)
         # support array of arrays and flatten it
         conf[:data] = conf[:data].flatten
         # check that we have pairs of values
         raise "Data supplied must be x,y pairs!  "+
           "The data provided contained an odd set of "+
           "data points" unless conf[:data].length % 2 == 0
-          
+
         # remove nil values
         conf[:data] = conf[:data].compact
-          
-        return if conf[:data].length == 0
 
-        conf[:description] ||= Array.new(conf[:data].size/2)
-        if conf[:description].size != conf[:data].size/2
-          raise "Description for popups does not have same size as provided data: #{conf[:description].size} vs #{conf[:data].size/2}"
-        end
+        return if conf[:data].length.zero?
+
+        add_data_init_or_check_optional_keys(conf, conf[:data].size / 2)
 
         x = []
         y = []
         conf[:data].each_index {|i|
           (i%2 == 0 ? x : y) << conf[:data][i]
         }
-        sort( x, y, conf[:description] )
-        conf[:data] = [x,y]
+        sort(x, y, conf[:description], conf[:shape], conf[:url])
+        conf[:data] = [x, y]
         # at the end data looks like:
         # [
         #   [all x values],
@@ -218,20 +220,25 @@ module SVG
         @border_right = label_right if label_right > @border_right
       end
 
-
       X = 0
       Y = 1
 
       def max_x_range
+        # needs to be computed fresh when called, to cover the use-case:
+        # add_data -> burn -> add_data -> burn
+        # when values would be cached, the graph is not updated for second burning
         max_value = @data.collect{|x| x[:data][X][-1] }.max
         max_value = max_value > max_x_value ? max_value : max_x_value if max_x_value
-        max_value
+        return max_value
       end
 
       def min_x_range
+        # needs to be computed fresh when called, to cover the use-case:
+        # add_data -> burn -> add_data -> burn
+        # when values would be cached, the graph is not updated for second burning
         min_value = @data.collect{|x| x[:data][X][0] }.min
         min_value = min_value < min_x_value ? min_value : min_x_value if min_x_value
-        min_value
+        return min_value
       end
 
       def x_label_range
@@ -246,11 +253,11 @@ module SVG
         end
         scale_range = max_value - min_value
 
-        scale_division = scale_x_divisions || (scale_range / 10.0)
+        scale_division = scale_x_divisions || (scale_range / 9.0)
         @x_offset = 0
-        
+
         if scale_x_integers
-          scale_division = scale_division < 1 ? 1 : scale_division.round
+          scale_division = scale_division < 1 ? 1 : scale_division.ceil
           @x_offset = min_value.to_f - min_value.floor
           min_value = min_value.floor
         end
@@ -261,7 +268,7 @@ module SVG
       def get_x_values
         min_value, max_value, @x_scale_division = x_label_range
         rv = []
-        min_value.step( max_value, @x_scale_division ) {|v| rv << v}
+        min_value.step( max_value + @x_scale_division , @x_scale_division ) {|v| rv << v}
         return rv
       end
       alias :get_x_labels :get_x_values
@@ -270,20 +277,22 @@ module SVG
         # exclude values which are outside max_x_range
         values = get_x_values
         @graph_width.to_f / (values.length - 1 ) # -1 is to use entire x-axis
-                                                 # otherwise there is always 1 division unused 
+                                                 # otherwise there is always 1 division unused
       end
 
-
       def max_y_range
         max_value = @data.collect{|x| x[:data][Y].max }.max
         max_value = max_value > max_y_value ? max_value : max_y_value if max_y_value
-        max_value
+        return max_value
       end
 
       def min_y_range
+        # needs to be computed fresh when called, to cover the use-case:
+        # add_data -> burn -> add_data -> burn
+        # when values would be cached, the graph is not updated for second burning
         min_value = @data.collect{|x| x[:data][Y].min }.min
         min_value = min_value < min_y_value ? min_value : min_y_value if min_y_value
-        min_value
+        return min_value
       end
 
       def y_label_range
@@ -298,11 +307,11 @@ module SVG
         end
         scale_range = max_value - min_value
 
-        scale_division = scale_y_divisions || (scale_range / 10.0)
+        scale_division = scale_y_divisions || (scale_range / 9.0)
         @y_offset = 0
-        
+
         if scale_y_integers
-          scale_division = scale_division < 1 ? 1 : scale_division.round
+          scale_division = scale_division < 1 ? 1 : scale_division.ceil
           @y_offset = (min_value.to_f - min_value.floor).to_f
           min_value = min_value.floor
         end
@@ -314,11 +323,11 @@ module SVG
         min_value, max_value, @y_scale_division = y_label_range
         if max_value != min_value
           while (max_value - min_value) < @y_scale_division
-            @y_scale_division /= 10.0
+            @y_scale_division /= 9.0
           end
         end
         rv = []
-        min_value.step( max_value, @y_scale_division ) {|v| rv << v}
+        min_value.step( max_value + @y_scale_division, @y_scale_division ) {|v| rv << v}
         rv << rv[0] + 1 if rv.length == 1
         return rv
       end
@@ -333,25 +342,23 @@ module SVG
         else
           dx = (max - values[-1]).to_f / (values[-1] - values[-2])
         end
-        @graph_height.to_f / values.length
+        @graph_height.to_f / (values.length - 1)
       end
-      
+
       def calc_coords(x, y)
         coords = {:x => 0, :y => 0}
         # scale the coordinates, use float division / multiplication
         # otherwise the point will be place inaccurate
-        coords[:x] = (x + @x_offset)/@x_scale_division.to_f * field_width 
+        coords[:x] = (x + @x_offset)/@x_scale_division.to_f * field_width
         coords[:y] = @graph_height - (y + @y_offset)/@y_scale_division.to_f * field_height
         return coords
       end
 
       def draw_data
         line = 1
-        
+
         x_min = min_x_range
-        x_max = max_x_range
         y_min = min_y_range
-        y_max = max_y_range
 
         for data in @data
           x_points = data[:data][X]
@@ -384,89 +391,93 @@ module SVG
             x_points.each_index { |idx|
               c = calc_coords(x_points[idx] -  x_min, y_points[idx] -  y_min)
               if show_data_points
-                DataPoint.new(c[:x], c[:y], line).shape(data[:description][idx]).each{|s|
+                shape_selection_string = data[:description][idx].to_s
+                if !data[:shape][idx].nil?
+                  shape_selection_string = data[:shape][idx].to_s
+                end
+                DataPoint.new(c[:x], c[:y], line).shape(shape_selection_string).each{|s|
                   @graph.add_element( *s )
                 }
               end
               make_datapoint_text( c[:x], c[:y]-6, y_points[idx] )
-              add_popup(c[:x], c[:y], format( x_points[idx], y_points[idx], data[:description][idx]))
+              add_popup(c[:x], c[:y], format( x_points[idx], y_points[idx], data[:description][idx].to_s), "", data[:url][idx].to_s)
             }
           end
           line += 1
         end
       end
-      
+
       # returns the formatted string which is added as popup information
       def format x, y, desc
         info = []
         info << (round_popups ? x.round : @number_format % x )
         info << (round_popups ? y.round : @number_format % y )
-        info << desc
+        info << desc if !desc.empty?
         "(#{info.compact.join(', ')})"
       end
-      
+
       def get_css
         return <<EOL
 /* default line styles */
 .line1{
 	fill: none;
 	stroke: #ff0000;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line2{
 	fill: none;
 	stroke: #0000ff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line3{
 	fill: none;
 	stroke: #00ff00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line4{
 	fill: none;
 	stroke: #ffcc00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line5{
 	fill: none;
 	stroke: #00ccff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line6{
 	fill: none;
 	stroke: #ff00ff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line7{
 	fill: none;
 	stroke: #00ffff;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line8{
 	fill: none;
 	stroke: #ffff00;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line9{
 	fill: none;
-	stroke: #ccc6666;
-	stroke-width: 1px;	
+	stroke: #cc6666;
+	stroke-width: 1px;
 }
 .line10{
 	fill: none;
 	stroke: #663399;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line11{
 	fill: none;
 	stroke: #339900;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .line12{
 	fill: none;
 	stroke: #9966FF;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 /* default fill styles */
 .fill1{
@@ -533,62 +544,62 @@ module SVG
 .key1,.dataPoint1{
 	fill: #ff0000;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key2,.dataPoint2{
 	fill: #0000ff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key3,.dataPoint3{
 	fill: #00ff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key4,.dataPoint4{
 	fill: #ffcc00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key5,.dataPoint5{
 	fill: #00ccff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key6,.dataPoint6{
 	fill: #ff00ff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key7,.dataPoint7{
 	fill: #00ffff;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key8,.dataPoint8{
 	fill: #ffff00;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key9,.dataPoint9{
 	fill: #cc6666;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key10,.dataPoint10{
 	fill: #663399;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key11,.dataPoint11{
 	fill: #339900;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key12,.dataPoint12{
 	fill: #9966FF;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 EOL
       end