ChartDirector Support - View Thread 1284732285

ChartDirector Support

Forum Home

Search

Message List Post Message

[Sep-17-2010 22:04] How to create a multi-line date labels on the y-axis (Eva)
- [Sep-18-2010 02:05] Re: How to create a multi-line date labels on the y-axis (Peter Kwan)
  - [Sep-18-2010 03:49] Re: How to create a multi-line date labels on the y-axis (Eva)
    - [Sep-18-2010 11:14] Re: How to create a multi-line date labels on the y-axis (Peter Kwan)
      - [Sep-23-2010 05:02] Re: How to create a multi-line date labels on the y-axis (Eva)
      - [Sep-24-2010 00:29] Re: How to create a multi-line date labels on the y-axis (Peter Kwan)
- [Sep-18-2010 08:54] Re: How to create a multi-line date labels on the y-axis (Ting Kah Hing)
  - [Sep-18-2010 11:17] Re: How to create a multi-line date labels on the y-axis (Peter Kwan)
    - [Oct-16-2014 04:49] Re: How to create a multi-line date labels on the y-axis (mohamed nour)
      - [Oct-17-2014 02:07] Re: How to create a multi-line date labels on the y-axis (Peter Kwan)

How to create a multi-line date labels on the y-axis

Posted by Eva on Sep-17-2010 22:04

Hi,

I would like to create a Gantt Chart similar to the one I included. I would like to have the y-axis labels be dates.
The date should break into years (one line), quarter (second line) and months (third line). Is it possible to create the multi-line labels with a Chart Director? If so, how?

Thanks,

Eva

Re: How to create a multi-line date labels on the y-axis

Posted by Peter Kwan on Sep-18-2010 02:05

Hi Eva,

I will probably use the following method:

(a) Create the top y-axis using the setDateScale, with a tick every 2 months. This is the real axis scale. Set the top y-axis to Transparent, so you do not see it.

(b) Add an other y-axis to the top using XYChart.addAxis.

(c) Compute the labels in the first layer as an array of text strings (that is, create a text string array containing the month names for the odd numbered months). Use them as the labels for the top axis in (b) (using Axis.setLabels).

(d) Create a CDMLTable from the labels using Axis.makeLabelTable

(e) Add the second row of labels to the CDMLTable. The CDMLTable allows a cell to span multiple columns, so you can have a "Q1" label that spans 3 columns.

(f) Similarly, add the third row of labels to the CDMLTable.

If you need more specific code, please let me know what is your programming language.

Hope this can help.

Regards
Peter Kwan

Re: How to create a multi-line date labels on the y-axis
Posted by Eva on Sep-18-2010 03:49	\| Reply \| Monitor
Hi Peter! I'm really new to the ChartDirector -- just started. I would not mind a more specific code. I program in Java. Thanks so much! Eva

Re: How to create a multi-line date labels on the y-axis

Posted by Peter Kwan on Sep-18-2010 11:14

Hi Eva,

An example in Java is:

int startYear = 2009;
int endYear = 2010;

//Set axis scale
c.yAxis().setDateScale(new GregorianCalendar(startYear, 0, 1).getTime(), new GregorianCalendar(endYear, 11, 31).getTime(), 86400 * 60);
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

//Additional axis for the labels
Axis a = c.addAxis(Chart.Top, 0);

//first row of labels
String[] axisLabels = new String[(endYear - startYear + 1) * 6];
String[] monthNames = {"Jan", "Mar", "May", "Jul", "Sep", "Nov"};
for (int i = 0; i < axisLabels.length; i += 6)
    System.arraycopy(monthNames, 0, axisLabels, i, 6);
a.setLabels(axisLabels);

//second row of labels
CDMLTable t = a.makeLabelTable();
t.insertRow(0);
for (int i = 0; i < axisLabels.length; i += 3)
    t.setCell(i, 0, 3, 1, (i % 2 == 0) ? "Q1" : "Q3");

//third row of labels
t.insertRow(0);
for (int i = 0; i < axisLabels.length; i += 6)
    t.setCell(i, 0, 6, 1, "" + (startYear + i / 6));

Hope this can help.

Regards
Peter Kwan

Re: How to create a multi-line date labels on the y-axis

Posted by Eva on Sep-23-2010 05:02

Thanks so much, Peter!

I was able to create the proper labels by following your code (thanks!), but I cannot make the shaded background in the plot area to match my major ticks on the yAxis.  I created my major ticks to be 6 months.

I'm including a fragment of the Gantt graph I got.

Also,
How can I line up the Chart.InvertedTriangleSymbol with the edge of the blue bar?  I created the bar with c.addBoxWhiskerLayer2 method.
I added the triangle symbol with chart.addScatterLayer.  I was able to lower down the triangle, but I'm not sure how to move it to the side.  Is there a trick?

Thank YOU!
Ewa

Re: How to create a multi-line date labels on the y-axis

Posted by Peter Kwan on Sep-24-2010 00:29

Hi Eva,

I have just tried the code in my previous message, and it works normally with the background shaded according to the major ticks. I have attached my test code and the resulting chart for your reference.

For the scatter symbol, you may use setDataSymbol4 to create any polygon symbol you like. In particular, you can create a symbol such that the polygon is to the left or right of the data point. In the attached example, I use pentagons, which seem to better match the shape in your original chart.

Hope this can help.

Regards
Peter Kwan

gantt.jsp

<%@page import="ChartDirector.*" %>
<%@page import="java.util.*" %>
<%
Date[] startDate = {new GregorianCalendar(2010, 1, 16).getTime()};
Date[] endDate = {new GregorianCalendar(2010, 10, 30).getTime()};
String[] labels = {"Market Research", "Define Specifications",
    "Overall Archiecture", "Project Planning", "Detail Design",
    "Software Development", "Test Plan", "Testing and QA",
    "User Documentation"};

XYChart c = new XYChart(820, 320);
c.setPlotArea(140, 80, 660, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0,
    0xc0c0c0).setGridWidth(1, 1, 1, 1);

c.swapXY();

int startYear = 2009;
int endYear = 2012;

c.yAxis().setDateScale(new GregorianCalendar(startYear, 0, 1).getTime(), 
	new GregorianCalendar(endYear, 11, 31).getTime(), 86400 * 60);
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

Axis a = c.addAxis(Chart.Top, 0);

//first row of labels
String[] axisLabels = new String[(endYear - startYear + 1) * 6];
String[] monthNames = {"Jan", "Mar", "May", "Jul", "Sep", "Nov"};
for (int i = 0; i < axisLabels.length; i += 6)
	System.arraycopy(monthNames, 0, axisLabels, i, 6);
a.setLabels(axisLabels);

//second row of labels
CDMLTable t = a.makeLabelTable();
t.insertRow(0);
for (int i = 0; i < axisLabels.length; i += 3)
	t.setCell(i, 0, 3, 1, (i % 2 == 0) ? "Q1" : "Q3");
	
//third row of labels
t.insertRow(0);
for (int i = 0; i < axisLabels.length; i += 6)
	t.setCell(i, 0, 6, 1, "" + (startYear + i / 6));

// Set the labels on the x axis
c.xAxis().setLabels(labels);

// Reverse the x-axis scale so that it points downwards.
c.xAxis().setReverse();

// Set the horizontal ticks and grid lines to be between the bars
c.xAxis().setTickOffset(0.5);

c.addScatterLayer(null, Chart.CTime(startDate)).getDataSet(0).setDataSymbol4(
	new int[] { 0, 400, 0, 600, -500, 600, -500, 400, -250, 0 }, 21, 0x0000ff, 0x000000);
c.addScatterLayer(null, Chart.CTime(endDate)).getDataSet(0).setDataSymbol4(
	new int[] { 0, 400, 0, 600, 500, 600, 500, 400, 250, 0 }, 21, 0x0000ff, 0x000000);

// Add a green (33ff33) box-whisker layer showing the box only.
c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), null,
    null, null, 0x00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor).setDataWidth(8);

// Output the chart
String chart1URL = c.makeSession(request, "chart1");
%>
<html>
<body style="margin:5px 0px 0px 5px">
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    Simple Gantt Chart
</div>
<hr color="#000080">
<div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em">
    <a href="viewsource.jsp?file=<%=request.getServletPath()%>">View Source Code</a>
</div>
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'>
</body>
</html>

Re: How to create a multi-line date labels on the y-axis
Posted by Ting Kah Hing on Sep-18-2010 08:54	\| Reply \| Monitor
Hi Peter, I am try to do something similar in ASP.Net. Could you also provide sample codes for ASP.Net? Thanks in advance

Re: How to create a multi-line date labels on the y-axis

Posted by Peter Kwan on Sep-18-2010 11:17

Hi Ting Kah Hing,

Similar code in C# is like:

int startYear = 2009;
int endYear = 2010;

//Set axis scale
c.yAxis().setDateScale(new DateTime(startYear, 1, 1), new DateTime(endYear, 12, 31), 86400 * 60);
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

//Additional axis for the labels
Axis a = c.addAxis(Chart.Top, 0);

//first row of labels
string[] axisLabels = new string[(endYear - startYear + 1) * 6];
string[] monthNames = {"Jan", "Mar", "May", "Jul", "Sep", "Nov"};
for (int i = 0; i < axisLabels.Length; i += 6)
    Array.Copy(monthNames, 0, axisLabels, i, 6);
a.setLabels(axisLabels);

//second row of labels
CDMLTable t = a.makeLabelTable();
t.insertRow(0);
for (int i = 0; i < axisLabels.Length; i += 3)
    t.setCell(i, 0, 3, 1, (i % 2 == 0) ? "Q1" : "Q3");

//third row of labels
t.insertRow(0);
for (int i = 0; i < axisLabels.Length; i += 6)
    t.setCell(i, 0, 6, 1, "" + (startYear + i / 6));

Hope this can help.

Regards
Peter Kwan

Re: How to create a multi-line date labels on the y-axis
Posted by mohamed nour on Oct-16-2014 04:49	\| Reply \| Monitor
please kindly make a code on ASP classic, thank you in advance

Re: How to create a multi-line date labels on the y-axis

Posted by Peter Kwan on Oct-17-2014 02:07

Hi Mohamed,

Below please find the equivalent code in ASP for your reference.

<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

startDate = Array(DateSerial(2010, 2, 16)}
endDate = Array(DateSerial(2010, 11, 30)}
labels = Array("Market Research", "Define Specifications", "Overall Archiecture", _
    "Project Planning", "Detail Design", "Software Development", "Test Plan", _
    "Testing and QA", "User Documentation")

Set c = cd.XYChart(820, 320)
Call c.setPlotArea(140, 80, 660, 200, &Hffffff, &Heeeeee, cd.LineColor, &Hc0c0c0, _
    &Hc0c0c0).setGridWidth(1, 1, 1, 1)

Call c.swapXY()

startYear = 2009
endYear = 2012

Call c.yAxis().setDateScale(DateSerial(startYear, 1, 1), DateSerial(endYear, 12, 31), _
    86400 * 60)
Call c.yAxis().setColors(cd.Transparent, cd.Transparent)

Set a = c.addAxis(cd.Top, 0)

'first row of labels
ReDim axisLabels((endYear - startYear + 1) * 6 - 1)
monthNames = Array("Jan", "Mar", "May", "Jul", "Sep", "Nov")
For i = 0 To UBound(axisLabels) Step 6
    For j = 0 to 5
        axisLabels(i + j) = monthNames(j)
    Next
Next
Call a.setLabels(axisLabels)

'second row of labels
Set t = a.makeLabelTable()
Call t.insertRow(0)
For i = 0 To Ubound(axisLabels) Step 3
    If i mod 2 = 0 Then
        Call t.setCell(i, 0, 3, 1, "Q1")
    Else
        Call t.setCell(i, 0, 3, 1, "Q3")
    End If
Next

'third row of labels
Call t.insertRow(0)
For i = 0 to Ubound(axisLabels) Step 6
    Call t.setCell(i, 0, 6, 1, CInt(startYear + i / 6))
Next

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

' Reverse the x-axis scale so that it points downwards.
Call c.xAxis().setReverse()

' Set the horizontal ticks and grid lines to be between the bars
Call c.xAxis().setTickOffset(0.5)

Call c.addScatterLayer(Nothing, startDate).getDataSet(0).setDataSymbol4( _
    Array(0, 400, 0, 600, -500, 600, -500, 400, -250, 0), 21, &H0000ff, &H000000)
Call c.addScatterLayer(Nothing, endDate).getDataSet(0).setDataSymbol4( _
    Array(0, 400, 0, 600, 500, 600, 500, 400, 250, 0), 21, &H0000ff, &H000000)

' Add a green (33ff33) box-whisker layer showing the box only.
Call c.addBoxWhiskerLayer(startDate, endDate, Nothing, Nothing, Nothing, &H00cc00, _
    cd.SameAsMainColor, cd.SameAsMainColor).setDataWidth(8)

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

Regards
Peter Kwan