Page Comparison

While you can access the chart component through Design Studio's graphical UI, Design Studio does not provide a nice interface for defining all of your properties yet, nor does it provide the appropriate UI for determining how and where you are going to specify your chart properties (as an input or resource - Design Studio puts the chart-attributes element in the component definition by default). These enhancements will come (or you can contribute them!), but for now, you will need to use the XML editing tab of the action sequence to add your chart properties.

|Chart Reference].

h2. Inputs

_REQUIRED INPUTS_

*chart-data*

The dataset that you want the chart to render. Often, this is the output of a SQLLookupRule action, but can come from a number of source actions.

*chart-attributes*

The chart component expects several [chart properties|Chart Properties Reference] in order to render the proper chart and display your data appropriately. There are several ways to define chart attributes in an action sequence. You can specify the properties in an *input*, as a *resource*, or in-line in the *component definition* section of the action sequence.
{note:title= The Chart Component and Design Studio}
While you can access the chart component through Design Studio's graphical UI, Design Studio does not provide a nice interface for defining all of your properties yet, nor does it provide the appropriate UI for determining how and where you are going to specify your chart properties (as an input or resource - Design Studio puts the chart-attributes element in the component definition by default). These enhancements will come (or you can contribute them\!), but for now, you will need to use the XML editing tab of the action sequence to add your chart properties.
{note}

h3. Chart Attributes as an Input

You can specify your chart properties as a String input parameter. The caveat to this input is that the chart properties need to be represented in the string in XML format, inside of a *CDATA* section.

The string input parameter to the chart component must be named *chart-attributes*.

Here is an example of specifying your chart properties as an input string. You of course can also derive this string in a prior action, say, possibly a JavaScript rule.
{code:xml|borderStyle=solid}
<inputs>
    <attributes type="string">
      <sources>
        <request>attributes</request>
      </sources>
      <default-value>

      <![CDATA[

      <chart-attributes>
          <chart-type>BarChart</chart-type>
          <border-visible>false</border-visible>
          <is-clickable>false</is-clickable>
          <include-legend>true</include-legend>

          ... more chart attributes here ...

      </chart-attributes>

      ]]>

      </default-value>
    </attributes>
  </inputs>

   ...

  <action-definition>
      <component-name>ChartComponent</component-name>
      <action-type>Bar Chart</action-type>
      <action-inputs>
        <chart-data type="result-set" mapping="query_result"/>
        *<chart-attributes type="string" mapping="attributes"/>*
      </action-inputs>

   ...

{code}

h3. Chart Attributes in the Component Definition

By default, the Design Studio will put the chart-attributes XML node in the component definition. This in-line mode of describing the chart is fine, but can be problematic if you want to dynamically add or change a chart property in the process of your action sequence. Which is why we added the ability to define the chart properties in a resource or input definition.

Chart attributes described in-line in the component definition look similar to this:
{code:xml|borderStyle=solid}
<action-definition>
      <component-name>ChartComponent</component-name>
      <action-type>Bar Line Chart</action-type>

       ...

      <component-definition>
        <chart-attributes>
          <chart-type>BarLineChart</chart-type>
          <border-visible>true</border-visible>
          <include-legend>false</include-legend>
          <is-3D>false</is-3D>
          <markers-visible>false</markers-visible>

          ... more chart attributes here ...

        </chart-attributes>
      </component-definition>
    </action-definition>
{code}
_OPTIONAL INPUTS

\\
{code:xml|title=Sample Chart.xaction

}
<action-sequence>
  <name>Chart.xaction</name>
  <title>Default Title</title>
  <version>1</version>
  <logging-level>DEBUG</logging-level>
  <documentation>
    <author>William E. Seyler</author>
    <description>Default Description</description>
    <icon>JFree-quadrant-budget-hsql.png</icon>
    <help>Help</help>
    <result-type>rule</result-type>
  </documentation>
  <inputs>
    <chart-type type="string">
      <default-value>.png</default-value>
      <sources>
        <request>type</request>
      </sources>
    </chart-type>
  </inputs>
  <actions>
    <action-definition>
      <action-outputs>
        <result-set type="list" />
      </action-outputs>
      <component-name>SQLLookupRule</component-name>
      <action-type>rule</action-type>
      <component-definition>
        <source>sql</source>
        <live>true</live>
        <jndi>SampleData</jndi>
        <query>
          <![CDATA[select QUADRANT_ACTUALS.REGION, QUADRANT_ACTUALS.DEPARTMENT,
            QUADRANT_ACTUALS.POSITIONTITLE, QUADRANT_ACTUALS.ACTUAL, QUADRANT_ACTUALS.BUDGET
            from QUADRANT_ACTUALS order by QUADRANT_ACTUALS.REGION,QUADRANT_ACTUALS.DEPARTMENT]]>
        </query>
      </component-definition>
      </action-definition>
      <action-definition>
        <action-inputs>
          <output-type type="string" mapping="chart-type" />
          <result-output type="file" />
          <chart-data type="list" mapping="result-set" />
        </action-inputs>
      <action-outputs>
        <chart-output type="string" />
        <base-url type="string" />
      </action-outputs>
      <component-name>ChartComponent</component-name>
      <action-type>report</action-type>
      <component-definition>
        <by-row>false</by-row>
        <chart-attributes>
          <chart-type>PieChart</chart-type>
          <title>Actual vs Budget by Region</title>
          <title-position>TOP</title-position>
          <title-font>
            <font-family>Serif</font-family>
            <size>36</size>
            <is-bold>false</is-bold>
            <is-italic>false</is-italic>
          </title-font>
          <range-title>US Dollars</range-title>
          <chart-background type="color">#FFFFFF</chart-background>
          <plot-background type="color">#FF0000</plot-background>
          <orientation>Horizontal</orientation>
          <height>400</height>
          <width>800</width>
          <is-3D>true</is-3D>
          <is-stacked>false</is-stacked>
          <category-label-rotation>90</category-label-rotation>
          <border-visible>false</border-visible>
          <border-paint>#3399FF</border-paint>
          <include-legend>true</include-legend>
        </chart-attributes>
      </component-definition>
    </action-definition>
  </actions>
</action-sequence>
{code}\\
\\
\\
\\
\\
\\