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

OFC-2 - Formatted Automatic Y Axis Labels

OFC Logo

This patch implements the capability to format automatic labels generated for the Y Axis using magic values similar to the way tooltips work. You can also specify a set of values where you want the labels and tick marks to display using formatted labels as well as predefined labels. This formatting applies to both the left Y Axis and the right Y Axis.

Patch Information

ID #2397839 - Formatted Y Labels

Built with Rev #400 dated 6 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 15 December 2008:

Formatted Automatic Y Labels HAVE been included in OFC2 Development

Sample Charts

NOTICE: All of these sample charts show both the left and the right Y Axes. The rigth Y Axis is shown with the min and max values inverted and is only shown to demonstrate the formatting of the labels. None of the data points are actually plotted against it.

The chart below demonstrates that the current automatic labels will still work like they always have... A label is created for every step between the minimum and the maximum.

WARNING: You must specify both the "min" and the "max" values for the Y Axes otherwise they will default to 0 to 10 instead of automatically figured values.

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

          "y_axis":{ "steps": 0.5, "min" : 0, "max":3 },
          
          "y_axis_right":{ "steps": 1, "min" : 3, "max":0 },

-----

The chart below demonstrates the same chart as above with the addition of the label_style attributes used to specify the size and colour of the labels.

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

        "y_label__label_style":"12,#669999",
        "y_axis":{ "steps": 0.5, "min" : 0, "max":3 },
  
        "y_label_2__label_style":"12,#DD3030",
        "y_axis_right":{ "steps": 3, "min" : 0, "max":20 },

-----

The chart below demonstrates the capability to use formatted labels with the automatic label generation.

NOTICE: The magic value #val# is used in the "text" attribute to indicate where in the label the Y value is to be inserted.

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

          "y_axis":{ "steps": 0.5, "min" : 0, "max":3, "rotate":"vertical",
                     "labels": {"text":"left #val#", 
                                "colour":"#DD3030", "size":12}},
  
          "y_axis_right":{ "steps": 1, "min" : 3, "max":0, "rotate":"vertical",
                           "labels": {"text":"right #val#", 
                                      "colour":"#DD30DD", "size":10}},

-----

The chart below demonstrates how to place labels at specific locations on the Y Axes.

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

            "y_axis":{"min" : 0, "max":3, "rotate":"vertical",
                "labels": {"text":"left #val#", "colour":"#DD30DD", "size":12,
                           "labels": [ {"y":0.25}, {"y":1.685}, 
                                       {"y":2.45, "text":"override #val#", 
                                            "colour":"#44AA44", "size":10, "rotate":""},
                                       {"y":3} ] }},
  
            "y_axis_right":{"min" : 3, "max":0, "rotate":"vertical",
                "labels": {"text":"right #val#", "colour":"#30AA30", "size":10,
                           "labels": [{"y":0.25}, {"y":1.685},
                                      {"y":2.45, "text":"override #val#", 
                                           "colour":"#4444AA", "size":12, "rotate":""},
                                      {"y":3}] }},

-----

  • View JSON documentation for the Y Axis