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

Message ListMessage List     Post MessagePost Message

  HTMLImageMap for (portions of) StepLineLayer?
Posted by tim on May-23-2011 22:56
| Reply | Monitor
Attachments:
I would like to have image map/info popups on some segments of my chart but I only want to show it for some portions of the plot.

Specifically we have a "binary" line representation that can be represented like this:

0000000001000000000001000000000001000001

We plot the 0s with greem and 1s with red.  I would like to only show data on a mouseover when over a red line.

Is this possible?  I was not able to figure out how to do it with interlineLayers - but perhaps I am doing it wrong.

The attached file shows an example of our representation.

Also - is it possible to have the info that pps up refer to the nearest red line?

(What we're showing is a timeline of data on a network and represent gaps with red and healthy with green)

Regards,
Tim
greenred.png

  Re: HTMLImageMap for (portions of) StepLineLayer?
Posted by Peter Kwan on May-24-2011 03:17
| Reply | Monitor
Hi tim,

If you are using code similar to the "Binary Data Series" sample code, there is no method to show tooltips for the red part just using the layers in the code. It is because the red parts are not really part of the step lines, but are the region between two step lines filled by the "InterLineLayer". In ChartDirector, tooltips can be created on the lines themselves, but not on the region between two lines.

To solve the problem, you may create an additional transparent layer that represents the red region, and attach the tooltips to this layer. In the most general case (in which the x-width of each digit is variable), you may use a bubble layer with rectangular bubbles. (For the simple case that the width of each digit is a constant, a box-whisker layer can be used.)

For example, in the original sample code, there are the lines:

StepLineLayer *layer1 = c->addStepLineLayer(shiftedLine1, Chart::Transparent);
layer1->addDataSet(reverseShiftedLine1, Chart::Transparent);
layer1->setXData(DoubleArray(dataX, sizeof(dataX)/sizeof(dataX[0])));

You can add the folloiwng lines:

//compute the x, y, width, height of the rectangular bubbles
std::vector<double> midX;
std::vector<double> midY;
std::vector<double> width;
std::vector<double> height;

for (int i = 0; i < sizeof(dataY)/sizeof(dataY[0]) - 1; ++i)
{
     if (dataY[i] == 1)
    {
        midX.push_back((dataX[i] + dataX[i + 1]) / 2);
        midY.push_back(3);
        width.push_back(dataX[i + 1] - dataX[i]);
        height.push_back(1);
    }
}

//plot the transparent rectangular bubbles
ScatterLayer *sLayer = c->addScatterLayer(DoubleArray(&(midX[0]), midX.size()), DoubleArray(&(midY[0]), midY.size()), "", Chart::SquareSymbol, 1, Chart::Transparent, Chart::Transparent);
sLayer->setSymbolScale(DoubleArray(&(width[0]), width.size()), Chart::XAxisScale, DoubleArray(&(height[0]), height.size()), Chart::YAxisScale);

//set the tooltips to the bubbles
sLayer->setHTMLImageMap("clickable", "", "title='{x}'");
//also disable the tooltips of the original layer1 so it would interfere
layer->setHTMLImageMap("{disable}");


At the end of the sample code, you can then get the tooltips using:

*imageMap = c->getHTMLImageMap("");


You may modify how the center and width of the rectangles are compute to achieve showing "tooltips of the nearest red line".

Hope this can help.

Regards
Peter Kwan