Multiply left axes

samos · Post by **samos** » Tue Jul 21, 2015 6:50 am

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

Post by **Yeray** » Tue Jul 21, 2015 8:20 am

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>

samos · Post by **samos** » Tue Jul 21, 2015 9:45 am

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

Post by **Yeray** » Tue Jul 21, 2015 1:54 pm

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;

samos · Post by **samos** » Wed Jul 22, 2015 12:12 pm

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

Post by **Yeray** » Wed Jul 22, 2015 3:35 pm

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.

samos · Post by **samos** » Thu Jul 23, 2015 6:02 am

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

Post by **Yeray** » Thu Jul 23, 2015 9:22 am

Hi Amos,

Look a the Axes/Synchronize example in the demo. Direct link to that example here.

samos · Post by **samos** » Thu Jul 23, 2015 11:16 am

thanks

Multiply left axes

Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

Re: Multiply left axes

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy