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

OFC-2 - Y Value as Elapsed Time

Open Flash Chart Logo

This patch implements some new magic values that make it easy to make charts that use the Y value as elapsed time. When the Y value is used as elapesd time, the value must be in seconds and then this patch can be used to format labels and tooltips to show hours, minutes and seconds instead of just total seconds. In order to do this properly the Y value has to be treated as if it were GMT/UTC time instead of the local time which automatically adds a time zone adjustment.

This patch introduces three new magic values:

#gmdate:____# is used to format a value as GMT time when there is no ambiguity as to whether the X value or the Y value is being referred. This is the case for X and Y Axis labels and in bar charts it is applied to the "val" value of the bar. In the case of tooltips when both X and Y values are available then this magic value is applied to the X value.

#ygmdate:____# is used to format the Y value as GMT time. It can be used in tooltips to format the Y value as time. It can also be used for the Y Axis labels if desired.

#totalgmdate:____# is used to format the #total# value of bar stacks as GMT time in tooltips.

You specify the desired formatting the same way you do for the PHP "gmdate" function. This is detailed at the end of the JSON documentation for the X Axis.

This example is NOT compatible with the OFC2-Hyperion.

Patch Information

ID #2471115 - Y as Elapsed Time

Built with Rev #414 dated 16 December 2008. Patches are uploaded to the SourceForge SVN at OFC2 Patch Tracker

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

As of 27 December 2008:

Y as Elapsed Time has NOT been included in OFC2

Sample Chart

Here is a link to view the JSON and the chart is below.

Here is the JSON for the Stacked Bars in the chart above:

NOTICE: The "key" property was changed to a "text" property on 17-January-2009 to better conform with the key implementation of other chart types.

  {
    "type": "bar_stack",
    "tip": "#key#<br>Time: #gmdate:H:i# Total: #totalgmdate:H:i#",
    "colours": ["#FF0000", "#0000FF", "#00FF00", "#FFFF00", "#FF00FF"],
    "values":[ 
      [{"text": "Issue 2026", "val": 468 },
       {"text": "Estimate", "val": 1620},
       {"text": "Issue 2022", "val": 2736},
       {"text": "Issue 2020", "val": 1440},
       {"text": "Issue 1934", "val": 10296}
      ],
      [{"text": "Theming", "val": 936} ],
      [{"text": "Panels", "val": 7308},
       {"text": "Issue 2027", "val": 4536},
       {"text": "Theming", "val": 2196}
      ],
      [{"text": "Issue 2024", "val": 5940},
       {"text": "", "val": 396}
      ],
      [{"text": "Issue 2024", "val": 14580}],
      [{"text": "Issue 2024", "val": 19620}],
      [{"text": "Issue 2024", "val": 11556}]
    ]
  },

And here is the JSON for the Scatter Line portion in the chart above:

  {
    "type":"scatter_line",
    "text":"Issue 2024",
    "dot-style":{"type":"dot"},
    "tip": "Issue 2024<br>Total Time: #ygmdate:H:i#",
    "colour": "#22BBDD",
    "values": [ {"x":3, "y":5940},
                {"x":4, "y":20520},
                {"x":5, "y":40140},
                {"x":6, "y":51696}
     ]
  }

And here is the JSON for the Tag shown in the chart above:

  {
    "type":"tags",
    "align-y":"below",
    "values": [ {"x":6, "y":51696, 
                 "text":"Issue 2024\n#ygmdate:H# hours\n#ygmdate:i# mins"}
      ]
  }