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

Message ListMessage List     Post MessagePost Message

  Colourgradient adjustable and x-axis dot-able? (ASP)
Posted by Frank on Aug-25-2016 06:51
| Reply | Monitor
Attachments:
Hello Peter,

Thank you for your amazing job on the tool and the supporting.

We have two questions:
1. Is the colourgradient adjustable in colour and in vertical/horizontal gradience?
2. Can the axis made dot-able?

Thank you for your time and effort,

Frank
support.jpg

  Re: Colourgradient adjustable and x-axis dot-able? (ASP)
Posted by Peter Kwan on Aug-26-2016 00:33
| Reply | Monitor
Hi Frank,

1. Yes, you can use configurable vertical or horizonal (or in any direction) gradient color for the bars. There are many methods. In ChartDirector, a gradient is a smoothly changing color. However, in the chart in your image, it seems the bar color changes abruptly at the middle of the bar. For this type of coloring, it is better to use a "y-zone" color, which is a color that changes abruptly after a certain configurable threshold value. For your case, the color is like:

'Color that changes at y = 12
color0 = c.yZoneColor(12, &Hff0000, &Hff9999)

'Color that changes at y = -7
color1 = c.yZoneColor(-7, &H00ff00, &H99ff99)

..... set up more colors for your bars .....

'Put the colors into an array
barColors = Array(color0, color1, .......)

Call c.addBarLayer3(myData, barColors)


2. You can use a "dash line color" as the axis color. It is like:

myAxisColor = c.dashLineColor(&H880088, &H0306)
Set myAxis = c.xAxis().setColors(myAxisColor, &H000000, &H000000, cd.Transparent)
Call myAxis.setWidth(2)


Hope this can help.

Regards
Peter Kwan

  Re: Colourgradient adjustable and x-axis dot-able? (ASP)
Posted by Frank on Aug-26-2016 08:33
| Reply | Monitor
Thank you for your support Peter,

I can't get it to work the way we want to... The code for the dotted x-axis did not work in our graph below. It did work in other graphs however.

Can you help us out?
1. The borders of the glass-effect need to gone. (0?)
2. The width of the glass-effect-bars need to be adjusted. (Spacing? Both 'setTickOffset' and 'BarGap' did not work)
3. The dotted x-axis-line does not appear in our example below.

Thank you for your help,

Frank.


[start code]
Set cd = CreateObject("ChartDirector.API")

data = Array("2.2", "-1.7", -8.9)
Set c = cd.XYChart(600, 360)

' Set the plotarea at (60, 40) and of size 480 x 280 pixels.
Call c.setPlotArea(60, 40, 480, 280, cd.Transparent, cd.Transparent, cd.Transparent, cd.Transparent, cd.Transparent)

ColorLayer = Array(&H95AD4F, &H845196, &H19709B)
Set layer = c.addBarLayer3(data, ColorLayer)

' Layers
Call layer.setBorderColor(cd.Transparent, cd.glassEffect( cd.NormalGlare, cd.Top, 0))

' Add labels to the top of the bar using 8 pt Arial Bold font.
Call c.addBarLayer3(data).setAggregateLabelStyle("Arial.ttf", 20, c.yZoneColor(0, &H706F6F, &H706F6F))

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

myAxisColor = c.dashLineColor(&H706F6F, &H0306)
Call c.xAxis().setColors(myAxisColor, &Hffffff, &Hffffff, cd.Transparent)
Call c.xAxis.setWidth(2)

' Set the label styles of all axes to 8pt Arial Bold font
Call c.xAxis().setLabelStyle("arial.ttf", 8)
Call c.yAxis().setLabelStyle("arial.ttf", 8)

Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
[end code]

  Re: Colourgradient adjustable and x-axis dot-able? (ASP)
Posted by Peter Kwan on Aug-26-2016 16:13
| Reply | Monitor
Attachments:
Hi Frank,

Below is the code that creates the attached chart. The main changes are as follows:

- By default, all XYChart in ChartDirector has two x-axes at the bottom and at the top. However, it will only draw the x-axis if it contains something. (That's why usually the top x-axis is not visible.) For your case, you would need to set some labels to the x-axis (or add a chart title, etc) just to ensure it is drawn. You can set the labels to transparent if you do not need the labels.

- By default, the bottom x-axis is at the bottom of the plot area. To move it to the y = 0 position, you would need to add the line "Call c.setAxisAtOrigin(cd.XAxisAtOrigin)"

- The glass effect is a complex effect there are multiple levels of gradients and the "glare" does not reach the border of the bar. In your code, there is already no border for the bar, and it is normal that the glare does not fully cover the top half of the bar. (You can try to modify the color by using &Hff0000 as the first parameter in setBorderColor to see the border.) If you would like to look exactly like the bar chart in your earlier message (which is using two flat colors per bar with no smooth gradient and no border), I think the yZoneColor method is better. It should be easy to generate the yZoneColor colors as shown in the code below.


'==============================================

Set cd = CreateObject("ChartDirector.API")

data = Array(2.2, -1.7, -8.9)
Set c = cd.XYChart(600, 360)

' Set the plotarea at (60, 40) and of size 480 x 280 pixels.
Call c.setPlotArea(60, 40, 480, 280, cd.Transparent, cd.Transparent, cd.Transparent, cd.Transparent, cd.Transparent)

ColorLayer = Array(&H95AD4F, &H845196, &H19709B)
For i = 0 To Ubound(ColorLayer)
   ColorLayer(i) = c.yZoneColor(data(i) / 2, ColorLayer(i), c.adjustBrightness(ColorLayer(i), 2))
Next

Set layer = c.addBarLayer3(data, ColorLayer)
Call layer.setBorderColor(cd.Transparent)
Call layer.setAggregateLabelStyle("Arial.ttf", 20, &H706F6F)

myAxisColor = c.dashLineColor(&H706F6F, &H0306)
Call c.xAxis().setColors(myAxisColor, cd.Transparent, cd.Transparent, cd.Transparent)
Call c.xAxis().setLabels(data)
Call c.xAxis().setWidth(3)
Call c.setAxisAtOrigin(cd.XAxisAtOrigin)

Call c.yAxis().setTickDensity(40)
Call c.yAxis().setLabelStyle("arial.ttf", 20)
Call c.yAxis().setColors(cd.Transparent, &H706F6F)

Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End

'===============================================

Hope this can help.

Regards
Peter Kwan
testbar.png

  Re: Colourgradient adjustable and x-axis dot-able? (ASP)
Posted by Frank on Aug-26-2016 19:36
| Reply | Monitor
Hello Peter,

Thank you so much, this is superb! We surely can work from this. The command 'setAxisAtOrigin' is a well-hidden gem.

Kind regards,

Frank