OFC-2 - Horizontal Stacked Bars Patch

This patch implements horizontal stacked bar charts. It is very similar to the normal stacked bar chart except of course it draws the bars horizontally! Instead of just specifying a value for each stack of the bar, you must specify both a "left" and a "right" value for each of the stacks. The downside is that there is more data you have to provide but the upside is that the stacks do not have to be contiguous. This is demonstrated below.

This example is NOT compatible with the OFC2-Hyperion release.

Patch Information

ID #TBD - Horizontal Stacked Bars

I will generate a patch after the next release of OFC2.

Download a prebuilt SWF and source code on the Downloads page.

As of 28 February 2009:

Horizontal Stacked Bars have NOT been included in OFC2

Sample Chart

Here is a link to view the JSON and here is the chart:

Below is a partial listing of the JSON for the Horizontal Stacked Bars shown above.

  "elements":[
    {
      "type":      "hbar_stack",
      "colours":   ["#FF0000","#0000FF","#000000"],
      "id":1,
      "keys": [
        {"colour":"#FF0000", "text":"Cost of Goods", "font-size": 12},
        {"colour":"#0000FF", "text":"Labor Cost"},
        {"colour":"#000000", "text":"Profit"}
      ],
      "font-size":12,
      "tip":"#key#<br>#val# / #total#",
      "barwidth":0.8,
      "values": [
        [{"left":0, "right":1000},{"left":1100,"right":1600}, {"left":1700, "right":1900}],
        
        [{"left":0, "right":1400}, {"left":1400, "right":2000},{"left":2000, "right":2300}],
        
        [{"left":0, "right":800},{"left":800, "right":1100}, {"left":1100, "right":1200}],
        
        [{"left":0, "right":1400},{"left":1400, "right":2000}, {"left":2000, "right":2500}, 
         {"left":2500, "right":2600, "text":"Bonus :)", "colour":"#00FF00"}],
        ]
    }
  ],

  "tooltip":{"mouse":2},
  
  "y_axis":{
    "labels": {
      "labels": [{"y":0,"text":"January"},{"y":-1,"text":"February"},
                 {"y":-2,"text":"March"}, {"y":-3,"text":"April"}]
    },
    "stroke": 2,
    "tick-length": 4,
    "max":0,
    "min":-3,
    "offset":1
  },

"left" and "right" MUST be specified for each stack within a bar. Notice that they do not have to be contiguous and you can in fact overlap them if you are not careful.

"barwidth" allows you to specify how much of the slot the bar should take up. By default this value is 0.8 so that there is a gap between each of the bars (not the stacks within the bars). If you want the bars to touch then you can set "barwidth" to 1.0

Note that setting the tooltip's "mouse" mode to 2 works the best with horizontal bars and the horizontal stacked bars.

NOTICE that when specifying the Y Axis Labels that I set "max":0 and "min":-3. First, you must specify at least a "max" for the Y Axis because it will default to 10 if it is not set. Second, the bars are drawn starting at the top and working down so setting the "max" to zero and going negative on the values allows you to specify the labels in the same order as the bars. (This is consistent with the horizontal bar charts.) You could of course also specify your Y Axis Labels in reverse order going from 0 and up positive numbers.

NOTICE that you should also set the Y Axis "offset":1 parameter so that the lowest bar does not line up on the X Axis.