WebCharts3D

< p class = "subtitleText" >Pie Charts

Pie charts are used to compare multiple values for one category. The best suited to compare 4 to 10 different values.

Adjusting the Angle

The angle of any pie chart in Webcharts 3D can be adjusted by clicking next to the angle box and typing in a number or by hovering over the preview image, holding either the crlt or shift keys, and then moving the mouse. Webcharts 3D pie charts have a default angle of 20.

Xml Style:

	<pieChart>
	</pieChart>

The hotkeys shift and crlt will only work if there is only one pie chart, otherwise you have to type in the angle.

Using IsClockwise

IsClockwise allows you to inverse the order of the slices. The become inversed from where the first slice begins and keep the angle of rotation.

Xml Style:

        <pieChart isClockwise="true">
	     <legend placement="Left"/>
        </pieChart>

Managing the Legend

Pie 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:

        <pieChart isClockwise="true">
	     <legend placement="Left"/>
        </pieChart>

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 colPercent these two for now to display the Labels and Percentages in columns. The textbox should look something like this now:

Xml Style:

        <pieChart isClockwise="true">
	     <legend placement="Left">
              <![CDATA[

        $(colLabel)

        $(colPercent)

]]>

              </legend>

        </pieChart>

Selecting Style

In Webcharts 3D there are three different ways that the slices can be divided, default, solid, and sliced. Default is when only one slice is separate form the pie chart and you can select which one it is by clicking on the picture. To change the style simply click next to the style button and select solid. This will make no piece separate from the whole. Sliced makes all the pieces of the pie chart seperate from one another.

Xml Style:

<pieChart isClockwise="true" style="Solid"> <legend placement="Left"> <![CDATA[

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

Managing the datalabels

The datalabels allow you to display information in or around the graph. Open the datalabel properties panel and change the style to pattern in order to display what is written in the . The pattern box is much like the legend text box. In order to show how much each slice represent type in $( and select value. This will display the value of each slice.

Xml Style:

<pieChart isClockwise="true" style="Solid"> <dataLabels style="Pattern">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

The placement of the datalabel changes whether the information is displayed around or in the pie chart. The default setting is outside. To change the placement to inside open the dataLabel properties panel and select right click next to placement and select inside from the drop down menu.

Xml Style:

<pieChart isClockwise="true" style="Solid"> <dataLabels style="Pattern"

placement="inside">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

The datalabels can also be modified by controlling the font, size and color. The font color can be changed by adjusting the foreground. Click next to the foreground and select white.

Xml Style:

<pieChart isClockwise="true" style="Solid"> <dataLabels style="Pattern"

placement="inside" foreground="white">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

One of the options of the dataLabel's check boxes is isAntialiased. This makes the dataLabels that are in the pie chart share the shadow of the pie chart. By default it is off but turn it on so that the dataLabels blend in with the pie chart better.

Xml Style:

<pieChart isClockwise="true" style="Solid"> <dataLabels style="Pattern" placement="inside"

isAntialiased="true" foreground="white">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

Selecting Depth

In Webcharts 3Dyou can select one of the five depths. Plain depth allows you to have no depth but still a 3D pie chart. The other four depths are for 3D Pie charts. Select double for the depth to make it twice as deep as normal.

Xml Style:

<pieChart depth="double" isClockwise="true" style="Solid">

<dataLabels style="Pattern" placement="inside"

isAntialiased="true" foreground="white">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

Selecting Type

WebCharts3D allows you to select one of six types of pie charts. Pie is the default type and is when the pie chart has no hole. Small, medium, and large nut are pie charts with small. medium, and large holes in them respectively. Select medium nut to have a medium size hole placed in the pie chart.

Xml Style:

        <pieChart depth="double" isClockwise="true"

        style="Solid" type="MediumNut">

	     <dataLabels style="Pattern" placement="inside"

              isAntialiased="true" foreground="white">

              <![CDATA[

        $(value)

]]>

              </dataLabels>

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

        $(colLabel)

        $(colPercent)

]]>

              </legend>

        </pieChart>

The last two options doughnut and raised doughnut only apply to multiple pie charts. This takes the first pie chart puts it in the outside and then makes layers for where the other pie charts can go. The raised doughnut makes the inner most layers higher so they are more visible. Make two more rows in the xml model and then select doughnut for the style.

Xml Style:

<pieChart depth="double" isClockwise="true"

style="Solid" type="doughnut">

<dataLabels style="Pattern" placement="inside"

isAntialiased="true" foreground="white">

<![CDATA[

$(value)

]]>

</dataLabels>

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

$(colLabel)

$(colPercent)

]]>

</legend>

</pieChart>

Using isLeveled

In Webcharts 3D you can make the pieces all different heights by using isLeveled. This makes the column the smallest and each following column of information grows larger. In order to use isLeveled click on the checkbox.

Xml Style:

        <pieChart depth="double" isClockwise="true"

        style="Solid" type="doughnut" isLeveled="true">

	     <dataLabels style="Pattern" placement="inside"

              isAntialiased="true" foreground="white">

              <![CDATA[

        $(value)

]]>

              </dataLabels>

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

        $(colLabel)

        $(colPercent)

]]>

              </legend>

        </pieChart>