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 Eugene Lazutkin)

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)

modalwindow.html (1.7 KB) - added by rpambell 10 years ago.
Pie chart rendering problem

Download all attachments as: .zip

Change History (13)

comment:1 Changed 10 years ago by bill

Component: GeneralCharting
Owner: changed from anonymous to Eugene Lazutkin
Priority: highnormal

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?

Changed 10 years ago by rpambell

Attachment: modalwindow.html added

Pie chart rendering problem

comment:2 in reply to:  1 Changed 10 years ago by rpambell

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 bill

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 in reply to:  1 Changed 10 years ago by rpambell

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 Eugene Lazutkin

Description: modified (diff)
Milestone: tbdfuture
Status: newassigned

comment:6 Changed 10 years ago by Eugene Lazutkin

Related: #7394.

comment:7 Changed 9 years ago by dojo_master

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 dojo_master

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 dojo_master

Hi,

Can you please help? Any suggestions are much appreciated.

Thanks much,

dojo_master

comment:10 Changed 9 years ago by Eugene Lazutkin

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 dojo_master

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 dylan

Milestone: future1.12
Resolution: patchwelcome
Status: assignedclosed

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.

Note: See TracTickets for help on using tickets.