This example demonstrates creating a percentage bar chart with a legend box. It also demonstrates gradient background color, rounded frame, soft drop shadow, and using CDML to include custom icons in the legend box.
A percentage bar chart is like a stacked bar chart, except the bars are individually scaled so that they stacked up to 100.
The key features demonstrated in this example are:
- The gradient background is achieved by using BaseChart.linearGradientColor to define the gradient color, then use BaseChart.setBackground to set it as the chart background color.
- The rounded frame is configured using BaseChart.setRoundedFrame.
- The soft drop shadow is configured using BaseChart.setDropShadow.
- The legend box is added using BaseChart.addLegend. The legend key (the color box to the right of each legend entry) is set to 16 x 32 pixels using LegendBox.setKeySize, so as to match the size of the custom icons.
- The ordering of the legend entries is reversed using Layer.setLegend, so that the legend box shows the last data set name first. This is useful for a vertical legend box in a vertical stacked chart with purely positive data. In such case, the last data set will be on the top of the stacked bars. Reversing the ordering of the legend entries will make it visually consistent with the stacking order of the data set.
- The percentage bar layer is added using XYChart.addBarLayer2 with the Percentage predefined constant.
- Multiple data sets are added to the bar layer using Layer.addDataSet. CDML is used to include custom icons in the data set names.
- Labels for the bar segments are added using Layer.setDataLabelStyle, with center alignment configured using TextBox.setAlignment.
- For web applications, we need to set the search path to load the icon images from the current script directory using BaseChart.setSearchPath. It is because for some web servers (eg. IIS), the default current directory is not the script directory (eg. IIS uses the IIS executable directory), so the search path needs to be set explicitly.