WebCharts3D

Frame Charts

Bar, Line, Area, Curve and many other types of charts that can be displayed inside a frame are called Frame charts in WebCharts3D.

Selecting shape style

Shape style determines the shape of the elements displayed inside the frame charts. WebCharts3D supports a large number of shapes including Bar, Pyramid, Line, Area, Curve, Step and others. To change tthe chart's shape style open Elements properties group and click on shape combobox. The default shape type is Bar and a frame chart with all attributes set to default values looks like this

Xml Style:

<frameChart> </frameChart>

Adjusting Y axis range and label count

By default the range of Y axis is determined automatically based on the minimum and maximum values in the model. In our case the minimum value is 100 and the maximum value is 550. Typically you would want to display Y axis properties panel (the Y Axis properties panel is identical to X Axis and Y Axis 2 so anything said about one can be applied to the other) starting from zero, or at include zero into the Y axis range. To do so, open Y Axis properties panel and enter 0 as scale min parameter. When scale min or/and max is defined Y axis will include them inside its range. The range can still be expanded beyond these limits if the chart contains values outside of specified range. Now the chart should look like this

Xml Style:

<frameChart> <yAxis scaleMin="0"/> </frameChart>

The maximum value in the chart's data is 550 but the chart automatically determined the preferred number of labels and extended the range to display neat labels. You can override this behavior by specifying the number of labels to display. Open YAxis properties panel and enter 6 as Label count. The chart will change to

Xml Style:

<frameChart> <yAxis scaleMin="0" labelCount="6"/> </frameChart>

When a positive value is specified for Label count the chart will display the exact number of labels using the range defined by scaleMin and scaleMax and the chart's data. You can also specify a negative value for this attribute. A negative value tells the engine to display nice round values as the labels taking the absolute value of label count attribute as a hint. The engine will attempt to expand the range in order to display these labels, but if it fails it will change the label count.

Adjusting the Orientation and Color

The angle of the labels can be adjusted by using the orientation option in the Y Axis textbox. The default setting for the orientation is horizontal and can be changed to vertical, slanted, and parallel. Horizontal, slanted, and vertical make the the angle a defined value while parallel makes the label line up with the axis. Change it to parallel so that the y axis label is parallel to the y axis.

Xml Style:

<frameChart> <yAxis scaleMin="0" labelCount="6">

<labelStyle orientation="Parallel"/> </yAxis> </frameChart>

Underneath the orientation option is the color option which allows you to change the color from a default of blue. However for now just change the color to blue, so that you have an idea as to how to change the coloring. Nothing except the xml style code should change.

Xml Style:

<frameChart> <yAxis scaleMin="0" labelCount="6">

<labelStyle color="blue"

orientation="Parallel"/> </yAxis> </frameChart>

You can also make the labels of one axis on two different levels using the multilevel option. This makes the data look a bit more spaced out.

Managing the title of the labels

In order to add a title for a label you must type it into the textbox located in the top right part of the yAxis menu. Type Profit into the title textbox and it will be displayed next to the y axis.

Xml Style:

<frameChart> <yAxis scaleMin="0" labelCount="6">

<labelStyle color="blue"

orientation="Parallel"/>
<titleStyle>Profit
</titleStyle> </yAxis> </frameChart>

Like as in the labels you can adjust the coloring and the font for the title. You can also change the margin, the spacing between the title and the label. Change the default margin of zero to five so it increases.

Xml Style:

<frameChart> <yAxis scaleMin="0" labelCount="6">

<labelStyle color="blue"

orientation="Parallel"/>
<titleStyle margin="5">Profit
</titleStyle> </yAxis> </frameChart>

The Y Axis menu is identical to the X Axis and the Y Axis 2 in almost everything except for what they effect

Managing the Format of the Axis

Besides being able to change the placement and color of the Axis Labels you can also change the format of the information to correspond with the type that you wish to display. This allows for the type of chart that you select in the style part of the axis menu. For instance if you wanted to change the y axis from numbers to currency then you would need to change the Label Format to currency. The frame chart will automatically adjust the number of labels to make room.

Xml Style:

        <frameChart>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>
        </frameChart>

The Parse format allows you to specify the correct imput so that the Label format can modify the information accordingly. This is needed if you want to use the DateTime type of chart. First you need to imput all the information into the Xml Model (the tab is located at the bottom of the window). Then switch back to Design and go into the xAxis menu. In style change the type to DateTime. In Format change the Parse Format to the format which you put in the date and change the Label Format to the format which you wish to be displayed. This is useful as as a time saver as you can put in a short date as the parse and show a long date as the actual label.

Managing the Frame Colors

In Webcharts 3D you can modify what the frame chart looks like using the frame menu. The frame menu is specific to frame charts. Quit out of the axis menu if you are still and open up the frame menu. From here you can adjust the coloring, the size and type of the frame. Change the Wall and dark colors to blue. This will change the color of the bottom and the side of the frame to blue.

Xml Style:

       <frameChart>

             <frame darkColor="blue" wallColor="blue"/>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>
        </frameChart>

At the bottom left is the paint menu. This changes the colors of the back of frame besides being able to change the background from a single color you can change the style to a gradient and select the colors that will be displayed. Select DiangonalRtLbGradient for the style and change the min to blue and the max to red. The frame chart should look like this

Xml Style:

       <frameChart>

             <frame darkColor="blue" wallColor="blue">
               <background type="DiagonalRtLbGradient"

               minColor="blue" maxColor="red"/>
             </frame>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>
        </frameChart>

You can also add, remove, or change the color of the grid using the frame menu. You can also add strips which instead of adding lines, like the normal grid, they tint between every other line the designated color. In the frame menu click on the grid color and change it to green.

Xml Style:

       <frameChart>

             <frame darkColor="blue" wallColor="blue">
               <background type="DiagonalRtLbGradient"

               minColor="blue" maxColor="red"/>
             </frame>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>
        </frameChart>

In order to make a picture the background of the chart you must go to the frame menu and next to the paint section there is the image section. From here you can select the picture by browsing for it and then it is also possible to adjust the starting point of the picture by selecting the style (or make it scaled into the frame).

Adjusting the orientation

You can also change the perspective of the picture using the orientation buttons located in the frame menu. The four buttons control the depth of the image while the other two make the tilt the frame chart The picture to the left displays a preview of the frame so that you have an idea of what is happening to your frame chart.

Xml Style:

       <frameChart>
             <frame xDepth="19" yDepth="3" xTilt="10"

               darkColor="blue" wallColor="blue"
               gridColor="green">
               <background type="DiagonalRtLbGradient"

               minColor="blue" maxColor="red"/>
             </frame>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>
        </frameChart>

In webcharts 3D you can also change the frame directly at the picture using crlt or shift. Hold crlt or shift while hovering over the image and then move the mouse. Crlt adjusts the tilt of the frame while shift changes the depth.

Managing the Legend

Frame chart as well as other types of charts utilize the legend to organize and display data. You can change the location and even what information it displays. Open the Legend properties panel and change the placement to left. The chart should look something like this:

Xml Style:

       <frameChart>
             <frame xDepth="19" yDepth="3" xTilt="10"

               darkColor="blue" wallColor="blue"
               gridColor="green">
               <background type="DiagonalRtLbGradient"

               minColor="blue" maxColor="red"/>
             </frame>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>

             <legend placement="Left"/>
        </frameChart>

You can specify to the legend to show the percents as well as the labels for the pie chart by typing $( into the textbox and then selecting an option from the dropdown menu. Select colLabel and rowPercent these two for now to display the Labels and Percentages in columns. The textbox should look something like this now:

Xml Style:

       <frameChart>
             <frame xDepth="19" yDepth="3" xTilt="10"

               darkColor="blue" wallColor="blue"
               gridColor="green">
               <background type="DiagonalRtLbGradient"

               minColor="blue" maxColor="red"/>
             </frame>
             <yAxis scaleMin="0" labelCount="6">

                  <labelFormat style="Currency"/>

                  <labelStyle color="blue"

                  orientation="Parallel"/>

                  <titleStyle margin="5">Profit

                  </titleStyle>
             </yAxis>

	     <legend placement="Left">
              <![CDATA[

        $(colLabel)

        $(rowPercent)

]]>

              </legend>

        </frameChart>