Opened 7 years ago

Closed 7 years ago

#14605 closed defect (invalid)

Multiple Pie Charts not Rendering Properly

Reported by: Rohit Salecha Owned by: Eugene Lazutkin
Priority: high Milestone: tbd
Component: Charting Version: 1.5
Keywords: charts, pie Cc:
Blocked By: Blocking:

Description

This is my code , attaching an image displaying the issue.

		<ul style="display: inline-block;">
				<li>			
				    <div id="chartOne" ></div>
				    <div id="legendOne"></div>
				</li>
				<li>			
				    <div id="chartTwo" ></div>
				    <div id="legendTwo"></div>
				</li>
				<li>			
				    <div id="chartThree"></div>
				    <div id="legendThree"></div>
				</li>
				<li>			
				    <div id="chartFour"></div>
				    <div id="legendFour"></div>
				</li>
			</ul>

Attachments (2)

issue.jpg (69.0 KB) - added by Rohit Salecha 7 years ago.
Issue
issueUI.jpg (53.5 KB) - added by Rohit Salecha 7 years ago.

Download all attachments as: .zip

Change History (9)

Changed 7 years ago by Rohit Salecha

Attachment: issue.jpg added

Issue

comment:1 Changed 7 years ago by bill

Component: DojoxCharting
Owner: changed from Adam Peller to Eugene Lazutkin

comment:2 Changed 7 years ago by Adam Peller

Milestone: 1.5.3tbd
Priority: highestnormal
severity: blockernormal

please attach a complete test case, test on the latest release, and describe the results.

Changed 7 years ago by Rohit Salecha

Attachment: issueUI.jpg added

comment:3 Changed 7 years ago by Rohit Salecha

I am creating an APP in Spring Roo version 1.4. Its using Dojo 1.5

Here is my entire Code including the Javascript that i have written

			    <div id="chartOne" ></div>
			    <div id="legendOne"></div>


			    <div id="chartTwo" ></div>
			    <div id="legendTwo"></div>


	<script type="text/javascript">
			dojo.require("dojox.charting.Chart2D");
			dojo.require("dojox.charting.plot2d.Pie");
			dojo.require("dojox.charting.action2d.Highlight");
			dojo.require("dojox.charting.action2d.MoveSlice");
			dojo.require("dojox.charting.action2d.Tooltip");
			dojo.require("dojox.charting.themes.MiamiNice");
			dojo.require("dojox.charting.widget.Legend");
			dojo.require("dojo.data.ItemFileWriteStore");

			dojo.ready(function(){
				/*makeChart("homemenus/getPieChart","chartTwo","errorChart","legendTwo")	;*/
				//makeChart("homemenus/getPieChart1","chartThree","errorChart1","legendThree")	;
				
				resourceURL="uis/getPieChart1" ;
				chartDiv="chartOne";
				legendDiv="legendOne" ;
				
				var underlay = new dijit.DialogUnderlay({'class': 'loading'});
				
					underlay.show();
					dojo.xhrPost({
							url: resourceURL,
							handleAs: "json",
							load: function(response, ioargs) {
								underlay.hide();			
								handleResponse(response);
							},
							error:function(response, ioargs){
								underlay.hide();
								console.log("Inside Handle Error");
								//dojo.byId(eval(chartDiv)).style.display='none';
								//dojo.byId(errorDiv).innerHTML="Some Error Occured Please Try Again After Some Time" ;
							}
												
					});
			
				function handleResponse(response){	
					console.log("Inside Handle Response");
					var dc1 = dojox.charting;
					  var chart1 = new dc1.Chart2D(chartDiv);
					  chart1.setTheme(dc1.themes.MiamiNice)
					     .addPlot("default", {
					        type: "Pie",
					        labels: true,
					        radius : 80,
					        labelOffset : -13,
					        markers :true ,
					        font: "normal normal 10pt Verdana"
						 }).addSeries("Series B",response);

					  var anim_a1 = new dc1.action2d.MoveSlice(chart1, "default");
					  var anim_b1 = new dc1.action2d.Highlight(chart1, "default");
					  var anim_c1 = new dc1.action2d.Tooltip(chart1, "default");

					  chart1.render() ;
					  
					  var legend1= new dojox.charting.widget.Legend({chart: chart1,horizontal:true},legendDiv);
					  
					}

			});
	
			dojo.ready(function(){
				
				
				resourceURL="uis/getPieChart1" ;
				chartDiv="chartTwo";
				legendDiv="legendTwo" ;
				
				var underlay = new dijit.DialogUnderlay({'class': 'loading'});
				
					underlay.show();
					dojo.xhrPost({
							url: resourceURL,
							handleAs: "json",
							load: function(response, ioargs) {
								underlay.hide();			
								handleResponse(response);
							},
							error:function(response, ioargs){
								underlay.hide();
								console.log("Inside Handle Error");
								
							
					}
												
					});
			
				function handleResponse(response){	
					console.log("Inside Handle Response");
					var dc2 = dojox.charting;
					  var chart2 = new dc2.Chart2D(chartDiv);
					  chart2.setTheme(dc2.themes.MiamiNice)
					     .addPlot("default", {
					        type: "Pie",
					        labels: true,
					        radius : 80,
					        labelOffset : -13,
					        markers :true ,
					        font: "normal normal 10pt Verdana"
						 }).addSeries("Series B",response);

					  var anim_a2 = new dc2.action2d.MoveSlice(chart2, "default");
					  var anim_b2 = new dc2.action2d.Highlight(chart2, "default");
					  var anim_c2 = new dc2.action2d.Tooltip(chart2, "default");
					 
					  chart2.render() ;
					  
					  var legend2= new dojox.charting.widget.Legend({chart: chart2,horizontal:true},legendDiv);
					  
					}

			});
			
	</script>



The Code is working very well. You can actually put it any html/jsp file and run it.

The issue is highlighted in the attached image . Both the Charts are rendering properly , but the labels are getting over lapped.

When i opened firebug in html mode , What really happens is this

			    <div id="chartOne" >
			         <div id="legendOne">
			            <div id="chartTwo" >
			               <div id="legendTwo">
                                       </div>
                                     </div>
                                   </div>
                              </div>

I hope you can recongnise whats happening. All the above Divs were separately declared, but Dojo internally is doing something which makes these Divs Wrap inside each other.

Also Firebug Gives this Error.

Error: Tried to register widget with id==legendTwo but that id is already registered http://localhost:8086/TestUI/resources/dojo/dojo.js;jsessionid=7907665A265BBD8D04F304EEABD1938A Line 14

Error: Tried to register widget with id==legendTwo but that id is already registered http://localhost:8086/TestUI/resources/dojo/dojo.js;jsessionid=7907665A265BBD8D04F304EEABD1938A Line 14

Where as i have defined two different Variables. If you need any other information which would enable you to solve this more quickly , do write in a comment. I shall reply with it promptly.

I have Also attached a war file which you just need to deploy in Tomcat without any configuration.

comment:4 Changed 7 years ago by Rohit Salecha

I Tried to attach the war but its not getting attached. If you have any email or something i shall mail it to you. Thanks :)

comment:5 Changed 7 years ago by Adam Peller

Thank you for the additional information. Standalone HTML file test cases are strongly preferred, but the error message should be helpful to the charting folks.

comment:6 Changed 7 years ago by Rohit Salecha

Hi the Issue has been resolved. Actually the problem was with my rendering engine , .jspx i went ahead and used the same code in .jsp file and it worked !

comment:7 Changed 7 years ago by Adam Peller

Resolution: invalid
Status: newclosed
Note: See TracTickets for help on using tickets.