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

Message ListMessage List     Post MessagePost Message

  getHtmlImageMap seems different.
Posted by Jaideep on Feb-05-2011 06:16
| Reply | Monitor
Hi,
I have a peculiar problem regarding multi series charts and was hoping you could help me out with it.

Say i have a multi-layer line chart with the first layer having some null data values (substituted by "1.7E+308") for getting a discontinuous line chart layer and the second layer has normal data values.
In such a scenario when i try to access the ImageMap object (to later set the tooltips), it comes out  very different and hence messes up the code i use to set the tooltips.
I use c.getHTMLImageMap("", "", "{dataSet}") and the dataSet values are also out of place.

Now if i take the null values out or replace them with some valid values, the same  scenario would give me the right ImageMap to work with and set tooltips.
Also, if i revert back to a single layer, the null values don't seem to affect the ImageMap either.

Is this a known bug? Am i not looking at the right place ?
Please let me know what you find.

thanks,
Jaideep
LogiXML.

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Feb-05-2011 22:48
| Reply | Monitor
Hi Jaideep,

We are not aware that ChartDirector can generate different image maps for the same chart.

However, similar effect may occur if the browser is viewing a certain chart, but the image map is generated for a different chart. For example, this can happen if the browser is not viewing an old chart from cache, using with the most updated image map.

If you are using the .NET framework, and the chart and image map is output using the WebChartViewer control, the WebChartViewer is designed with "cache defeat" features that can ensure the browser does not use cache. On the other hand, sometimes people may use their own methods to output the chart (such as saving the chart as a file on the hard disk and ask the browser to view that file). If such alternative output methods are not designed correctly, there is a real danger that the browser will use cache instead of viewing the most updated chart image.

Are you still be able to reproduce the problem? If the problem is reproducible, please save the output as received by the browser as a web achive (in IE, choose File/Save As, and select "Web Archive, Single File"). I will try to analyze the output to see if I can find any hint as to the cause of the problem.

Regards
Peter Kwan

  Re: getHtmlImageMap seems different.
Posted by Jaideep on Feb-08-2011 05:29
| Reply | Monitor
Attachments:
Hi Peter,

Thanks for looking into this. I have saved the html page and attached it to this reply.

Also, i am essentially using the getHTMLImageMap() to get individual points on the chart and then assign custom tooltips and clickable actions using the "TITLE" and "HREF" attributes later on.
When the Image Map comes out in a different order (an example is the scenario i described in the original message), it messes up the order in which i assign the tooltips etc.
Is there a better way to assign tooltips etc to individual points on the chart, and can those values be passed when the different layers are being added to the chart in the first place, so that i don't have to rely on the Image map?

Please advise.

thanks,
Jaideep.
chart samples.mht
chart samples.mht
47.51 Kb

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Feb-09-2011 04:21
| Reply | Monitor
Hi Jaideep,

Thanks for the information.

From the web archive, it seems both the chart and the image map are delivered using your own methods to the browser, and not by ChartDirector. It seems to be something related to the "rdChart.aspx" script and the "rdLoadChartMap" Javascript function, both of them are not our code.

In fact, from the web archive, it is not even clear if the chart and the image map are generated by ChartDirector. I just assume your code is using ChartDirector to generate both the chart image and the image map, and then use your own method to deliver them to the browser.

Unluckily, in the web archive, I cannot see the image map. The image map seems to be loaded dynamically when the browser execute your Javascript rdLoadChartMap functions. When the rdLoadChartMap is execute on my browser, it does not work, as it seems to work only on the original browser that loads the web page, and not in an archive. So I cannot analyse if the imiage map is correct.

Anyway, to diagnose the problem, we need to look at two parts:

(a) Are the chart image and the image map generated correctly on the server side?

(b) Are the chart image and the image map delivered correctly to the browser?

If you can somehow obtain the chart image and the image map as they are generated on the server side (perhaps save them to a file), I can help to determine their correctness.


For your current method in using the getHTMLImageMap, note that there is an "extra field" feature in ChartDirector. It allows you to bind additional information to the data points (such as custom TITLE and HREF attributes), and then use them in the image map. A short example is like:

Layer layer = c.addLineLayer(myData);
layer.addExtraField(anArrayOfSpecialTooltips);
//use the extra field in the title attribute
layer.setHTMLImageMap("", "", "title='{field0}'");

With the above method, the extra field is bound to the image map by ChartDirector, so you do no need to worry about the ordering of the image map.

You may also include special "cookie" in the image map, so that when you parse the image map, you can know which layer and data point it is referring to, and insert the correct HREF and TITLE attribute.

For example:

Layer layer = c.addLineLayer(myData, -1, "Alpha");
//The myCookie attribute will contain the data set name and the array index of the data point
layer.setHTMLImageMap("", "", "myCookie='{dataSetName}_{dataItem}'");


According to HTML standard, the only method to assign standard tooltips to part of an image (such as a point on the image) is to use HTML image map. If you do not want to use ChartDirector to generate the image map, you may generate it with your own code. (It is just standard HTML.) The information you need is the pixel coordinates of the data points, and they can be retrieved using XYChart.getXCoor and XYChart.getYCoor.

In additional to using standard tooltips, you may also use Javascript to create custom pop up boxes and use them as tooltips. This can avoid the image map. You would need to handle the mousemove and mouseout events of the chart image, and determine if the mouse is over a data point, and pop up the correct tooltip.


Hope this can help.

Regards
Peter Kwan

  Re: getHtmlImageMap seems different.
Posted by Jaideep on Feb-12-2011 05:17
| Reply | Monitor
Peter,
Thanks for the reply.

I looked at the options you suggested and was trying to work with the first one, where the Title attribute can be appended to the Image map by chartdirector itself.
I ran into one issue though.

Lets consider i add a Line layer to the chart -
Layer layer = c.addLineLayer(myData);
layer.addExtraField(anArrayOfSpecialTooltips);
//use the extra field in the title attribute
layer.setHTMLImageMap("", "", "title='{field0}'");

Now, i add another dataset to this layer -
layer.addDataSet(myData2);

How do i add the Title values(tooltips) specific to myData2(or the second dataset) to the layer?
In other words - is there a way to set the HTMLImageMap on a dataset level instead ?

Please let me know.

thanks,
Jaideep.

p.s. In the meantime, i tried passing all tooltips for one layer (say with 2 datasets) in the anArrayOfSpecialTooltips and then called the layer.setHTMLImageMap(), and they don't get assigned in order either.

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Feb-12-2011 14:51
| Reply | Monitor
Hi Jaideep,

The code in your case is:

Layer layer = c.addLineLayer(myData);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData);
layer.addDataSet(myData2);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData2);

layer.setHTMLImageMap("", "", "title='{dsdiField0}'");

The {dsdiField0} means that the extra field are assign to the data points, so that each array is assigned to a data set, and each item in the array is assigned to the corresponding item in the data set.

Should you need further information, please feel free to contact me.

Regards
Peter Kwan

  Re: getHtmlImageMap seems different.
Posted by Jaideep on Feb-15-2011 03:11
| Reply | Monitor
Peter,

Thanks for suggesting this method, it works fine for setting tooltips.

One more thing - how do i set custom HREF values using the above method? Basically for each layer (and also each dataset), how would i add both the title (you have already explained that in the response above) and the HREF (which would be a custom value, not necessarily a direct link).

In short i am trying to see something like this in the HTML Image map for each datapoint-

<area shape="poly" coords="702,255,912,62,912,72,702,265" TITLE='Plan : 6308603.743' HREF="Some custom Value"/>

Please let me know.

thanks,
Jaideep.

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Feb-15-2011 11:03
| Reply | Monitor
Hi Jaideep,

I assume you mean you want to have a different custom URL for each data point, In other words, if you have 3 layers, with each layer having 4 datasets, and with each datasets having 5 data points, you would like to have 3 x 4 x 5 = 60 different URLs.

You may achieve this using similar methods as for the tooltips:

Layer layer = c.addLineLayer(myData);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData);
layer.addDataSet(myData2);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData2);

layer.addExtraField(anArrayOfURLsForMyData);
layer.addExtraField(anArrayOfURLsForMyData2);

//tooltips start from the first extra field (index = 0). url starts from the 3rd extra field (index = 2)
layer.setHTMLImageMap("{noescape_url}{dsdiField2}", "", "title='{dsdiField0}'");

The {noescape_url} above means that ChartDirector will not escape dsdiField2 as URL. (In other words, '?' will be output as '?', not as %3F.)

Hope this can help.

Regards
Peter Kwan

  Re: getHtmlImageMap seems different.
Posted by Jaideep on Feb-17-2011 06:13
| Reply | Monitor
Hi Peter,

Thanks for the reply.
I used this method as suggested by you -

Layer layer = c.addLineLayer(myData);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData);
layer.addDataSet(myData2);
layer.addExtraField(anArrayOfSpecialTooltipsForMyData2);

layer.addExtraField(anArrayOfURLsForMyData);
layer.addExtraField(anArrayOfURLsForMyData2);

//tooltips start from the first extra field (index = 0). url starts from the 3rd extra field (index = 2)
layer.setHTMLImageMap("{noescape_url}{dsdiField2}", "", "title='{dsdiField0}'");

On doing so - when i look at the HTMLImageMap - the titles come out fine as follows..
dataset1(1st extra field - index=0)
dataset2(2nd extra field - index=1)

but the URL values come out as
dataset1(3rd extra field - index=2)
dataset2(3rd extra field - index=2)

instead of the right value which should be -
dataset2(4th extra field - index=3)

am i missing something? please let me know.

thanks,
Jaideep.

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Feb-17-2011 10:35
| Reply | Monitor
Attachments:
Hi Jaideep,

I have just checked myself, and the code works normally in my case. I have attached a complete example for your reference.

If the above still does not solve the problem, is it possible to include an runnable example that can illustrate the problem?

Regards
Peter Kwan
symbolline2.aspx
symbolline2.aspx
1.85 Kb

  Re: getHtmlImageMap seems different.
Posted by Jaideep on Jan-18-2012 07:56
| Reply | Monitor
Peter,

I have an issue which is slightly related to this one we resolved a while ago.

In the same chart layer(lay),i have multiple datasets (say ds1,ds2,ds3 etc)
I am trying to add extraFields to the layer(lay) for each dataset in this manner.

For the first dataset (ds1) -
lay.addExtraField(TitleArray)
lay.addExtraField(CaptionArray)
lay.addExtraField(DescriptionArray)
lay.addExtraField(MiscArray)

For each extra dataset (ds2, ds3 etc)
Loop
lay.addExtraField(TitleArray)
        lay.addExtraField(CaptionArray)
        lay.addExtraField(DescriptionArray)
        lay.addExtraField(MiscArray)
End Loop.

How do i set up the desired imagemap which contains the right values for each dataset in the layer?
(I am looking to pass the Caption, Description and Misc Array values in this example, and ignore the first extraField (Title))

This is what i call currently -
lay.setHTMLImageMap("", "", "{noescape_html} Caption='{dsdiField1}' description='{dsdiField2}' misc='{dsdiField3}'")

Is this a wrong approach, is there another way to pass these values correctly? Please let me know.

thanks,
Jaideep.

  Re: getHtmlImageMap seems different.
Posted by Peter Kwan on Jan-19-2012 01:20
| Reply | Monitor
Hi Jaideep,

Actually, for the purpose of generating the last parameter in the getHTMLImageMap, you may consider just to use one extra field per data set. You can always combine all your extra fields together, and just use:

lay.addExtraField(CaptionDescriptionMiscAttributesForDS1)
lay.addExtraField(CaptionDescriptionMiscAttributesForDS2)
lay.addExtraField(CaptionDescriptionMiscAttributesForDS3)

lay.setHTMLImageMap("", "", "{noescape_html} {dsdiField0}")

However, if you would like to have 4 arrays per data set, the code should be:

For each extra field (Title, Caption, Description, Misc)
Loop
     For each extra dataset (ds1, ds2, ds3)
     Loop
        lay.addExtraField(TheExtraFieldForTheDataSet)
     End Loop
End Loop.

So in brief, the sequence of adding the extra field should be:

lay.addExtraField(TitleArrayForDS1)
lay.addExtraField(TitleArrayForDS2)
lay.addExtraField(TitleArrayForDS3)
lay.addExtraField(CaptionArrayForDS1)
lay.addExtraField(CaptionArrayForDS2)
lay.addExtraField(CaptionArrayForDS3)
......

Then the getHTMLImageMap code can use:

"{noescape_html} Caption='{dsdiField3}' description='{dsdiField6}' misc='{dsdiField9}'")

Hope this can help.

Regards
Peter Kwan