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