Page 1 of 1
Multiply left axes
Posted: Tue Jul 21, 2015 6:50 am
by 17766258
I try to use multiply left axes. an axis for each series.
I look at the demo demos/axes/multiple_axes.htm and change all start end to 0-100
I want to be able to decide what axis will be visible on the left labels.
If I make only one axis visible, only the series for this axis is visible and this is not working for me.
Is there a way I can select the axis that will show the lables on the left and still show all serieses on the chart?
Thanks
Amos
Re: Multiply left axes
Posted: Tue Jul 21, 2015 8:20 am
by yeray
Hello Amos,
In general, an axis (and the labels on it) is only drawn when it has at least one series with some visible point associated to it.
If I understand you correctly, you want to have a number of vertical axes, but only one of them visible at a time. And all your series always visible.
To do this, you just need to keep all your series assigned to the axis to be shown. Ie:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<!--[if lt IE 9]>
<script src="../src/excanvas/excanvas_text.js"></script>
<script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="../src/teechart.js" type="text/javascript"></script>
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("canvas1");
for (var i=0; i<4; i++) {
Chart1.addSeries(new Tee.Line()).addRandom();
}
var axis1=Chart1.axes.left;
var axis2=Chart1.axes.add(false,false);
var axis3=Chart1.axes.add(false,false);
var axis4=Chart1.axes.add(false,false);
axis1.format.stroke.fill="red";
axis1.labels.format.font.fill="red";
axis1.title.text="axis1";
axis1.title.format.font.fill="red";
axis2.format.stroke.fill="green";
axis2.labels.format.font.fill="green";
axis2.title.text="axis2";
axis2.title.format.font.fill="green";
Chart1.panel.margins.left=0;
Chart1.draw();
}
function changeAxis(numAxis) {
var a, m;
if (numAxis=="0") {
a=Chart1.axes.left;
m=0;
}
else {
a=Chart1.axes.items[parseInt(numAxis)+3];
m=11;
}
for (var i=0; i<Chart1.series.count(); i++) {
Chart1.series.items[i].vertAxis = a;
}
Chart1.panel.margins.left=m;
Chart1.draw();
}
</script>
</head>
<body onload="draw()">
<br>
<div style="float:left">
<select id="axis_num" onchange="changeAxis(value)">
<option value="0">axis1</option>
<option value="1">axis2</option>
<option value="2">axis3</option>
<option value="3">axis4</option>
</select>
</div>
<center>
<canvas id="canvas1" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
<br>
</body>
</html>
Re: Multiply left axes
Posted: Tue Jul 21, 2015 9:45 am
by 17766258
Hi,
thanks for you answer.
What I wanted to do is to show on the chart each series using its own left axis, but to display only one axis.
if i have 2 series, one values range are 100-200 and the other values range is 1000-2000, when i show then on same chart they are far from each other, I want to be able to set min,max for each series and show them close together on same chart.
I could do it when adding left axis for each series, but the problem that the labels are for all axes and are over each other.
can I show only labels fro one axes?
Thanks
Amos
Re: Multiply left axes
Posted: Tue Jul 21, 2015 1:54 pm
by yeray
Hello Amos,
That's easier. You can create an axis for each series and hide the labels, grid, ticks for all the axes, except for one. Ie:
Code: Select all
Chart1=new Tee.Chart("canvas1");
for (var i=0; i<2; i++) {
Chart1.addSeries(new Tee.Line()).addRandom();
}
var axis1=Chart1.axes.left;
var axis2=Chart1.axes.add(false,false);
Chart1.series.items[1].vertAxis=axis2;
axis2.labels.visible=false;
axis2.grid.visible=false;
axis2.ticks.visible=false;
Re: Multiply left axes
Posted: Wed Jul 22, 2015 12:12 pm
by 17766258
Thanks,
That is working for me.
Why the width of the labels is different if i use other axis.
How can I make the width constant for all left axes that I display?
Thanks
Amos
Re: Multiply left axes
Posted: Wed Jul 22, 2015 3:35 pm
by yeray
Hi Amos,
samos wrote:Why the width of the labels is different if i use other axis.
The labels width isn't considered when adjusting the chartRect for custom axes, at Axis.adjustRect function.
samos wrote:How can I make the width constant for all left axes that I display?
You could set your "custom" axes to be custom=false and their labels will also be considered.
Just keep in mind that Axis.adjustRect function was designed to only have one vertical and one horizontal not-custom visible axes.
Re: Multiply left axes
Posted: Thu Jul 23, 2015 6:02 am
by 17766258
Hi,
Thanks for your answer.
is there a way I can make the left axis width fixed. Setting it to specific pixels size.
I need it because I have 3 charts, and i want them to have the same x values (DateTime).
So I need the charts to be exactly the same width, and it is not working like that for different values.
Thanks
Amos
Re: Multiply left axes
Posted: Thu Jul 23, 2015 9:22 am
by yeray
Hi Amos,
Look a the Axes/Synchronize example in the
demo. Direct link to that example
here.
Re: Multiply left axes
Posted: Thu Jul 23, 2015 11:16 am
by 17766258
thanks