ChartDirector 6.0 (Ruby Edition)
Pos/Neg Waterfall Chart
Source Code Listing
require("chartdirector") class PosnegwaterfallController < ApplicationController def index() @title = "Pos/Neg Waterfall Chart" @ctrl_file = File.expand_path(__FILE__) @noOfCharts = 1 render :template => "templates/chartview" end # # Render and deliver the chart # def getchart() # 4 data points to represent the cash flow for the Q1 - Q4 data = [230, -140, 220, 330] # We want to plot a waterfall chart showing the 4 quarters as well as the total labels = ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"] # The top side of the bars in a waterfall chart is the accumulated data. We use the # ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by # inserting a zero point at the end before accumulation (after accumulation it will become # the total). boxTop = ChartDirector::ArrayMath.new(data).insert2(0, 1, data.length).acc().result() # The botom side of the bars is just the top side of the previous bar. So we shifted the top # side data to obtain the bottom side data. boxBottom = ChartDirector::ArrayMath.new(boxTop).shift(1, 0).result() # The last point (total) is different. Its bottom side is always 0. boxBottom[boxBottom.length - 1] = 0 # In this example, we want to use different colors depending on the data is positive or # negative. posColor = 0x00ff00 negColor = 0xff0000 # Create a XYChart object of size 500 x 280 pixels. Set background color to light blue # (ccccff), with 1 pixel 3D border effect. c = ChartDirector::XYChart.new(500, 300, 0xccccff, 0x000000, 1) # Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text # on a deep blue (0x80) background c.addTitle("Corporate Cash Flow - Year 2004", "arialbi.ttf", 13, 0xffffff).setBackground( 0x000080) # Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey # background. c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee) # Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with # transparent background and border color. b = c.addLegend(55, 25, false, "arialbd.ttf", 8) b.setBackground(ChartDirector::Transparent, ChartDirector::Transparent) # Add keys to show the colors for positive and negative cash flows b.addKey("Positive Cash Flow", posColor) b.addKey("Negative Cash Flow", negColor) # Set the labels on the x axis using Arial Bold font c.xAxis().setLabels(labels).setFontStyle("arialbd.ttf") # Set the x-axis ticks and grid lines to be between the bars c.xAxis().setTickOffset(0.5) # Use Arial Bold as the y axis label font c.yAxis().setLabelStyle("arialbd.ttf") # Add a title to the y axis c.yAxis().setTitle("USD (in millions)") # Add a box-whisker layer to represent the waterfall bars layer = c.addBoxWhiskerLayer(boxTop, boxBottom) # Color the bars depending on whether it is positive or negative 0.upto(boxTop.length - 1) do |i| if boxTop[i] >= boxBottom[i] layer.setBoxColor(i, posColor) else layer.setBoxColor(i, negColor) end end # Put data labels on the bars to show the cash flow using Arial Bold font layer.setDataLabelFormat("{={top}-{bottom}}M") layer.setDataLabelStyle("arialbd.ttf").setAlignment(ChartDirector::Center) # Output the chart send_data(c.makeChart2(ChartDirector::PNG), :type => "image/png", :disposition => "inline") end end |
<html> <body style="margin:5px 0px 0px 5px"> <!-- Title --> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> <%= @title %> </div> <hr style="border:solid 1px #000080" /> <!-- Source Code Listing Link --> <div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em"> <%= link_to "Source Code Listing", :controller => "cddemo", :action => "viewsource", :ctrl_file => @ctrl_file, :view_file => File.expand_path(__FILE__) %> </div> <!-- Create one or more IMG tags to display the demo chart(s) --> <% 0.upto(@noOfCharts - 1) do |i| %> <img src="<%= url_for(:action => "getchart", :img => i) %>"> <% end %> </body> </html> |
#!/usr/bin/env ruby require("chartdirector") # 4 data points to represent the cash flow for the Q1 - Q4 data = [230, -140, 220, 330] # We want to plot a waterfall chart showing the 4 quarters as well as the total labels = ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter", "Total"] # The top side of the bars in a waterfall chart is the accumulated data. We use the ChartDirector # ArrayMath utility to accumulate the data. The "total" is handled by inserting a zero point at the # end before accumulation (after accumulation it will become the total). boxTop = ChartDirector::ArrayMath.new(data).insert2(0, 1, data.length).acc().result() # The botom side of the bars is just the top side of the previous bar. So we shifted the top side # data to obtain the bottom side data. boxBottom = ChartDirector::ArrayMath.new(boxTop).shift(1, 0).result() # The last point (total) is different. Its bottom side is always 0. boxBottom[boxBottom.length - 1] = 0 # In this example, we want to use different colors depending on the data is positive or negative. posColor = 0x00ff00 negColor = 0xff0000 # Create a XYChart object of size 500 x 280 pixels. Set background color to light blue (ccccff), # with 1 pixel 3D border effect. c = ChartDirector::XYChart.new(500, 300, 0xccccff, 0x000000, 1) # Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text on a # deep blue (0x80) background c.addTitle("Corporate Cash Flow - Year 2004", "arialbi.ttf", 13, 0xffffff).setBackground(0x000080) # Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey background. c.setPlotArea(55, 50, 430, 215, 0xffffff, 0xeeeeee) # Add a legend box at (55, 25) using 8pt Arial Bold font with horizontal layout, with transparent # background and border color. b = c.addLegend(55, 25, false, "arialbd.ttf", 8) b.setBackground(ChartDirector::Transparent, ChartDirector::Transparent) # Add keys to show the colors for positive and negative cash flows b.addKey("Positive Cash Flow", posColor) b.addKey("Negative Cash Flow", negColor) # Set the labels on the x axis using Arial Bold font c.xAxis().setLabels(labels).setFontStyle("arialbd.ttf") # Set the x-axis ticks and grid lines to be between the bars c.xAxis().setTickOffset(0.5) # Use Arial Bold as the y axis label font c.yAxis().setLabelStyle("arialbd.ttf") # Add a title to the y axis c.yAxis().setTitle("USD (in millions)") # Add a box-whisker layer to represent the waterfall bars layer = c.addBoxWhiskerLayer(boxTop, boxBottom) # Color the bars depending on whether it is positive or negative 0.upto(boxTop.length - 1) do |i| if boxTop[i] >= boxBottom[i] layer.setBoxColor(i, posColor) else layer.setBoxColor(i, negColor) end end # Put data labels on the bars to show the cash flow using Arial Bold font layer.setDataLabelFormat("{={top}-{bottom}}M") layer.setDataLabelStyle("arialbd.ttf").setAlignment(ChartDirector::Center) # Output the chart c.makeChart("posnegwaterfall.png") |