#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 9 years ago by
| Attachment: | Screen Shot 2012-01-06 at 4.18.30 PM.png added |
|---|
comment:1 Changed 9 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 9 years ago by
| Cc: | Patrick Ruzand added |
|---|---|
| Milestone: | tbd → future |
| Priority: | high → normal |
| Status: | new → assigned |
comment:3 Changed 9 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 9 years ago by
comment:6 Changed 9 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:
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.