|
Drawing horizontal lines in legend box |
Posted by Revathi on May-13-2014 18:39 |
|
Hello,
I am using a pie chart in my c# windows form application. I need ten equally spaced
horizontal lines in the legend box irrespective of the number of items in it. My legend box will
have only a maximum of ten items which need to be placed in between the lines. Please
guide me on which method can be overriden to achieve such a customized legend box. I
would also like to know if there is a way to autosize the width of the legend box to fit each
item in one line (without text wrap).
Thanks in advance.
Regards |
Re: Drawing horizontal lines in legend box |
Posted by Peter Kwan on May-14-2014 05:14 |
|
Hi Revathi,
Instead of using a legend box, you may consider to use a CDMLTable. You can configure the
table with 1 column and 10 rows, and then put the icons and the text inside. (The icon can
be created with CDML.) It is like:
// Add a table at 330, 60 with 1 column and 10 rows. Configure it to use 10pt font size,
// black border, left alignment and with some margins
CDMLTable t = c.addTable(330, 60, Chart.TopLeft, 1, 10);
t.getStyle().setFontSize(10);
t.getStyle().setBackground(Chart.Transparent, 0x000000);
t.getStyle().setAlignment(Chart.Left);
t.getStyle().setMargin(8, 5, 2, 2);
// fill the cells with either an icon and a label, or empty space
for (int i = 0; i < 10; ++i) {
if (i < labels.Length)
t.setText(0, i, "<*img=@Square,size=9,color=" + (Chart.DataColor + i).ToString("X8")
+ "*> " + labels[i]);
else
t.setText(0, i, " ");
}
Hope this can help.
Regards
Peter Kwan |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-16-2014 15:28 |
|
Hi Peter,
Using CDMLTable only partially solves the problem. I have attached an image of the
required output. The first column contains the Pie Chart Labels and Values along with icon.
Firstly, I need this column to be clickable which I had previously achieved using
legend.getHTMLImageMap("clickable", "", "title='{label}'")
Is there a way to achieve this using CDMLTable?
Secondly, I am not able to get the icons in CDMLTable
"<*img=@Square,size=9,color=" + (Chart.DataColor + i).ToString("X8")
+ "*> "
This method doesn't seem to work for me.
Thirdly, as seen in the image attached, I do not want the Left and Right borders in the
table.
It would be of great help if you could tell me a way to achieve these.
Regards,
Revathi
|
Re: Drawing horizontal lines in legend box |
Posted by Peter Kwan on May-17-2014 05:31 |
|
Hi Revathi,
The "<*img=@Square,....*>" is a new feature in ChartDirector 5.1. If you are not using
ChartDirector 5.1, you may consider to upgrade to this version. If you would like to use
an older version of ChartDirector, you may use a square symbol text character (such as
the unicode character U+2588 of the Arial font) as the icon. For example (I have modified
the table to show two columns, as you seem to have two columns in your legend box):
CDMLTable t = c.addTable(330, 40, Chart.TopLeft, 2, 10);
t.getStyle().setFontSize(10);
t.getStyle().setAlignment(Chart.Left);
t.getStyle().setMargin(8, 15, 3, 3);
t.getStyle().setBackground(Chart.Transparent, Chart.Transparent);
for (int i = 0; i < 10; ++i)
{
if (i < labels.Length)
t.setText(0, i, "<*font,color=" + (Chart.DataColor + i).ToString("X8") +
"*>\\x2588<*/font*> " + labels[i]);
t.setText(1, i, "xxx(" + i + ")");
}
For the horizontal line and image map, you can use BaseChart.addLine to directly draw
the line, and just generate the image map entry directly. For example:
c.layout();
string legendImageMap = "";
for (int i = 0; i <= 10; ++i) {
int yCoor = 40 + t.getHeight() * i / 10;
c.addLine(330, yCoor, 330 + t.getWidth(), yCoor, 0xcccccc);
if (i < 10)
legendImageMap += "<area shape='rect' coords='330," + yCoor + "," + (330 +
t.getWidth()) + "," + (40 + t.getHeight() * (i + 1) / 10) + "' href='clickable' />";
}
Hope this can help.
Regards
Peter Kwan |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-19-2014 14:17 |
|
Hi Peter,
Thank you for the prompt and apt reply. I still have one issue. While creating the image
map, I want the title to hold the label values in the first column, which I would pass to a
method while handling the click event. How do I read the text entries of the CDML Table
using row and column indexes?
t.getCell(0, i) does not return the text value?
Regards,
Revathi |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-19-2014 15:30 |
|
Hi Peter,
I figured a way to get the Labels required. Is it possible to maintain the width of the
columns in table as constant values. I may have to use text wrap to achieve it. Kindly
suggest a way.
Regards,
Revathi |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-19-2014 20:13 |
|
Hi,
I did figure out how to use fixed width and text wrap, but I prefer auto ellipsis
appearance. Is there a method to achieve it?
Regards,
Revathi |
Re: Drawing horizontal lines in legend box |
Posted by Peter Kwan on May-20-2014 03:37 |
|
Hi Revathi,
If you would like to truncate long text and ends the text with "...", you may enclose your
text with certain CDML tags, like:
<*block,maxwidth=120,truncate=1*>my original label here 123 abc xyz<*/*>
The above text "my original label here 123 abc xyz" will be truncated if it is over 120 pixels
and ends with "...".
Hope this can help.
Regards
Peter Kwan |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-22-2014 15:37 |
|
Hi Peter,
I am using two separate tables with one column each. However when I define the
imagemap separately for the two tables (or the two columns of a single table), only the
imagemap of first table is created and the same appears for the second table too. I dont
want the second table to be clickable, just need the tool tip.The following is the code.
folderSizeChart.layout();
string legendImageMap = "";
string fileImageMap = "";
int yCoor = 15, yCoor1 = 15; ;
for (int i = 1; i <= 11; ++i)
{
yCoor += folderTable.getRowHeight(i - 1);
yCoor1 += fileTable.getRowHeight(i - 1);
folderSizeChart.addLine(180, yCoor, 180 + folderTable.getWidth(), yCoor, 0xcccccc);
folderSizeChart.addLine(380, yCoor1, 380 + fileTable.getWidth(), yCoor1, 0xcccccc);
if ((i < 11) && (i <= sortedLabels.Count))
legendImageMap += "<area shape='rect' coords='180," + yCoor + ",180" +
folderTable.getWidth() + "," + (yCoor + folderTable.getRowHeight(i)) + "' href='clickable'
title='" + sortedLabels[i - 1] + " (" + sortedFolderList[i - 1] + " MB)" + "'/>";
if (i < 11 && i <= a)
fileImageMap += "<area shape='rect' coords='380," + yCoor1 + ",380" +
fileTable.getWidth() + "," + (yCoor1 + fileTable.getRowHeight(i)) + "' href='' title='" +
FinalFileNames[i - 1] + " (" + Math.Round(ConvertBytesToMegabytes(FinalFileSizes[i - 1]),
2).ToString() + "MB)'/>";
}
this.folderChartViewer.Image = folderSizeChart.makeImage();
this.folderChartViewer.ImageMap = folderSizeChart.getHTMLImageMap("clickable", "",
"title='{label} ({value} MB)'") +legendImageMap+ fileImageMap;
Kindly guide me on this.
Regards,
Revathi |
Re: Drawing horizontal lines in legend box |
Posted by Peter Kwan on May-22-2014 17:32 |
|
Hi Revathi,
With your current code, with href='' (or you can simply remove href entirely), there should
be no mouse cursor feedback (that is, the mouse should not changed to a "hand" shape)
when the mouse is over the hot spot. So the user should think the hot spot is not clickable.
However, if the user does click on it, ChartDirector will still generate the ClickHotSpot
event. This is by design so that you can have hidden clickable region on the chart. For your
case, as you want the region to be non-clickable, you can simply ignore this event:
// In the ClickHotSpot event handler, ignore the event if the href is empty
if (String.IsNullOrEmpty(e["path"])) return;
Hope this can help.
Regards
Peter Kwan |
Re: Drawing horizontal lines in legend box |
Posted by Revathi on May-22-2014 20:17 |
|
Hi Peter,
The problem I am facing here is that the Imagemap of table one appears on table two.
However if I remove the imagemap of first table or if it is empty, the second table gets the
correct imagemap. I am not able to figure out why. Please check if there is an error
anywhere in the code.
Regards,
Revathi |
Re: Drawing horizontal lines in legend box |
Posted by Peter Kwan on May-23-2014 00:48 |
|
Hi Revathi,
The line:
legendImageMap += "<area shape='rect' coords='180," + yCoor + ",180" +
folderTable.getWidth() + "," + (yCoor + folderTable.getRowHeight(i)) + "' href='clickable'
title='" + sortedLabels[i - 1] + " (" + sortedFolderList[i - 1] + " MB)" + "'/>";
should be:
legendImageMap += "<area shape='rect' coords='180," + yCoor + "," + (180 +
folderTable.getWidth()) + "," + (yCoor + folderTable.getRowHeight(i)) + "' href='clickable'
title='" + sortedLabels[i - 1] + " (" + sortedFolderList[i - 1] + " MB)" + "'/>";
Similarly, the line:
fileImageMap += "<area shape='rect' coords='380," + yCoor1 + ",380" +
fileTable.getWidth() + "," + (yCoor1 + fileTable.getRowHeight(i)) + "' href='' title='" +
FinalFileNames[i - 1] + " (" + Math.Round(ConvertBytesToMegabytes(FinalFileSizes[i - 1]),
2).ToString() + "MB)'/>";
should be:
fileImageMap += "<area shape='rect' coords='380," + yCoor1 + "," + (380 +
fileTable.getWidth()) + "," + (yCoor1 + fileTable.getRowHeight(i)) + "' href='' title='" +
FinalFileNames[i - 1] + " (" + Math.Round(ConvertBytesToMegabytes(FinalFileSizes[i - 1]),
2).ToString() + "MB)'/>";
With your original code, the image map will be tens or hundreds of thousands of pixels
wide. For example, ",180" + folderTable.getWidth() in your original code would become
",18090" (assume fontTable.getWidth() is 90). With such a wide image map, the image
map of the first table will overlap with that of the second table. That's why the first table
image map will apply to the second table as well.
Hope this can help.
Regards
Peter Kwan |
|