skip to the main content area of this page
In Appreciation of Open Flash Chart

OFC-2 - Depth Stacked 2D Bar Charts

OFC Logo

This patch implements the capability to overlap bars to generate "depth stacked" two dimensional bar charts. This is one of the formats requested by coofercat on the forum. This implementation works decent for up to three sets of bars but a big gap between bars will develop as the number of sets increases. This could be improved if the total number of sets were made available during the resize event.

Use the new "overlap" property to specify how much the bars should overlap each other. A value of 0.33 results in a roughly 50% overlap of the bars. (This is because both the positioning and the width of the bars are adjusted: the width of the first bar is increased by 33% but its position cannot change; then the second bar's width is increased 33% and its position is slid back 33% so that overlaps the first bar. This continues for the additional sets of bars.)

I think this type chart works best if the "alpha" value is set to 1 (totally opaque) but feel free to experiment with other values.

Patch Information

ID #TBD - Depth Stacked 2D Bar Charts

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

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

As of 15 March 2009:

Depth Stacked 2D Bar Charts HAS NOT been included in OFC2 Development

Sample Charts

This chart demonstrates three sets of bars which overlap in a depth stacked fashion.

Here is a link to view the JSON. Here is a quick look at the JSON:

              "elements":[
                 {
                  "type":      "bar",
                  "alpha":     1,
                  "overlap":   0.33,
                  "colour":    "#9933CC",
                  "text":      "Page views",
                  "font-size": 10,
                  "values" :   [9,6,7,9,5,7,6,9,7]
                 },
                 {
                  "type":      "bar",
                  "alpha":     1,
                  "overlap":   0.33,
                  "colour":    "#CC9933",
                  "text":      "Page views 2",
                  "font-size": 10,
                  "values" :   [4,9,6,7,9,5,7,6,9]
                 },
                 ...
              ],