Opened 10 years ago
Closed 4 years ago
#9935 closed defect (patchwelcome)
Pie chart rendering in Modal windows
| Reported by: | rpambell | Owned by: | Eugene Lazutkin |
|---|---|---|---|
| Priority: | high | Milestone: | 1.13 |
| Component: | Charting | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description (last modified by )
The below code does not work properly in IE.
I have an <a> tag which when clicked shows the modal window having a horizontal slider and a pie chart. When the user moves the slider the pie chart should get updated and the new allocation has to be shown indicating the selected value on the slider.
Now this works fine in Firefox but it does not work properly in IE.
Error: The code is failing to render in the update function.
Can someone tell me what is wrong with my code.
<html>
<head>
<link rel="stylesheet" href="../resources/dojo/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="../resources/dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.themes.GreySkies");
dojo.require("dijit.Dialog");
dojo.require("dijit.TitlePane");
var chartTwo;
var seriesData = [1,99];
var legendTwo;
function updateSeries(value){
seriesData[0] = value;
seriesData[1] = 100-value;
chartTwo.updateSeries("Series A", seriesData);
chartTwo.render();
}
dojo.addOnLoad(function() {
var dc = dojox.charting;
chartTwo = new dc.Chart2D("chartTwo");
chartTwo.setTheme(dc.themes.GreySkies).addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
}).addSeries("Series A", seriesData);
chartTwo.render();
});
</script>
</head>
<body class="tundra">
<div>
<h5>Pick your funds</h5>
<p>Copy about how you can choose from the various funds</p>
<div id="guaranteed" dojoType="dijit.TitlePane" title="Guaranteed" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
<div id="equities" dojoType="dijit.TitlePane" title="Equities" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
<div id="realEstate" dojoType="dijit.TitlePane" title="Real Estate" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
<div id="fixedIncome" dojoType="dijit.TitlePane" title="Fixed income" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
<div id="moneyMarket" dojoType="dijit.TitlePane" title="Money Market" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
<div id="multiasset" dojoType="dijit.TitlePane" title="Multi Asset" open="false">
<table>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment1" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment2" />%</td>
</tr>
<tr>
<td>Name of the investment</td>
<td><input type="text" name="investment3" />%</td>
</tr>
</table>
</div>
</div>
<a href="javascript:void(null);dijit.byId('piechart').show()">Show investment mix</a>
<div id="piechart" dojoType="dijit.Dialog" title="Investment mix" style="display: none;">
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider" value="5" minimum="0" maximum="100"
discreteValues="101" intermediateChanges="true" onChange="updateSeries(this.value);"
handleSrc="preciseSliderThumb.png"></div>
<div id="chartTwo" style="width: 300px; height: 300px;"></div>
</div>
</body>
</html>
Attachments (1)
Change History (13)
comment:1 follow-ups: 2 4 Changed 10 years ago by
| Component: | General → Charting |
|---|---|
| Owner: | changed from anonymous to Eugene Lazutkin |
| Priority: | high → normal |
comment:2 Changed 10 years ago by
Replying to bill:
Please attach test cases after filing the ticket using the attach file button. But also, can't you make a smaller test case? You have dozens of TitlePane's in your test which are apparently unrelated to the issue. Is this an issue with displaying charts inside a Dialog? Or does the same chart fail when just appearing on the page in general?
Sorry for not attaching the test case earlier.
I have removed the title panes in the attached code.
Yes the issue is with rendering in the Dialog window, the pie chart renders properly if it is on the page.
comment:3 Changed 10 years ago by
Eugene - haven't looked at this code at all but (assuming it's still failing in trunk) probably it's a problem with the chart initializing while hidden and it can be solved by adding a resize() method to the chart that re-renders. Dialog will call resize() on it's children widgets when they are first shown.
comment:4 Changed 10 years ago by
Replying to bill:
Please attach test cases after filing the ticket using the attach file button. But also, can't you make a smaller test case? You have dozens of TitlePane's in your test which are apparently unrelated to the issue. Is this an issue with displaying charts inside a Dialog? Or does the same chart fail when just appearing on the page in general?
Hi,
I don't know if this helps in resolving the issue, but this code works fine with dojo 1.1.1.
comment:5 Changed 10 years ago by
| Description: | modified (diff) |
|---|---|
| Milestone: | tbd → future |
| Status: | new → assigned |
comment:7 Changed 9 years ago by
Is there a way to fix this in javascript before calling .render() on the chart? I am running in to this issue on Dojo 1.4 and really need a fix for this. Can I fix without having to modify the charting widget directly?
comment:8 Changed 9 years ago by
Without a fix for this, charts cannot be used in Dialogs on IE.
I am just looking for a workaround if there is one. Is there? Do you have a sample modified Chart2D.js with the fix (that will work with 1.4?
Blocking use of charts on dialogs seems like a Blocking issue (unless of course there is a workaround)
comment:9 Changed 9 years ago by
Hi,
Can you please help? Any suggestions are much appreciated.
Thanks much,
dojo_master
comment:10 Changed 9 years ago by
This is a bug related to positioning of VML elements in some children of absolutely or relatively positioned nodes. So far there is no fix for. Patches are welcomed. Feel free to file a bug with Microsoft.
One possible solution is to host a chart in an iframe. Position the chart (inside the iframe) simply, like in tests. This iframe can be positioned with a dialog box or a content pane.
IIRC, a content pane understands iframes natively --- see tests for that.
comment:11 Changed 9 years ago by
The iframe solution works. Thanks very much for the suggestion. Maybe we can link up sometime in the future and discuss dojo for enterprise appications.
comment:12 Changed 4 years ago by
| Milestone: | future → 1.12 |
|---|---|
| Resolution: | → patchwelcome |
| Status: | assigned → closed |
The solution for this is to wrap the Chart inside a dojox/charting/widget/Chart instance. A patch is welcome for a more general solution.
Please attach test cases after filing the ticket using the attach file button. But also, can't you make a smaller test case? You have dozens of TitlePane's in your test which are apparently unrelated to the issue. Is this an issue with displaying charts inside a Dialog? Or does the same chart fail when just appearing on the page in general?