Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#14572 closed defect (fixed)

Axis Label overflow bug

Reported by: lampshade9909 Owned by: cjolif
Priority: high Milestone: 1.8
Component: Charting Version: 1.7.1
Keywords: Charting axis label overflow Cc: Patrick Ruzand
Blocked By: Blocking:

Description

With regards to Dojo Line Charting, I'm getting some kind of overflow error. When I have a very large amount of data plotted on a line chart, my X Axis label overflows onto the screen and spams the left edge of the screen... This looks like some kind of a bug, but I can't tell what's causing it. Can you please take a look?

Thank you guys for fixing all the bugs I submit so quickly!

Code:

<!DOCTYPE HTML>
<html lang="en">
	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Chart 2D: dynamics</title>
		<style type="text/css">
			@import "/media/js/dojo/dojo/resources/dojo.css";
		
			.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
			.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
		</style>

		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>  
		
		<script type="text/javascript">
		
		
			// Require the basic 2d chart resource: Chart2D
			dojo.require("dojox.charting.Chart2D");

			// Require the theme of our choosing
			//"Claro", new in Dojo 1.6, will be used
			dojo.require("dojox.charting.themes.Tom");
			
			var makeObjects = function(){
				
				
				// Create the chart within it's "holding" node
				var chart = new dojox.charting.Chart2D("chartNode");

				// Set the theme
				chart.setTheme(dojox.charting.themes.Tom);

				// Add the only/default plot 
				chart.addPlot("default", {
					type: "Lines",
					markers: true
				});
				
				myLabelList = []
				myDataList = []
				for (i = 0; i < 1000; i++)
				{
					// Make all of my labels say "Label" just as a test label...
					myLabelList.push({value: i, text: "label"})
					
					// Make all the data be 10000 just as test data...
					myDataList.push(10000)
				}
			    
				// Add axes
				chart.addAxis("x", { labels: myLabelList });
				chart.addAxis("y", { min: 5000, max: 15000, vertical: true, fixLower: "major", fixUpper: "major" });

				// Add the series of data
				chart.addSeries("Monthly Sales",myDataList);
				
				// Render the chart!
				chart.render();

			
			};
			
			dojo.addOnLoad(makeObjects);
				
		</script>
	
	</head>
	<body class="claro">
		<table>
			
			<tr>
				<h1>Sandbox</h1></br>
			</tr>
			
			<h1>Demo: Monthly Sales</h1>
			
			<div id="chartNode" style="width:800px;height:400px;"></div>
		
	</body>

</html>

Attachments (1)

Screen Shot 2012-01-06 at 4.18.30 PM.png (190.4 KB) - added by lampshade9909 8 years ago.

Download all attachments as: .zip

Change History (7)

Changed 8 years ago by lampshade9909

comment:1 Changed 8 years ago by Adam Peller

Component: DojoxCharting
Owner: changed from Adam Peller to cjolif
Summary: Dojo Charting X Axis Label overflow bugAxis Label overflow bug

comment:2 Changed 8 years ago by cjolif

Cc: Patrick Ruzand added
Milestone: tbdfuture
Priority: highnormal
Status: newassigned

These labels that you see comes from the dojox/gfx/_getTextBox method that does not remove the measuring labels after doing the measure. When you have few labels it does not matter as they are place in -1000px however with tons of them it might overflow in the visible window.

I doubt you will have that many labels on your screen? For example here you are adding labels for minor ticks that are never displayed. In that case the workaround is quite simple, create only the labels you need. For example in your case creating only labels every 100:

for (i = 0; i < 1000; i++){
  // Make all of my labels say "Label" just as a test label...
  if(i%100 == 0){
    myLabelList.push({value: i, text: "label"})
  }
  // Make all the data be 10000 just as test data...
  myDataList.push(10000);
}

Will solve the problem? I guess in you real use-cases there is certainly a similar workaround.

comment:3 in reply to:  2 Changed 8 years ago by lampshade9909

Replying to cjolif:

These labels that you see comes from the dojox/gfx/_getTextBox method that does not remove the measuring labels after doing the measure. When you have few labels it does not matter as they are place in -1000px however with tons of them it might overflow in the visible window.

I doubt you will have that many labels on your screen? For example here you are adding labels for minor ticks that are never displayed. In that case the workaround is quite simple, create only the labels you need. For example in your case creating only labels every 100:

for (i = 0; i < 1000; i++){
  // Make all of my labels say "Label" just as a test label...
  if(i%100 == 0){
    myLabelList.push({value: i, text: "label"})
  }
  // Make all the data be 10000 just as test data...
  myDataList.push(10000);
}

Will solve the problem? I guess in you real use-cases there is certainly a similar workaround.

This work around is doing just fine, thanks a bunch guys! Looks like it's not a bug, just a lack of understanding on my part.

Last edited 8 years ago by lampshade9909 (previous) (diff)

comment:4 Changed 8 years ago by cjolif

comment:5 Changed 8 years ago by cjolif

Resolution: fixed
Status: assignedclosed

In [27936]:

fixes #14572. refs #13180. Workaround label overflow from gfx _getTextBox by puting limit on the # of labels we compute the size for. Also introduce a new flag for dropLabels label size to be re-computed on zoom for cases where this is necessary (and not forcing everyone to recompute if not needed). Also make sure axis minorLabels & majorLabels true/false are correctly taken into account. !strict.

comment:6 Changed 8 years ago by cjolif

Milestone: future1.8
Note: See TracTickets for help on using tickets.