jQuery Plug in Page

• chartData - This setting should contain the JSON data that the bar chart will be built from. [Default = {}]
  • Example JSON structure:

    {
    "COLUMNS":["X_BAR_LABEL","X_BAR_VALUE","X_BAR_COLOR", "TOOL_TIP_TITLE","DRILL_LINK"],
    "DATA":[
        ["Tom",1238,"#AA0000","Tom ^ ","TOM.JS"],
        ["Dick",1069,"#AA0000","Dick ^ ","DICK.JS"],
        ["Harry",1214,"#AA0000","Harry ^ ","HARRY.JS"],
        ["Mary",1262,"#AA0000","Mary ^ ","MARY.JS"],
        ["Louise",1975,"#AA0000","Louise ^ ","LOUISE.JS"],
        ["Sue",1076,"#AA0000","Sue ^ ","SUE.JS"]
    ]
    }

  • COLUMNS - This array requires at least "X_BAR_LABEL" and "X_BAR_VALUE"
    • X_BAR_LABEL - This column is used on the x-axis to identify each bar.
    • X_BAR_VALUE - This column is used to calculate the height of each bar and the scale used to define the y-axis.
    • X_BAR_COLOR - This is an optional column used to assign a background color for each bar.
    • TOOL_TIP_TITLE - This is an optional column used to place text in the "title" attribute of the bar. In the current built of ddChart, I integrate the tooltip plug-in to display each bar title in a tooltip div. This plug-in is setup to use " ^ " as a divider between the title of the tooltip bubble and the contents.
    • CONTEXT - This is a very helpful optional column that can be used to dynamically build your drill up bread crumbs below the chart.
    • DRILL_LINK - This is an optional column used to attach a click event to each bar that will drill down into more JSON data. Since the value of this column is a relative URL, the data is requested via AJAX and the chart drill down functionality is called using the new data.
    • DRILL_DATA - This is an optional column used in a way similar to the DRILL_LINK column, but the JSON is literally defined instead of being loaded from a URL. Example:

      {
      "COLUMNS":["CONTEXT","X_BAR_LABEL","X_BAR_VALUE","DRILL_DATA"],
      "DATA":[
          ["Store","Store 1",250,"Store 1 ^ ",
              {
                  "COLUMNS":["CONTEXT","X_BAR_LABEL","X_BAR_VALUE"],
                  "DATA":[
                  ["Staff","Tom",50],
                  ["Staff","Dick",75],
                  ["Staff","Harry",125]
                  ]
              }
          ],
          ["Store","Store 2",300,"Store 2 ^ ",
              {
                  "COLUMNS":["CONTEXT","X_BAR_LABEL","X_BAR_VALUE"],
                  "DATA":[
                  ["Staff","Mary",75],
                  ["Staff","Louise",100],
                  ["Staff","Sue",125]
                  ]
              }
      	]
      ]    
      }

  • DATA - This multidimensional array contains the rows of data that correspond to each element in the COMLUMNS array.
• chartDataLink - This setting should be used if chartData is not defined in order to load your JSON data from a URL via AJAX. [Default = '']
• action - This is the animated action (and various other steps) the ddChart should take when loading the provided data. This can be left blank as the system will make calls to this function itself, but it is fully functional incase you have some custom things you want to do. [Default = 'init']
  • init - This just loads the chart with the default upwards animation.
  • drilldown - When combined with a drillLabel this will load the new data provided and animate the chart as though it were zooming in on the bar matching the drillLabel provided.
  • drillup - This will load the new data and animate the chart as though it were zooming out, shoving the old bar chart back into the bar matching the drillLabel provided.
• drillLabel - This is used in combination with the action setting so the drill animation knows what bar to interact with. [Default = '']
• chartContext - This is used to apply HTML to the chart caption, but it can be left blank if the CONTEXT column is defined in your JSON. Using the CONTEXT column will define your breadcrumbs automatically if this setting is left blank. [Default = '']
• animationDelay - Animation delay timer [Default = 3000]
• margin - Space between bars [Default = 1]
• xOddClass - Class to apply to odd x-axis labels [Default = '']
• xEvenClass - Class to apply to even x-axis labels [Default = '']
• yOddClass - Class to apply to odd y-axis labels [Default = '']
• yEvenClass - Class to apply to even y-axis labels [Default = '']
• xWrapperClass - Class to apply to x-axis container [Default = '']
• chartWrapperClass - Class to apply to chart container [Default = '']
• chartBarClass - Class to apply to chart's bars [Default = '']
• chartBarHoverClass - Class to apply to chart's bars on hover [Default = '']
• callBeforeLoad - Optional callback function to run before the AJAX call is made when loading JSON from a URL [Default = null]
• callAfterLoad - Optional callback function to run after the chart is loaded [Default = null]
• tooltipSettings - Settings used by the jQuery tooltip plug in if it is loaded.