|
 Reversing the high and low values on a line graph |
| Posted by Tom on May-26-2012 00:11 |
|
Hi,
So we are using the ASP/COM version and we have a line graph that gets rendered based
on certain input parameters. The resulting data (XML Data which is returned ) has the high
point and low point reversed.
And for some reason it works on the version 4.1 but not on any version higher than that.
Please do let me know what you think of this problem. |
| Re: Reversing the high and low values on a line graph |
| Posted by Peter Kwan on May-26-2012 03:04 |
|
Hi Tom,
I am not too sure what is "The resulting data (XML Data which is returned ) has the high
point and low point reversed." refer to. The data can be an arbitrary sequence of value. For example, the data can be (12, 57, 37, 27, 21). ChartDirector cannot know whether your data has been "reversed" or not. It just plots the chart based on the data sequence as is.
Do you mean the chart is configured to use a reversed y-axis? (Eg. a vertical axis with 0 on top, and 100 at the bottom) If this is the case, would you mind to inform me how your code configures the chart use a reverse axis (using Axis.setReverse or use Axis.setLinearScale with the min/max value swapped)? May be you can inform me the charting part of your code, and the resulting chart in Ver 4.1 and Ver 5.0, so I may try to reproduce the problem.
Regards
Peter Kwan |
| Re: Reversing the high and low values on a line graph |
| Posted by Tom on May-26-2012 04:11 |
|
So in the below image, when we hover over the 200 data point on the left - the value
shows up as 500 and the date is also 2/17 instead of 2/15.
And on the right most data point the value shows up as 200 and date shows up as 2/15.
I am trying to understand how ChartDirector calculates these values and sends data back.
Please enlighten me on this one.
|
| Re: Reversing the high and low values on a line graph |
| Posted by Peter Kwan on May-29-2012 02:24 |
|
Hi Tom,
From your description, I assume you have an ASP web application. When you put the mouse over the left data point (which should be at y = 200), the tooltip shows 500 instead of 200.
Are the tooltip comes with the HTML image map generated by ChartDirector? (ChartDirector does not really output XML. It outputs HTML image maps.) Are you using standard HTML features to display the tooltips (as opposed to some custom Javascript library)?
I am not sure how your chart is created. I tried to create something similiar with 3 line layers, using ChartDirector Ver 5.1, and it seems to work normally. The tooltips are all correct.
To diagnose the problem, please kindly try my attached code to see if it works in your computer. It the attached code works, but your actual chart does not work, is it possible to modify the attached code to use similar charting code as your real code, and see if it can reproduce the problem. If you can reproduce the problem with some sample code, please inform me of the code to help me diagnose the problem.
Regards
Peter Kwan
| clickline.asp |
|---|
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
data = Array(200, 500)
dataX = Array(DateSerial(2012, 2, 15) + TimeSerial(8, 0, 0), DateSerial(2012, 2, 17) + TimeSerial(8, 0, 0))
Set c = cd.XYChart(650, 260)
Call c.setPlotArea(60, 40, 550, 180)
Set layer = c.addLineLayer(data, &Hff0000, "Revenue")
Call layer.getDataSet(0).setDataSymbol(cd.CircleSymbol, 13)
Call layer.setXData(dataX)
Set m1 = c.addLineLayer(Array(200, 200), &H00ff00)
m1.setXData(dataX)
Set m2 = c.addLineLayer(Array(40, 40), &H00ff00)
m2.setXData(dataX)
Call c.addInterLineLayer(m1.getLine(), m2.getLine(), &Hc000ff00)
Call c.addInterLineLayer(layer.getLine(), m1.getLine(), &H880000)
chart1URL = c.makeSession(Session, "chart1")
imageMap = c.getHTMLImageMap("", "", "title='{x|yyyy-mm-dd}: {value}'")
%>
<html>
<body style="margin:5px 0px 0px 5px">
<img src="getchart.asp?<%=chart1URL%>" border="0" usemap="#map1">
<map name="map1">
<%=imageMap%>
</map>
</body>
</html>
|
|
 | |
| Re: Reversing the high and low values on a line graph |
| Posted by Tom on May-29-2012 22:29 |
|
Hi Peter,
So I am trying to figure out how we are generating the HTML Image files. Basically I
think we are generating these HTML image files dynamically in a temp folder as you can
see from the below mentioned code. We are clicking a particular icon which displays the
graph and when we click that icon we are posting the form variables to a particular
action method.
Now I am trying to figure out how we are creating the HTML Image file and where that
code is located. So that I can debug or use the code that you provided me..
<tr><td><img src="/images/tempChart/chartrad52C5E.tmp.png" border="1"
usemap="#1000620" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1000620')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1000620"><area
shape="poly" coords="348,42,199,42,199,52,348,52" alt="200 (H)?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,42,50,42,50,52,199,52"
alt="200 (H)?
2/15/2012 6:55:00 AM"></map><img src="/images/tempChart/chartrad09F0E.tmp.png"
border="1" usemap="#1001800" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1001800')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1001800"><area
shape="poly" coords="348,28,199,48,199,58,348,38" alt="499 (H)?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,48,50,68,50,78,199,58"
alt="199?
2/15/2012 6:55:00 AM"></map><img src="/images/tempChart/chartradE925D.tmp.png"
border="1" usemap="#1001080" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1001080')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1001080"><area
shape="poly" coords="348,62,199,48,199,58,348,72" alt="33 (L)?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,48,50,34,50,44,199,58" alt="61
(H)?
2/15/2012 6:55:00 AM"></map><img src="/images/tempChart/chartrad556AA.tmp.png"
border="1" usemap="#1002205" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1002205')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1002205"><area
shape="poly" coords="348,42,199,58,199,68,348,52" alt="100 (H)?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,58,50,74,50,84,199,68" alt="40?
2/15/2012 6:55:00 AM"></map><img src="/images/tempChart/chartrad77BF9.tmp.png"
border="1" usemap="#1001300" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1001300')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1001300"><area
shape="poly" coords="348,59,199,50,199,60,348,69" alt="67?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,50,50,42,50,52,199,60" alt="99?
2/15/2012 6:55:00 AM"></map><img src="/images/tempChart/chartradCD06D.tmp.png"
border="1" usemap="#1005746" alt="Click to see larger image" alt1="Click to see image"
onclick="graphSelected('9ABD8A71784541CF93C2EEB049780121', '1005746')"
onmouseover="style.cursor = 'hand'; return true;"> <map name="1005746"><area
shape="poly" coords="348,34,199,48,199,58,348,44" alt="6.1 (H)?
2/17/2012 2:44:00 PM"><area shape="poly" coords="199,48,50,62,50,72,199,58"
alt="3.3?
2/15/2012 6:55:00 AM"></map>
</td></tr> |
| Re: Reversing the high and low values on a line graph |
| Posted by Peter Kwan on May-30-2012 00:58 |
|
Hi Tom,
According to your HTML output, the image map is correct. The left side is 200, while the right side is 500. For example, in the following image map, the first <area> tag is at 2/17/2012, and it is on the right side (the coords has larger x-coordinate values). The second <area> tag is for 2/15/2012 is on the left side.
<map name="1001800"><area shape="poly" coords="348,28,199,48,199,58,348,38" alt="499 (H) 2/17/2012 2:44:00 PM"><area shape="poly" coords="199,48,50,68,50,78,199,58" alt="199 2/15/2012 6:55:00 AM"></map>
Note that ChartDirector will generate the <area> tag on the right side first, followed by the left side. It is because when viewed in 3D (you can look at the 3D bar chart such as the "Soft Multi-Bar Chart" sample code as an example), the right side can block the left side. In other words, the right side is in front, while the left side is at the back. So the image map for the right side should come first, followed by the left side.
In your code, I note that is a Javascript function "graphSelected" the seems to reference the image map. I am not sure what this function is doing. Is it possible this function wrongly assumes that the image map must be from left to right (that is, it ignores the coords attribute, which clearly identify the position of the <area> tags)?
Regards
Peter Kwan |
| Re: Reversing the high and low values on a line graph |
| Posted by Tom on May-30-2012 04:31 |
|
Hi Peter,
So I was wondering does the Chart Director API itself create the tool tips or its the
responsibility of the client to use the returning HTML (or XML data that chart director )
returns and use that data to create the tool tips ??
Because I am planning on trying to call the Chart Director API by using the Chart Director dll
and then seeing what tool tip values would be generated.
Please do let me know.
Thanks,
Tom |
| Re: Reversing the high and low values on a line graph |
| Posted by Peter Kwan on May-30-2012 23:01 |
|
Hi Tom,
Typically, your code calls the ChartDirector API BaseChart.getHTMLImageMap to ask ChartDirector to create the image map (the <area> tags). ChartDirector will then create the <area> tags according to the parameters your code provides, and return the image map to your code as a text string. Your code can then use the image map in anyway it likes. Most people will insert the image map in the HTML web page to be returned to the browser.
When calling BaseChart.getHTMLImageMap, your code can specify that the image map should contain tooltips of the format of your choice. See the "Clickable Charts" section in the ChartDirector documentation for more details.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Tom)