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

Message ListMessage List     Post MessagePost Message

  Highlight specific points on the x-axis and make them click-able
Posted by David on Apr-23-2013 10:50
| Reply | Monitor
There are certain points in my data set that have a lot of additional information associated with them.   There is no regularity to how often they appear.

What I would like to do is highlight those special points by making an additional tic mark, probably in a different color, on the x-axis.  The x-axis is the DateTime the measurement took place. If possible, I would like to make those additional tic marks click-able so that I can extract the DateTime the user just clicked.

My graphs have zooming enabled, and they are already click-able on the data points themselves.  They also have the tool tips showing the DateTime and value of the data point.

I program in C#.

Any thoughts would be appreciated.

  Re: Highlight specific points on the x-axis and make them click-able
Posted by Peter Kwan on Apr-23-2013 16:13
| Reply | Monitor
Hi David,

I think the sample code "Custom Clickable Objects" should be quite close to what you need:

http://www.advsofteng.com/doc/cdnet.htm#customclickable.htm

One of the things the sample code demonstrates is a mark on the axis that is clickable. You may put as many marks on the x-axis as you like. In the sample code, the mark is attached to the top x-axis, but you can attach the mark to the bottom x-axis as well. The mark includes some text, a tick, and a line. If you do not want the line, you can set it to transparent. (See Mark.setMarkColor.) The mark in the sample code is clickable and has tooltips.

Hope this can help.

Regards
Peter Kwan

  Re: Highlight specific points on the x-axis and make them click-able
Posted by David on Jun-17-2013 12:20
| Reply | Monitor
Sorry I'm so late in responding.  I'm the sole programmer on a few projects and I got pulled in another direction for a while.

The code to put a mark in worked great, and I was able to just have the mark and not the line.  However, I cannot get the marks to be clickable.

Here is the code I'm using to build the image map string as well as add the marks:

for (int i = prdStartIndex; i <= prdEndIndex; i++)
{
      mark = xyChart.xAxis2().addMark(this.allMatrixDateTimesAsDouble[i], unchecked((int)0x809933ff), "", "Arial Bold");
      mark.setLineWidth(2);
      // Set the mark label font color to purple (0x9933ff)
     mark.setFontColor(0x9933ff);
     mark.setMarkColor(Chart.CColor(Color.Transparent), Chart.CColor(Color.Transparent), unchecked((int)0x809933ff));

      markImageMapStringBuilder.Append("<area " + mark.getImageCoor() + " title='PRD present'>");
}

The problem is that mark.getImageCoor() does not return any value at all.  Therefore, it cannot build a clickable image map.

Any ideas?

Thanks,

David

  Re: Highlight specific points on the x-axis and make them click-able
Posted by Peter Kwan on Jun-17-2013 23:54
| Reply | Monitor
Hi David,

The image map must be obtained after the chart is drawn (eg. after makeWebImage, makeImage or setting the chart object to the WinChartViewer). It is because if the chart is still being configured, ChartDirector cannot know the position of various objects. For example, if you add a data point to the chart, ChartDirector may need to adjust the axis scale to accomodate that data point, and this changes the position of all other data points. So ChartDirector would only compute the positions when the chart is completed.

For your case, you may do something like:

ArrayList marks = new ArrayList();

for (int i = prdStartIndex; i <= prdEndIndex; i++)
{
      mark = xyChart.xAxis2().addMark(this.allMatrixDateTimesAsDouble[i], unchecked((int)0x809933ff), "", "Arial Bold");
      mark.setLineWidth(2);
      // Set the mark label font color to purple (0x9933ff)
     mark.setFontColor(0x9933ff);
     mark.setMarkColor(Chart.CColor(Color.Transparent), Chart.CColor(Color.Transparent), unchecked((int)0x809933ff));

     marks.Append(mark);
}

The after the chart is drawn, you may obtain the Mark objects from "marks" to determine their image maps.

Hope this can help.

Regards
Peter Kwan

  Re: Highlight specific points on the x-axis and make them click-able
Posted by David on Jun-18-2013 10:26
| Reply | Monitor
Referencing your suggestion, I created the following:

List<Mark> phaseResolvedDataMarks = new List<Mark>();

And filled it with instances of "mark" from the loop that was creating marks on the graph.

After I have added all the data, I have the following code:

chartViewer.Chart = xyChart;

chartImageMap = xyChart.getHTMLImageMap("clickable", "", "title='[{dataSetName}] {x|mmm dd, yyyy hh:nn:ss}  val = {value|4}'");

for (int i = 0; i < phaseResolvedDataMarks.Count; i++)
{
     markImageMapStringBuilder.Append("<area " + phaseResolvedDataMarks[i].getImageCoor() + " title='PRD present'>");
}

chartViewer.ImageMap = chartImageMap + markImageMapStringBuilder.ToString();

As before, getImageCoor() is not returning anything, so that data is missing from the collection of <area ""> strings.  I tried it using an ArrayList too, but it didn't matter (as it shouldn't).  I also tried it with the foreach construct instead of loop indexing, even though again I know it shouldn't matter.

The data in chartImageMap are clickable as expected.

  Re: Highlight specific points on the x-axis and make them click-able
Posted by Peter Kwan on Jun-19-2013 02:09
| Reply | Monitor
Hi David,

Hi David,

Sorry for overlooking your code. I read your code again, and find that your mark has no label at all. The image map for the Mark object refers to the Textbox part of the mark (the getImageCoor is a method of the Box class inherited by the Mark class), not the mark line itself. If the mark has no label, the getImageCoor will not return anything.

If you would like the mark line itself to be clickable, you just need to create an image map directly. Because the size of the mark line is provided by your code (unlike a text box, in which the width of the text is hard to determine and the text is subjected to rotation), so it is quite easy to create the image map. There is not even a need to store the Mark objects. For example:

// Put the following code after drawing the chart
for (int i = prdStartIndex; i <= prdEndIndex; i++)
{
      int xCoor = c.getXCoor(this.allMatrixDateTimesAsDoubler[i]);
      markImageMapStringBuilder.Append("<area shape='rect' href='clickable' coords='" + (xCoor - 3) + "," + c.getPlotArea().getTopY() + "," + (xCoor + 3) + "," + c.getPlotArea().getBottomY()  + "' title='PRD present'>");
}

Hope this can help.

Regards
Peter Kwan

  Re: Highlight specific points on the x-axis and make them click-able
Posted by David on Jun-19-2013 08:53
| Reply | Monitor
Thanks, that helped a lot.  Here is the code fragment to generate the string that worked with my current clickhotspot handler:

double xChartCoordinate;
int xGraphCoordinate;

for (int i = prdStartIndex; i <= prdEndIndex; i++)
{
    xChartCoordinate = this.allMatrixDateTimesAsDouble[i];
    xGraphCoordinate = xyChart.getXCoor(xChartCoordinate);
    markImageMapStringBuilder.Append("<area shape=\\"rect\\" coords='" + (xGraphCoordinate - 3) + "," + xyChart.getPlotArea().getTopY() + "," + (xGraphCoordinate + 3) + "," + (xyChart.getPlotArea().getTopY() - 6) + "' title='PRD present' href=\\"clickable?x=" + Math.Round(xChartCoordinate, 0).ToString() +  "\\">");
}

I emulated the string created by getHTMLImageMap() as closely as possible.  The function getBottomY() does not exist in my version of the code, so I made a guess on how to get a good value.

Thanks again.  As always you get me to a solution.