#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)
Change History (7)
Changed 10 years ago by
Attachment: | Screen Shot 2012-01-06 at 4.18.30 PM.png added |
---|
comment:1 Changed 10 years ago by
Component: | Dojox → Charting |
---|---|
Owner: | changed from Adam Peller to cjolif |
Summary: | Dojo Charting X Axis Label overflow bug → Axis Label overflow bug |
comment:2 follow-up: 3 Changed 10 years ago by
Cc: | Patrick Ruzand added |
---|---|
Milestone: | tbd → future |
Priority: | high → normal |
Status: | new → assigned |
comment:3 Changed 10 years ago by
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!
comment:4 Changed 10 years ago by
comment:6 Changed 10 years ago by
Milestone: | future → 1.8 |
---|
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:
Will solve the problem? I guess in you real use-cases there is certainly a similar workaround.