#5168 closed defect (duplicate)
chart2d axis errors
Reported by: | guest | Owned by: | Eugene Lazutkin |
---|---|---|---|
Priority: | high | Milestone: | 1.2 |
Component: | Charting | Version: | 1.0 |
Keywords: | dojox, chart, axis | Cc: | [email protected]…, bill |
Blocked By: | Blocking: |
Description (last modified by )
Trying to put a chart into a div within special dojo div causes the axis numbering to be rendered offset to the graphic of the chart. The chart body is in the correct position but the numbering on the axis is not. This only occurs when I use a dojo div like LayoutContainer? etc , the rendering and positioning is as expected with standard html divs. It seems like it allows for the offset of the dojo divs twice when rendering the axis.
for example: Rendering a chart
var chart5 = new dojox.charting.Chart2D("test"); chart5.addAxis("x"); chart5.addAxis("y", {vertical: true}); chart5.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]); chart5.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); chart5.render();
into the following html generates a chart that is very misaligned.
<div dojoType="dijit.layout.LayoutContainer?" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
<div dojoType="dijit.layout.ContentPane?" layoutAlign="left" style="background-color:lightblue;width: 20px;"> </div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="client">
<div id="test" style="width: 400px; height: 200px;"></div>
</div>
</div>
If you were to take out the left contentpane then the axis is still misaligned but far less so.
Attachments (2)
Change History (24)
Changed 15 years ago by
Attachment: | misaligned.png added |
---|
comment:1 Changed 15 years ago by
Component: | General → Charting |
---|---|
Owner: | changed from anonymous to Tom Trenka |
comment:2 Changed 15 years ago by
Owner: | changed from Tom Trenka to Eugene Lazutkin |
---|
comment:3 Changed 15 years ago by
Milestone: | → 1.0.2 |
---|---|
Status: | new → assigned |
Looks like one more more problem of dojo.coords()/dojo.marginBox().
comment:5 Changed 15 years ago by
Milestone: | 1.0.2 → 1.0.3 |
---|
comment:6 follow-up: 7 Changed 15 years ago by
Only happens if a node somewhere in the parent chain uses position:relative
.
comment:7 follow-up: 9 Changed 14 years ago by
Replying to rcoup:
Only happens if a node somewhere in the parent chain uses
position:relative
.
As per previous comment, I experienced this problem when adding other dojo containers above or to the right of my chart.
/dojox/charting/axis2d/common.js is taking the x,y coords of the parent chart object and adding this onto the positioning of the chart text only. The axis markers and lines are fine for all my tests.
As the coords of this section of code is relative to the page, it seems to me that the following lines can be changed as follows:-
Line 37: top = Math.floor(y - size); Line 40: dojo.marginBox(p, {l: Math.floor(x - box.w / 2), t: top}); Line 43: dojo.marginBox(p, {l: Math.floor(x - box.w), t: top}); Line 47: dojo.marginBox(p, {l: Math.floor(x), t: top});
This fixes the problems I am seeing.
Please email me at gresham at mediavisual dot com if I can help further. I'll try to complete the disclaimer tomorrow and send in some patches, as there are also a few other charting issues I'm hitting.
Regards Paul
comment:9 Changed 14 years ago by
Replying to guest: I am not the original 'guest' who reported this issue, however I tried Paul's patch (removing the parent.x and parent.y from those lines) and it didnt fix my issue with the axis text displaying in the wrong area of the chart. My charts are displayed within a dijit.Dialog, but I do think the is the same problem.
Steve L.
comment:10 follow-up: 11 Changed 14 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:11 follow-up: 12 Changed 14 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
Replying to elazutkin:
(In [12177]) gfx: Switching from absolutely positioned labels to relatively positioned ones. It should eliminate all weird problems with labels positioning. Fixes #5168.
Hi,
This is with reference to defect Id: #5168 which is marked as closed. Has anyone tried a Simple 2D Bar Chart inside a TitlePane?, using tundra.css in IE6.0 with Dojo1.0? The axis gets misaligned. Please suggest. Thank you.
Regards, Yazad [email protected]…
comment:12 Changed 14 years ago by
Replying to guest:
Replying to elazutkin:
(In [12177]) gfx: Switching from absolutely positioned labels to relatively positioned ones. It should eliminate all weird problems with labels positioning. Fixes #5168.
Hi,
This is with reference to defect Id: #5168 which is marked as closed. Has anyone tried a Simple 2D Bar Chart inside a TitlePane?, using tundra.css in IE6.0 with Dojo1.0? The axis gets misaligned. Please suggest. Thank you.
Regards, Yazad [email protected]…
Please not the problem is not reproducible on FireFox? 2.0.0.7 and I haven't tested on IE7. Please let us know if you get the same issue in IE7 too.
Regards, Yazad [email protected]…
comment:13 follow-ups: 15 16 Changed 14 years ago by
You forgot to mention what version of Dojo you use and how you got it.
comment:15 Changed 14 years ago by
Replying to elazutkin:
You forgot to mention what version of Dojo you use and how you got it.
I am using Dojo 1.0.2
comment:16 Changed 14 years ago by
Replying to elazutkin:
You forgot to mention what version of Dojo you use and how you got it.
I get this error in dojo1.0.2
<span id="infoSet1" dojoType="dijit.TitlePane?" open="true" title="Information Set 1" style="width:700px;height:400px;"> <!-- table border="1"><tr><td --> <div id="test18" style="width: 200px; height: 200px;"></div> <!-- /td></tr></table --> </span>
and my chart code is generated with the code:
<script type="text/javascript"> dojo.require("dijit.TitlePane?"); dojo.require("dojox.charting.Chart2D");
makeObjects = function(){
var chart18 = new dojox.charting.Chart2D("test18"); chart18.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}); chart18.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}); chart18.addPlot("default", {type: "ClusteredColumns?", gap: 2}); chart18.addSeries("Series A", [29, 21, 13, 44, 57], {stroke: {color: "red"}, fill: "lightpink"}); chart18.render();
};
dojo.addOnLoad(makeObjects);
</script>
comment:17 Changed 14 years ago by
#5168 you reopened is a historic ticket. The more modern ticket is #5779, which was fixed post 1.0.2. This fix moves labels from external HTML overlay to the gfx domain. The former is affected by layout tickets (as all absolutely and relatively position HTML DOM nodes are. The latter is a drawing by gfx, which doesn't care about the surroundings. While I don't like this fix because of many reasons, it should work for you. Please retest the SVN version of Dojo before reopening long fixes --- we have no power to change downloaded archives, so we always develop against the SVN repository.
Changed 14 years ago by
Attachment: | simpleBarGraphTest.htm added |
---|
An example of a simple Bar graph inside a title pane.
comment:19 Changed 14 years ago by
OK. Let me ask one more time before I close this ticket again: did you test it with the current trunk?
comment:20 Changed 14 years ago by
Milestone: | 1.0.3 → 1.1.1 |
---|
comment:21 Changed 14 years ago by
Description: | modified (diff) |
---|---|
Resolution: | → duplicate |
Status: | reopened → closed |
Closing in favor of #6587 as duplicate.
comment:22 Changed 14 years ago by
Milestone: | 1.1.1 → 1.2 |
---|
Eugene--looks like something to do with the way the second surface is tied?