OFC-2 - Formatted Automatic X Axis Labels

The chart below demonstrates that the current automatic labels will still work like they always have... A label is created for every point from 0 to the auto determined max.

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

        "x_axis":{},

-----

The chart below demonstrates that the current methods of passing in an array of strings still works just like it always has.

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

        "x_axis":{"labels" : { "rotate":270,
                               "labels":["2:00am","2:10","2:20","2:30","2:40","2:50",
                                         "3:00am","3:10","3:20","3:30","3:40","3:50",
                                         "4:00am","4:10","4:20","4:30","4:40","4:50",
                                         "5:00am","5:10","5:20","5:30","5:40","5:50",
                                         "6:00am","6:10","6:20","6:30","6:40","6:50",
                                         "7:00am","7:10","7:20","7:30","7:40","7:50",
                                         "8:00am","8:10","8:20","8:30","8:40","8:50",
                                         "9:00am","9:10","9:20"] }},

-----

The chart below demonstrates that you can specify a minimum value for the X Axis and it will be used to generate the labels starting at that value.

WARNING: You also must specify the "max" value otherwise the automatic min/max determine will be used and the specified "min" will be overridden back to zero.

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

        "x_axis":{ "min":5, "max":49 }, 

-----

The chart below builds on using the min value set to 5 and then adds in user formatted labels and only displaying every third label. Notice that even though only every third label is visible, the labels for the invisible labels are still available in the tool tip using the #x_label# magic value.

NOTICE: In the "labels" object both a "steps" and a "visible-steps" value are specified. If you need the X Labels to be available for tool tips then every label must be created ("steps" = 1) and then use the "visible-steps" value to determine which labels are actually displayed on the X Axis. The "visible-steps" value goes by the number of labels and not by the X value (every third label after the first one is displayed and not every label with an X value that is divisible by 3. If "visible-steps" is not specified then it will be the same value as "steps".

NOTICE: In the "labels" object, the "text" value specifies the format for the labels and #val# is the magic value that will be replaced with the X value. This is similar to the way that tool tips work.

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

          "x_axis":{"min":5, "max":49, "steps": 3,  // grid lines for every third point
                    "labels": {"rotate":270, 
                               "text":"Label #val#",     // format for the label
                               "steps":1,                // save every label text 
                               "visible-steps":3 } },    // but show every 3rd one

-----

The chart below demonstrates the ability to specify specific X Values where the labels and grid lines should be displayed.

WARNING: There are 3 labels defined and those 3 labels show up in the tooltips for the first three points if the #x_label# magic value is used. If you are specifying only some of the labels then you should NOT use the #x_label# magic value in the tooltips.

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

          "x_axis":{"min" : 5, "max":50,
                    "labels": {"text":"lbl #val#", 
                               "labels": [{"x":6}, {"x":14}, 
                                          {"x":31, "text":"override #val#"} ] } },

-----

The chart below demonstrates the ablity to not display any labels but still have them available in the tooltips using the #x_label# magic value.

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

          "x_axis":{ "steps": 1, "min" : 5, "max":50, "labels": { "visible":false } },

-----

The chart below demonstrates using a reversed X Axis with the min value greater than the max value. Reversed axis with an offset was a headache! I think this also fixes a bug in OFC2 where labels were not displayed if the X Axis was reversed.

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

          "x_axis":{ "min":50, "max":5, "offset":true, "labels":{"rotate":270 }},

-----

The chart below demonstrates using auto-generated and formatted labels with a unix timestamp as the X Value for a scatter line chart. You know I have to include my favorite type of chart :-). The "steps" is set to 86400 which is the number of seconds in a day which will generate a tick mark for each day and then the "visible-steps" is set to 2 so that only every othe label is displayed.

WARNING: With numbers this huge you do not want to be stepping by 1 which will probably cause Flash to give the warning that the movie has been locked up for 15 seconds.

This patch introduces two new magic values for dates that can be used in both X Axis Labels and in Tooltips for Scatter and Scatter Line Charts. These magic values are explained at the end of the JSON documentation here: xxx

WARNING: If you are using a unix timestamp as the x value then you do not want to use the #x_label# magic value in the tooltip. You should use the #date# (a defined format) and #date:____# (a user defined format) magic values in the tooltips (Another patch).

It is not demonstrated here but you can also specify specific X Values for the tick marks and labels as demonstrated above.

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

        "x_axis": { "min": 1220245200, "max": 1221368400,
                    "steps": 86400,               // seconds in a day
                    "labels":{"rotate":"vertical", "steps":86400, "visible-steps":2,
                              "text":"#date#"     // apply default date format to X axis labels
                             }},

-----

The chart below demonstrates the "justify" property which allows you to specify how to justify the lines of a multiple line label. You use the new line character (\n) to indicate where the lines break. You can define the label justification at the first "labels" level or override it for each individual label as is demonstrated below. The valid values are "left", "center" and "right",

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

        "x_axis":{"colour":"#909090",
                  "labels":{"justify":"left",
                            "rotate":0,
                            "size":13,
                            "labels": [
          {"x":0, "text":"genel\n-162,19\njustify=left", "justify":"left"},
          {"x":1, "text":"merha\n482,86\njustify=center", "justify":"center"},
          {"x":2, "text":"eleman\n120,95\njustify=right", "justify":"right"},
          "onyet\n309,4"   // picks up the "left" justifocation specified above
                   ] }
        }

-----