ChartDirector 7.0 (ASP/COM/VB Edition)

Glass Multi-Bar Chart




This example demonstrates a multi-bar chart with glass shading effect for bars and gradient color for plot area background.

Glass lighting is a complex shading effect that gives a look and feel of tinted glass or semi-transparent plastic material. This effect involves glare and variation of lighting caused by reflection and refraction inside the material.

Source Code Listing

[Web Version (in ASP)] aspdemo\glassmultibar.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) labels = Array("Mon", "Tue", "Wed", "Thur", "Fri") ' Create a XYChart object of size 540 x 375 pixels Set c = cd.XYChart(540, 375) ' Add a title to the chart using 18pt Times Bold Italic font Call c.addTitle("Average Weekly Network Load", "Times New Roman Bold Italic", 18) ' Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical gradient color from ' light blue (f9f9ff) to blue (6666ff) as background. Set border and grid lines to white (ffffff). Call c.setPlotArea(50, 55, 440, 280, c.linearGradientColor(0, 55, 0, 335, &Hf9f9ff, &H6666ff), -1, _ &Hffffff, &Hffffff) ' Add a legend box at (50, 28) using horizontal layout. Use 10pt Arial Bold as font, with ' transparent background. Call c.addLegend(50, 28, False, "Arial Bold", 10).setBackground(cd.Transparent) ' Set the x axis labels Call c.xAxis().setLabels(labels) ' Draw the ticks between label positions (instead of at label positions) Call c.xAxis().setTickOffset(0.5) ' Set axis label style to 8pt Arial Bold Call c.xAxis().setLabelStyle("Arial Bold", 8) Call c.yAxis().setLabelStyle("Arial Bold", 8) ' Set axis line width to 2 pixels Call c.xAxis().setWidth(2) Call c.yAxis().setWidth(2) ' Add axis title Call c.yAxis().setTitle("Throughput (MBytes Per Hour)") ' Add a multi-bar layer with 3 data sets Set layer = c.addBarLayer2(cd.Side) Call layer.addDataSet(data0, &Hff0000, "Server #1") Call layer.addDataSet(data1, &H00ff00, "Server #2") Call layer.addDataSet(data2, &Hff8800, "Server #3") ' Set bar border to transparent. Use glass lighting effect with light direction from left. Call layer.setBorderColor(cd.Transparent, cd.glassEffect(cd.NormalGlare, cd.Left)) ' Configure the bars within a group to touch each others (no gap) Call layer.setBarGap(0.2, cd.TouchBar) ' 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='{dataSetName} on {xLabel}: {value} MBytes/hour'") %> <!DOCTYPE html> <html> <head> <title>Glass Multi-Bar 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;"> Glass Multi-Bar 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\glassmultibar.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) Dim labels() labels = Array("Mon", "Tue", "Wed", "Thur", "Fri") ' Create a XYChart object of size 540 x 375 pixels Dim c As XYChart Set c = cd.XYChart(540, 375) ' Add a title to the chart using 18pt Times Bold Italic font Call c.addTitle("Average Weekly Network Load", "timesbi.ttf", 18) ' Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical gradient color ' from light blue (f9f9ff) to blue (6666ff) as background. Set border and grid lines to white ' (ffffff). Call c.setPlotArea(50, 55, 440, 280, c.linearGradientColor(0, 55, 0, 335, &Hf9f9ff, &H6666ff), _ -1, &Hffffff, &Hffffff) ' Add a legend box at (50, 28) using horizontal layout. Use 10pt Arial Bold as font, with ' transparent background. Call c.addLegend(50, 28, False, "arialbd.ttf", 10).setBackground(cd.Transparent) ' Set the x axis labels Call c.xAxis().setLabels(labels) ' Draw the ticks between label positions (instead of at label positions) Call c.xAxis().setTickOffset(0.5) ' Set axis label style to 8pt Arial Bold Call c.xAxis().setLabelStyle("arialbd.ttf", 8) Call c.yAxis().setLabelStyle("arialbd.ttf", 8) ' Set axis line width to 2 pixels Call c.xAxis().setWidth(2) Call c.yAxis().setWidth(2) ' Add axis title Call c.yAxis().setTitle("Throughput (MBytes Per Hour)") ' Add a multi-bar layer with 3 data sets Dim layer As BarLayer Set layer = c.addBarLayer2(cd.Side) Call layer.addDataSet(data0, &Hff0000, "Server #1") Call layer.addDataSet(data1, &H00ff00, "Server #2") Call layer.addDataSet(data2, &Hff8800, "Server #3") ' Set bar border to transparent. Use glass lighting effect with light direction from left. Call layer.setBorderColor(cd.Transparent, cd.glassEffect(cd.NormalGlare, cd.Left)) ' Configure the bars within a group to touch each others (no gap) Call layer.setBarGap(0.2, cd.TouchBar) ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='{dataSetName} on {xLabel}: {value} MBytes/hour'") End Sub