topic Dojo charting issue in ArcGIS JavaScript Maps SDK Questions

Dojo charting issue

SamirGambhir — Tue, 15 May 2012 13:22:16 GMT

Hi,
I have created a bar chart using dojo charting. I have specified the size of my div which holds the chart, but the chart shows up much bigger and is outside the div container. JS Console shows that the size of SVG graphic inside the div has different dimensions. I am unable to find how to control the dimensions of this SVG graphic. Does anyone know a solution to this?
Here is part of the code relevant to this issue:
HTML:
...
<div data-dojo-type="dijit.form.Form" id="chartForm" name="chartForm">
          <table width="100%" id="chartPanelTab">
            <tr>
              <td height="20px"><p class="Select">Population Pyramid:</p></td>
              <td height="20px" align="right" width="20px"><img src="Images/Close.gif" width="20px" align="right" onclick="hide('chartForm');" /></td>
            </tr>
          </table>
          <div id="pyramidChart"></div>
        </div>
...

CSS:
...
#chartForm{
width: 210px; height: 200px; position: absolute; right:18px; top: 320px; z-index: 50;border-style:solid; border-width:2px; border-color:white; background-color:#505050; opacity:0.9; box-shadow:1px 1px 10px black; padding-bottom: 5px;display:none;
}
#pyramidChart {
width: 200px; height: 150px; position: relative; left:5px; top:5px;background-color:white;
}
...

JS:
dojo.require(......)
...
makeChart = function(){
   var c = new dojox.charting.Chart2D("pyramidChart", {title: "All India", titlePos: "top", titleGap: 25, titleFont: "normal normal normal 11pt Calibri", titleFontColor: "black" });
c.addPlot("default", {type: "Bars", tension:3})
      .addAxis("x", {fixLower: "minor", fixUpper: "minor"})
      .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0})
      .addSeries("Series A", [-57119612, -66734833, -65632877, -53939991, -46321150, -41557546, -37361916, -36038727, -29878715, -24867886, -19851608, -13583022, -13586347, -9472103, -7527688, -3263209, -3918980], {stroke:{color:"grey", width:0.5}, fill:"red"})
      .addSeries("Series B", [53327552, 61581957, 59213981, 46275899, 43442982, 41864847, 36912128, 34535358, 25859582, 22541090, 16735951, 14070325, 13930432, 10334852, 7180956, 3288016, 4119738], {stroke:{color:"grey", width:0.5}, fill:"blue"})
      .render();
};
...
function init(){
...
}
...
function viewindicator(){
...
show("chartForm");
...
}
...
dojo.addOnLoad(makeChart);
dojo.addOnLoad(init);

JS Console:
...
<div id="pyramidChart">
...
<svg width="400" height="300">_</svg>
</div>
...

Re: Dojo charting issue

DerekMiller — Thu, 03 Jan 2013 20:58:17 GMT

Hi Samir,

I'm experiencing a very similar issue. The chart width property holds in Firefox and IE, but not Chrome. Did you find a solution to this?

Thanks.

- d

Re: Dojo charting issue

SamirGambhir — Fri, 04 Jan 2013 00:51:35 GMT

Hi Samir,

I'm experiencing a very similar issue. The chart width property holds in Firefox and IE, but not Chrome. Did you find a solution to this?

Thanks.

- d

Hi Derek,
While I posted my question on the forum, my manager decided to do away with the chart div in the application. So I did not have to look for a solution to this issue, though it'll be good to know.
Sorry for not being of much help.
Samir

Re: Dojo charting issue

simoxu — Mon, 16 Dec 2013 03:09:47 GMT

Hi Samir,

I'm experiencing a very similar issue. The chart width property holds in Firefox and IE, but not Chrome. Did you find a solution to this?

Thanks.

- d

I am having the same issue, I found it's the "display:none" property in the CSS that is causing the problem. if you set "display:none", dojo chart can't work out the dimension of the container and it will use a default size "400X300".

I haven't completely solved the problem, although it seems I'v found the reason. because I need the display property to be set "none".

Hope this helps in some way.

Re: Dojo charting issue

DerekMiller — Mon, 16 Dec 2013 22:18:33 GMT

I am having the same issue, I found it's the "display:none" property in the CSS that is causing the problem. if you set "display:none", dojo chart can't work out the dimension of the container and it will use a default size "400X300".

I haven't completely solved the problem, although it seems I'v found the reason. because I need the display property to be set "none".

Hope this helps in some way.

That's good to know. I ended up building a dynamic graphic and ditching the dojo chart. Thanks for the reply, though. I'll keep that in mind the next time I need something similar.

Thanks,

- d