 | Steema Issues DatabaseNote: This database is for bugs and wishes only. For technical support help, if you are a customer please visit our online forums;otherwise you can use StackOverflow. Before using this bug-tracker we recommend a look at this document, Steema Bug Fixing Policy. |
Bug 686
| Summary: | When adding axes on the right side, there is not enough space preserved for the axis name | ||
|---|---|---|---|
| Product: | HTML5 JavaScript TeeChart | Reporter: | Alexander Cosman <alexander.cosman> |
| Component: | Axes | Assignee: | Steema Issue Manager <issuemanager> |
| Status: | RESOLVED FIXED | ||
| Severity: | major | CC: | marc, sandra |
| Priority: | High | ||
| Version: | unspecified | ||
| Target Milestone: | --- | ||
| Hardware: | All | ||
| OS: | All | ||
| Chart Series: | --- | Delphi / C++ Builder RAD IDE Version: | |
| Attachments: | Chart with right axes partially visible | ||
The code below reproduce the problem:
function draw() {
// Create a Chart1 using canvas1:
Chart1=new Tee.Chart("canvas1");
// Add four line series, with 200 random points each:
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
// Create additional axes:
var axis1=Chart1.axes.left;
var axis2=Chart1.axes.add(false,false);
var axis3= Chart1.axes.add(false,true);
var axis4=Chart1.axes.add(false,true);
// Setup axis positions as % percent:
axis1.start= 0; axis1.end=50;
axis2.start=50; axis2.end=100;
axis3.start=0; axis3.end=50;
axis4.start=50; axis4.end=100;
//Add Title
axis1.title.text="Axis 1";
axis2.title.text="Axis 2";
axis3.title.text="Axis 3";
axis4.title.text="Axis 4";
axis1.title.rotation = 90;
axis2.title.rotation=90;
axis3.title.rotation = 90;
axis4.title.rotation = 90;
// Set series with axes:
Chart1.series.items[0].vertAxis=axis1;
Chart1.series.items[1].vertAxis=axis2;
Chart1.series.items[2].vertAxis=axis3;
Chart1.series.items[3].vertAxis=axis4;
Chart1.legend.visible= false;
// Draw
Chart1.draw();
}
Recommend use of standard chart axes before adding custom axes. Axis calculations will then size correctly.
eg.
var Chart1;
function draw() {
// Create a Chart1 using canvas1:
Chart1 = new Tee.Chart("canvas");
// Add four line series, with 200 random points each:
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
Chart1.addSeries(new Tee.Line()).addRandom(200);
// Create additional axes:
var axis1 = Chart1.axes.left;
var axis2 = Chart1.axes.add(false, false);
//var axis3 = Chart1.axes.add(false, true);
var axis4 = Chart1.axes.add(false, true);
var axis5 = Chart1.axes.right;
// Setup axis positions as % percent:
axis1.start = 0; axis1.end = 50;
axis2.start = 50; axis2.end = 100;
//axis3.start = 0; axis3.end = 50;
axis5.start = 0; axis5.end = 50;
axis4.start = 50; axis4.end = 100;
//Add Title
axis1.title.text = "Axis 1";
axis2.title.text = "Axis 2";
//axis3.title.text = "Axis 3";
axis5.title.text = "Axis 5";
axis4.title.text = "Axis 4";
axis1.title.rotation = 90;
axis2.title.rotation = 90;
//axis3.title.rotation = 90;
axis5.title.rotation = 90;
axis4.title.rotation = 90;
// Set series with axes:
Chart1.series.items[0].vertAxis = axis1;
Chart1.series.items[1].vertAxis = axis2;
//Chart1.series.items[2].vertAxis = axis3;
Chart1.series.items[2].vertAxis = axis5;
Chart1.series.items[3].vertAxis = axis4;
Chart1.legend.visible = false;
// Draw
Chart1.draw();
}
TeeChart internal code change. Fixed for inclusion in next update. |
Created attachment 143 [details] Chart with right axes partially visible The custom axes on the right side of the chart are not displayed correctly, because there is not enough space for the axis name. Example: I create a canvas with width=1656 and height=739. I create a chart and add some custom axes and then I draw the chart (see attachment) You can see that there is not enough space for the axes names (on the right side) When I mannually set the bounds of the charts to chart.bounds.width=1600 and chart.bounds.height=700 before executing chart.draw(), then I see that everything is drawn (so the axis name is visible).