SWF: MSCombi3D.swf
Quick Links (within this page) |
3D (Single Y) Combination chart looks as under: |
![]() |
Sample XML for 3D (Single Y) Combination chart: |
Chart Objects |
<chart> element Attributes |
Functional Attributes |
These attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties. |
|
Chart Titles and Axis Names |
Using these attributes, you can set the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc. |
|
Chart Cosmetics |
The following attributes let you configure chart cosmetics like background color, background alpha, canvas color etc. |
|
3D Functional Attributes |
The following attributes let you specify various functional attributes of 3D chart. |
|
Attribute Name | Type | Range | Description |
is2D | Boolean | 0/1 | Using this you can decide whether initially to draw a 2D view of the chart or not. |
clustered | Boolean | 0/1 | It lets you to set if multicolumn datasets will be rendered in a clusterd format or manhattan format. By default, this is set to 0 i.e. manhattan format. For more details on Clustered and Manhattan arrangement of columns, please refer to 3D Chart Attributes page in XML By Chart Elements section. |
chartOrder | String | It sets the order by which different types of charts will appear. The value can be any combination of 'column', 'line' or 'area', each separeted by a comma. By default, the order is: line, column, area. You can change to any order you like. E.g. 'column, area, line' or 'line, area'. | |
chartOnTop | Boolean | 0/1 | It allows the user to decide whether or not the chart canvas will be placed over the extra chart elements (caption, subcaption, legend). This feature is visible when the chart canvas is zoomed/scaled. The default value is 1. |
autoScaling | Boolean | 0/1 | It lets you decide whether or not the chart will be allowed to best fit automatically after a user interaction, for example, rotation. |
allowScaling | Boolean | 0/1 | It enables you to set whether to allow zoom-in/zoom-out using the mouse scroller. Note that scaling or use of mouse scrolller is compatible only with Windows Operating System. |
![]() |
3D Camera, Light & Rotation Attributes |
These attributes let you set up various aspects of 3D chart's camera/view settings, lighting features and rotation characteristics. |
Attribute Name | Type | Range | Description |
startAngX | Number | 0 to 360 / 0 to -360 | This attribute lets you specify the view angle (for view around the chart vertically) from which the rotation starts (when the chart is initialzed). The rotation stops at endAngX. If not specified, the default values for both the attributes are 30. It works only if animat3D is 1. For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
startAngY | Number | 0 to 360 / 0 to -360 | This attribute lets you specify the view angle (for view around the chart horizontally) from which the rotation starts (when the chart is initialzed). The rotation stops at endAngY. If not specified, the default values for both the attributes are -45. It works only if animat3D is 1.For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
endAngX | Number | 0 to 360 / 0 to -360 | This attribute lets you specify the view angle (for view around the chart vertically) at which the rotation ends (when the chart is initialzed). The rotation starts at startAngX. If not specified, the default values for both the attributes are 30. It works only if animat3D is 1.For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
endAngY | Number | 0 to 360 / 0 to -360 | This attribute lets you specify the view angle (for view around the chart horizontally) at which the rotation ends (when the chart is initialzed). The rotation starts at startAngY. If not specified, the default values for both the attributes are -45. It works only if animat3D is 1. For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
cameraAngX | Number | 0 to 360 / 0 to -360 | When animat3D is 0, this attribute lets you specify the camera angle (for view around the chart vertically) from which the chart is viewed initially. For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
cameraAngY | Number | 0 to 360 / 0 to -360 | When animat3D is 0, this attribute lets you specify the camera angle (for view around the chart horizontally) from which the chart is viewed initially. For more details on view angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
lightAngX | Number | 0 to 360 / 0 to -360 | Using this you can specify light x source's x angle. For more details on light angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
lightAngY | Number | 0 to 360 / 0 to -360 | Using this you can specify light x source's y angle. For more details on light angles, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
intensity | Number | 0-10 | It lets you to control the intensity of light that falls on the 3D chart canvas. 0 denotes minimum light while 10 is the maximum. Default value is 2.5. |
dynamicShading | Boolean | 0/1 | Whether to provide a light source, which is fixed outside the chart world, to create dynamic shades on the chart's face at the time of rotation. If dynamicShading is set to 0, a static light will be fixed with the chart world. For more details on this and lighting systems, please refer to 3D Chart Attributes page in XML By Chat Elements section. |
bright2D | Boolean | 0/1 | If you've set dynamicShading to 1, this attribute lets you decide whether a brighter view of the chart is renderd in 2D mode. This if set to 1, lightAngX and lightAngY (if defined) are not used by the chart. Rather, these light source angles are fixed at 0 position. |
allowRotation | Boolean | 0/1 | This attribute allows you decide whether to stop any user interactive rotation of the chart or not. If it is set to 0, the interactive rotation will be barred. JavaScript API rotateView() is not influenced by this. |
constrainVerticalRotation | Boolean | 0/1 | This attribute, if set to 1 will constrain the user from using full 360 degrees vertical rotation of 3D chart canvas. If this is set to 1, the user can rotate upto 90 degrees(top or bottom) from 0 degree position. User can also specify these limits using minVerticalRotAngle and minVerticalRotAngle attributes. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
minVerticalRotAngle | Number | 0-360 | If you've set constraintVerticalRotation to 1, using this attribute you can set the minimum allowed angle upto which a user can rotate the chart vertically. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
maxVerticalRotAngle | Number | 0-360 | If you've set constraintVerticalRotation to 1, using this attribute you can set the maximum allowed angle upto which a user can rotate the chart vertically. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
constrainHorizontalRotation | Boolean | 0/1 | This attribute, if set to 1 will constrain the user from using full 360 degrees vertical rotation of 3D chart canvas. If this is set to 1, the user can rotate upto 90 degrees(top or bottom) from 0 degree position. User can also specify these limits using minHorizontalRotAngle and minHorizontalRotAngle attributes. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
minHorizontalRotAngle | Number | 0-360 | If you've set constraintHorizontalRotation to 1, using this attribute you can set the minimum allowed angle upto which a user can rotate the chart horizontally. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
maxHorizontalRotAngle | Number | 0-360 | If you've set constraintHorizontalRotation to 1, using this attribute you can set the maximum allowed angle upto which a user can rotate the chart horizontally. This is only applicable to user's mouse intractivity with the chart. JavaScript API rotateView() is not influenced by this. |
![]() |
3D Plot Attributes |
These attributes let you configure how your plot (colums, lines, area that you're plotting) would appear on the chart. You can opt to show or hide plot borders, adjust space between two datasets or define thickness of dataplots. |
|
3D Wall Attributes |
A 3D chart canvas consists of 3 walls which we have named as XYWall, YZWall, ZXWall. You can set the depth of each wall. |
|
Divisional Lines, Grids & Zero Plane |
Using this set of attributes, you can control the properties of divisional lines, zero plane and alternate color bands. Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifes a smaller unit of the entire axis thus aiding the users in interpreting the chart. The zero plane is a plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won't see a visible zero plane. Alternate color bands are colored blocks between two successive divisional lines. |
|
Legend Properties |
In combination charts, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same. Also, the legend can be placed at the bottom of the chart or to the right of the chart. Using the attributes below, you can configure the functional and cosmetic properties of the legend. |
|
Number Formatting |
FusionCharts v3 offers you a lot of options to format your numbers on the chart. Using the attributes below, you can control a myriad of options like: |
|
Font Properties |
Using the attributes below, you can define the generic font properties for all the text on the chart. These attributes allow you a high level control over font properties. If you intend to specify font properties for individual chart elements (like Caption, sub-caption etc.), you'll need to use the STYLES feature of FusionCharts v3. Using STYLES, you can also specify advanced font properties like Bold, Italics, HTML Mode etc. |
|
Tool-tip |
These attributes let you control the tool tip. You can set the background color, border color, separator character and few other details. |
|
Chart Padding & Margins |
The following attributes help you control chart margins and paddings. FusionCharts v3 allows you manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionCharts is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent). You can also define the chart margins. Chart Margins refer to the empty space left on the top, bottom, left and right of the chart. That means, FusionCharts wouldn't plot anything in that space. It's not necessary for you to specify any padding/margin values. FusionCharts automatically assumes the best values for the same, if you do not specify the same. |
|
<categories> element |
The <categories> element lets you bunch together x-axis labels of the chart. For a multi-series/combination chart, it's necessary to provide data labels using <category> elements under <categories> element. The following properties of <categories> element help you control the font properties of data labels. |
|
<category> element |
Each <category> element represents an x-axis data label. In multi-series/combination charts, it's necessary to provide an equal number of <category> elements and data items (<set> elements within each <dataset>). FusionCharts plots only those data items for which it could find a respective <category> element. You can specify the following attributes for <category> element: |
|
<dataset> element |
Each <dataset> element contains a series of data. For example, if we're plotting a monthly sales comparison chart for 2 successive years, the first data-set would contain the data for first year and the next one for the second year. You can provide data-set level cosmetics so that all data within that data-set will be plotted in the same color/alpha/etc. Also, each data-set can be named using the seriesName attribute of <dataset> element. The series name appears in the legend of the chart. In our previous example, the series name could have well been 2005 and 2006 for first and second data-set respectively. Depending on the chart type, there are a number of properties which you can define for each <dataset> element. |
|
<set> element |
Each <set> element (child of <chart> or <dataset> element) represents a set of data which is to be plotted on the graph and determines a set of data which would appear on the chart. For a single series chart, a typical <set> element would look like: <set label='January' value='17400' /> For a multi-series chart, it could look like: <dataset seriesName='2006'> <set value='35445' /> <set value='35675' /> .... and so on .... </dataset> In combination charts, you should again note that the number of <category> elements should be equal to the number of data points in each data sets, i.e., if you mention twelve categories (twelve months), the data for both years (2005 & 2006) should also contain twelve <set> elements (twelve rows of data). |
|
Trend-lines |
Using the <trendLines> element (and children <line> elements), you can define trendlines on the chart. Trend lines are horizontall lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting sales data of current year, you might want to add previous year's average monthly sales as trend indicator for ease of comparison. For each trend line on the chart, you need to define a <line> element under <trendLines> element as under: <trendLines> <line startValue='895' color='FF0000' displayvalue='Average' /> </trendLines> You can control the cosmetic and functional properties of trend-lines using the following attributes: |
|