chart2d axis errors

[guest]

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.

[Tom Trenka]

Eugene--looks like something to do with the way the second surface is tied?

[Eugene Lazutkin]

Looks like one more more problem of dojo.coords()/dojo.marginBox().

[Eugene Lazutkin]

Possible dup of #5083.

[Robert Coup]

Only happens if a node somewhere in the parent chain uses position:relative.

[guest]

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

[Eugene Lazutkin]

#5449 was a dup of this ticket.

[guest]

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.

[Eugene Lazutkin]

(In [12177]) gfx: Switching from absolutely positioned labels to relatively positioned ones. It should eliminate all weird problems with labels positioning. Fixes #5168.

[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]…

[guest]

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]…

[Eugene Lazutkin]

You forgot to mention what version of Dojo you use and how you got it.

[Eugene Lazutkin]

Adding Bill to CC --- he may help with widgets.

[guest]

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

[guest]

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>

[Eugene Lazutkin]

#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.

[Eugene Lazutkin]

Now #5779 is a dup.

[guest]

An example of a simple Bar graph inside a title pane.

[Eugene Lazutkin]

OK. Let me ask one more time before I close this ticket again: did you test it with the current trunk?

[Eugene Lazutkin]

Closing in favor of #6587 as duplicate.