ChartDirector 6.0 (ASP/COM/VB Edition)

Percentage Bar Chart




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:

Note that by default, the data label format is {percent}% (showing the percentage) for a percentage bar layer, as opposed to {value} (showing the data value) for other types of bar layer. The data label format can be modified using Layer.setDataLabelFormat.

Source Code Listing

[Web Version (in ASP)] aspdemo\percentbar.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' The data for the bar chart
data0 = Array(100, 125, 245, 147, 67)
data1 = Array(85, 156, 179, 211, 123)
data2 = Array(97, 87, 56, 267, 157)

' The labels for the bar chart
labels = Array("Mon", "Tue", "Wed", "Thu", "Fri")

' Create a XYChart object of size 500 x 320 pixels. Use a vertical gradient color from pale blue
' (e8f0f8) to sky blue (aaccff) spanning half the chart height as background. Set border to blue
' (88aaee). Use rounded corners. Enable soft drop shadow.
Set c = cd.XYChart(500, 320)
Call c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, &He8f0f8, &Haaccff), _
    &H88aaee)
Call c.setRoundedFrame()
Call c.setDropShadow()

' Set default directory for loading images from current script directory
Call c.setSearchPath(Server.MapPath("."))

' Add a title to the chart using 15 points Arial Italic. Set top/bottom margins to 15 pixels.
Set title = c.addTitle("Weekly Product Sales", "ariali.ttf", 15)
Call title.setMargin2(0, 0, 15, 15)

' Tentatively set the plotarea to 50 pixels from the left edge, and to just under the title. Set the
' width to 60% of the chart width, and the height to 50 pixels from the bottom edge. Use pale blue
' (e8f0f8) background, transparent border, and grey (aaaaaa) grid lines.
Call c.setPlotArea(50, title.getHeight(), c.getWidth() * 6 / 10, c.getHeight() - title.getHeight() _
     - 50, &He8f0f8, -1, cd.Transparent, &Haaaaaa)

' Add a legend box where the top-right corner is anchored at 10 pixels from the right edge, and just
' under the title. Use vertical layout and 8 points Arial font.
Set legendBox = c.addLegend(c.getWidth() - 10, title.getHeight(), True, "arial.ttf", 8)
Call legendBox.setAlignment(cd.TopRight)

' Set the legend box background and border to transparent
Call legendBox.setBackground(cd.Transparent, cd.Transparent)

' Set the legend box icon size to 16 x 32 pixels to match with custom icon size
Call legendBox.setKeySize(16, 32)

' Set axes to transparent
Call c.xAxis().setColors(cd.Transparent)
Call c.yAxis().setColors(cd.Transparent)

' Set the labels on the x axis
Call c.xAxis().setLabels(labels)

' Add a percentage bar layer
Set layer = c.addBarLayer2(cd.Percentage)

' Add the three data sets to the bar layer, using icons images with labels as data set names
Call layer.addDataSet(data0, &H66aaee, _
    "<*block,valign=absmiddle*><*img=service.png*> Service<*/*>")
Call layer.addDataSet(data1, &Heebb22, _
    "<*block,valign=absmiddle*><*img=software.png*> Software<*/*>")
Call layer.addDataSet(data2, &Hcc88ff, _
    "<*block,valign=absmiddle*><*img=computer.png*> Hardware<*/*>")

' Use soft lighting effect with light direction from top
Call layer.setBorderColor(cd.Transparent, cd.softLighting(cd.Top))

' Enable data label at the middle of the the bar
Call layer.setDataLabelStyle().setAlignment(cd.Center)

' For a vertical stacked chart with positive data only, the last data set is always on top. However,
' in a vertical legend box, the last data set is at the bottom. This can be reversed by using the
' setLegend method.
Call layer.setLegend(cd.ReverseLegend)

' Adjust the plot area size, such that the bounding box (inclusive of axes) is 15 pixels from the
' left edge, just below the title, 10 pixels to the right of the legend box, and 15 pixels from the
' bottom edge.
Call c.packPlotArea(15, title.getHeight(), c.layoutLegend().getLeftX() - 10, c.getHeight() - 15)

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>

[Windows Version (in Visual Basic)] vbdemo\percentbar.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' The data for the bar chart
    Dim data0()
    data0 = Array(100, 125, 245, 147, 67)
    Dim data1()
    data1 = Array(85, 156, 179, 211, 123)
    Dim data2()
    data2 = Array(97, 87, 56, 267, 157)

    ' The labels for the bar chart
    Dim labels()
    labels = Array("Mon", "Tue", "Wed", "Thu", "Fri")

    ' Create a XYChart object of size 500 x 320 pixels. Use a vertical gradient color from pale blue
    ' (e8f0f8) to sky blue (aaccff) spanning half the chart height as background. Set border to blue
    ' (88aaee). Use rounded corners. Enable soft drop shadow.
    Dim c As XYChart
    Set c = cd.XYChart(500, 320)
    Call c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, &He8f0f8, &Haaccff), _
        &H88aaee)
    Call c.setRoundedFrame()
    Call c.setDropShadow()

    ' Add a title to the chart using 15 points Arial Italic. Set top/bottom margins to 15 pixels.
    Dim title As ChartDirector.TextBox
    Set title = c.addTitle("Weekly Product Sales", "ariali.ttf", 15)
    Call title.setMargin2(0, 0, 15, 15)

    ' Tentatively set the plotarea to 50 pixels from the left edge, and to just under the title. Set
    ' the width to 60% of the chart width, and the height to 50 pixels from the bottom edge. Use
    ' pale blue (e8f0f8) background, transparent border, and grey (aaaaaa) grid lines.
    Call c.setPlotArea(50, title.getHeight(), c.getWidth() * 6 / 10, c.getHeight() - _
        title.getHeight() - 50, &He8f0f8, -1, cd.Transparent, &Haaaaaa)

    ' Add a legend box where the top-right corner is anchored at 10 pixels from the right edge, and
    ' just under the title. Use vertical layout and 8 points Arial font.
    Dim legendBox As LegendBox
    Set legendBox = c.addLegend(c.getWidth() - 10, title.getHeight(), True, "arial.ttf", 8)
    Call legendBox.setAlignment(cd.TopRight)

    ' Set the legend box background and border to transparent
    Call legendBox.setBackground(cd.Transparent, cd.Transparent)

    ' Set the legend box icon size to 16 x 32 pixels to match with custom icon size
    Call legendBox.setKeySize(16, 32)

    ' Set axes to transparent
    Call c.xAxis().setColors(cd.Transparent)
    Call c.yAxis().setColors(cd.Transparent)

    ' Set the labels on the x axis
    Call c.xAxis().setLabels(labels)

    ' Add a percentage bar layer
    Dim layer As BarLayer
    Set layer = c.addBarLayer2(cd.Percentage)

    ' Add the three data sets to the bar layer, using icons images with labels as data set names
    Call layer.addDataSet(data0, &H66aaee, _
        "<*block,valign=absmiddle*><*img=service.png*> Service<*/*>")
    Call layer.addDataSet(data1, &Heebb22, _
        "<*block,valign=absmiddle*><*img=software.png*> Software<*/*>")
    Call layer.addDataSet(data2, &Hcc88ff, _
        "<*block,valign=absmiddle*><*img=computer.png*> Hardware<*/*>")

    ' Use soft lighting effect with light direction from top
    Call layer.setBorderColor(cd.Transparent, cd.softLighting(cd.Top))

    ' Enable data label at the middle of the the bar
    Call layer.setDataLabelStyle().setAlignment(cd.Center)

    ' For a vertical stacked chart with positive data only, the last data set is always on top.
    ' However, in a vertical legend box, the last data set is at the bottom. This can be reversed by
    ' using the setLegend method.
    Call layer.setLegend(cd.ReverseLegend)

    ' Adjust the plot area size, such that the bounding box (inclusive of axes) is 15 pixels from
    ' the left edge, just below the title, 10 pixels to the right of the legend box, and 15 pixels
    ' from the bottom edge.
    Call c.packPlotArea(15, title.getHeight(), c.layoutLegend().getLeftX() - 10, c.getHeight() - _
        15)

    ' Output the chart
    Set viewer.Picture = c.makePicture()

    'include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
        "title='{dataSetName} revenue on {xLabel}: US${value}K ({percent}%)'")

End Sub