ChartDirector 7.0 (ASP/COM/VB Edition)

Horizontal Box-Whisker Chart




This example demonstrates creating a multi-color horizontal box-whisker chart.

XYChart.addBoxWhiskerLayer2 is used to create the multi-color box-whisker layer. The chart is set to horizontal orientation using XYChart.swapXY.

Source Code Listing

[Web Version (in ASP)] aspdemo\hboxwhisker.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd quartile ' and maximum values of some quantities Q0Data = Array(40, 45, 35) Q1Data = Array(55, 60, 50) Q2Data = Array(62, 70, 60) Q3Data = Array(70, 80, 65) Q4Data = Array(80, 90, 75) ' The labels for the chart labels = Array("<*img=robot1.png*><*br*>Bipedal Type", "<*img=robot2.png*><*br*>Wolf Type", _ "<*img=robot5.png*><*br*>Bird Type") ' Create a XYChart object of size 540 x 320 pixels Set c = cd.XYChart(540, 320) ' swap the x and y axes to create a horizontal box-whisker chart Call c.swapXY() ' Set default directory for loading images from current script directory Call c.setSearchPath(Server.MapPath(".")) ' Set the plotarea at (75, 25) and of size 440 x 270 pixels. Enable both horizontal and vertical ' grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(75, 25, 440, 270).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle(" Robot Shooting Accuracy Scores") ' Set the labels on the x axis and the font to Arial Bold Call c.xAxis().setLabels(labels).setFontStyle("Arial Bold") ' Disable x axis ticks by setting the length to 0 Call c.xAxis().setTickLength(0) ' Set the font for the y axis labels to Arial Bold Call c.yAxis().setLabelStyle("Arial Bold") ' Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the line ' color. Set the line width to 2 pixels Call c.addBoxWhiskerLayer2(Q3Data, Q1Data, Q4Data, Q0Data, Q2Data).setLineWidth(2) ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='{xLabel}: min/med/max = {min}/{med}/{max}<*br*>Inter-quartile range: {bottom} to {top}'") %> <!DOCTYPE html> <html> <head> <title>Horizontal Box-Whisker Chart</title> <!-- Include ChartDirector Javascript Library to support chart interactions --> <script type="text/javascript" src="cdjcv.js"></script> </head> <body style="margin:5px 0px 0px 5px"> <div style="font:bold 18pt verdana;"> Horizontal Box-Whisker Chart </div> <hr style="border:solid 1px #000080; background:#000080" /> <div style="font:10pt verdana; margin-bottom:1.5em"> <a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a> </div> <!-- ****** Here is the chart image ****** --> <%= viewer.renderHTML() %> </body> </html>

[Windows Version (in Visual Basic)] vbdemo\hboxwhisker.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd ' quartile and maximum values of some quantities Dim Q0Data() Q0Data = Array(40, 45, 35) Dim Q1Data() Q1Data = Array(55, 60, 50) Dim Q2Data() Q2Data = Array(62, 70, 60) Dim Q3Data() Q3Data = Array(70, 80, 65) Dim Q4Data() Q4Data = Array(80, 90, 75) ' The labels for the chart Dim labels() labels = Array("<*img=robot1.png*><*br*>Bipedal Type", "<*img=robot2.png*><*br*>Wolf Type", _ "<*img=robot5.png*><*br*>Bird Type") ' Create a XYChart object of size 540 x 320 pixels Dim c As XYChart Set c = cd.XYChart(540, 320) ' swap the x and y axes to create a horizontal box-whisker chart Call c.swapXY() ' Set the plotarea at (75, 25) and of size 440 x 270 pixels. Enable both horizontal and vertical ' grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(75, 25, 440, 270).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle(" Robot Shooting Accuracy Scores") ' Set the labels on the x axis and the font to Arial Bold Call c.xAxis().setLabels(labels).setFontStyle("arialbd.ttf") ' Disable x axis ticks by setting the length to 0 Call c.xAxis().setTickLength(0) ' Set the font for the y axis labels to Arial Bold Call c.yAxis().setLabelStyle("arialbd.ttf") ' Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the ' line color. Set the line width to 2 pixels Call c.addBoxWhiskerLayer2(Q3Data, Q1Data, Q4Data, Q0Data, Q2Data).setLineWidth(2) ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='{xLabel}: min/med/max = {min}/{med}/{max} Inter-quartile range: {bottom} to {top}'") End Sub