ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  How to make 2 layer group boxwhisker chart by VB.Net
Posted by Osamu Sato on Mar-06-2019 17:04
Attachments:
Dear Peter,

I have 2 layered data set. First layer is grouped by equipment (A, B, C, D) and second layer is parameter (a, b, c). I want to show up the parameter value difference between equipment. When I see "boxwhisker.aspx" example under NetWebCharts>VBNetASP, it can handle only 1 layered data. Is there any way to show up them like attached image?

Dataset example is like this.
A, a, Q3data, Q1data, Q4data, Q0data, Q1data
A, b, Q3data, Q1data, Q4data, Q0data, Q1data
A, c, Q3data, Q1data, Q4data, Q0data, Q1data
B, a, Q3data, Q1data, Q4data, Q0data, Q1data
B, b, Q3data, Q1data, Q4data, Q0data, Q1data
B, c, Q3data, Q1data, Q4data, Q0data, Q1data
C, a, Q3data, Q1data, Q4data, Q0data, Q1data
C, b, Q3data, Q1data, Q4data, Q0data, Q1data
C, c, Q3data, Q1data, Q4data, Q0data, Q1data
D, a, Q3data, Q1data, Q4data, Q0data, Q1data
D, b, Q3data, Q1data, Q4data, Q0data, Q1data
D, c, Q3data, Q1data, Q4data, Q0data, Q1data

Best regards,
Osamu
grouped boxwhisker chart.PNG

  Re: How to make 2 layer group boxwhisker chart by VB.Net
Posted by Peter Kwan on Mar-07-2019 03:53
Attachments:
Hi Osamu,

For your case, the box-whisker chart can be created using a single layer with 12 box-whisker symbols. You just need to configure the x-axis to show two lines of labels. There are several methods to do this:

(i) Just add a second line of label under the label 'b'.

(ii) Use a second transparent x-axis under the bottom axis (use XYChart.addAxis), and set it to have 4 labels

(iii) Use data tables (use Axis.makeLabelTable for the first row of labels, then add an extra row to the table)


I have attached an example I have created by using method (i) above. The code is as follows. It replaces the label "b" with "b<*br*><*br*><*font=Arial Bold,size=10*>Group X". For the <* ... *> syntax, see:

https://www.advsofteng.com/doc/cdnet.htm#cdml.htm


' ============ Start of Sample Code ============
'
' Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd
' quartile and maximum values of some quantities
Dim Q0Data() As Double = {40, 45, 40, 30, 20, 50, 25, 44, 40, 30, 20, 50}
Dim Q1Data() As Double = {55, 60, 50, 40, 38, 60, 51, 60, 50, 40, 38, 60}
Dim Q2Data() As Double = {62, 70, 60, 50, 48, 70, 62, 70, 60, 50, 48, 70}
Dim Q3Data() As Double = {70, 80, 65, 60, 53, 78, 69, 76, 65, 60, 53, 78}
Dim Q4Data() As Double = {80, 90, 75, 70, 60, 85, 80, 84, 75, 70, 60, 85}

' The labels for the chart
Dim labels() As String = { _
"a", "b<*br*><*br*><*font=Arial Bold,size=10*>Group A", "c", _
"a", "b<*br*><*br*><*font=Arial Bold,size=10*>Group B", "c", _
"a", "b<*br*><*br*><*font=Arial Bold,size=10*>Group C", "c", _
"a", "b<*br*><*br*><*font=Arial Bold,size=10*>Group D", "c"}

' Create a XYChart object of size 550 x 300 pixels
Dim c As XYChart = New XYChart(550, 300)

' Set the plotarea at (50, 25) and of size 450 x 200 pixels. Enable both horizontal and vertical
' grids by setting their colors to grey (0xc0c0c0)
c.setPlotArea(50, 25, 450, 200).setGridColor(Chart.Transparent, Chart.Transparent)

' Add a title to the chart
c.addTitle("Computer Vision Test Scores")

' Set the labels on the x axis and the font to Arial Bold
c.xAxis().setLabels(labels).setFontStyle("Arial Bold")

' Set the font for the y axis labels to Arial Bold
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
c.addBoxWhiskerLayer(Q3Data, Q1Data, Q4Data, Q0Data, Q2Data, &H9999ff, &H0000cc).setLineWidth(2)

' Add grid lines in the plot area to separate the box-whisker groups
For i As Integer = 0 To Ubound(Q0Data) Step 3
c.xAxis().addMark(i - 0.5, &H888888)
Next

' Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.PNG)

' ============ End of Sample Code ============


Hope this can help.

Regards
Peter Kwan
boxwhisker.png