display multiple axes and paginated Chart

[Christophe Giordano]

Hello,

I'm using EJ2 angular library And I have two questions

1)  I tried by many ways to display multiples axes like the documentation describes it.

     I was not able to display an axis on opposite site on Y and link it to a serie.

     How can I display multiples Axes please ? Please find below the code I used

2) I tried to handle paginated Chart with a scroll bar , I did that by using ZoomFactor and ZoomPosition properties, it appears to display correctly on load and when I Pan the chart , But when I scroll using the scrollbar I have more elements I supposed to have. So i need to redefine the zoom factor after a scroll.

Is there a event after a scrollbar and before onLoaded (because it seems to not apply the zoomFactor change here) where I can redefine the Zoom Factor please ?

Please find attached 2 screenshots (one after onLoaded and one after a scroll)

Thank you 

Christophe

<ejs-chart *ngFor="let chart of widgetModel?.ejCharts"

[primaryXAxis]="chart.primaryXAxis"

[primaryYAxis]="chart.primaryYAxis"

width="100%" height="100%"

[theme]="theme">

<e-axes>

<e-axis rowIndex=0

[name]='yAxis1'

[opposedPosition]="true"

[title]="title"

[majorGridLines]="{ width : 1 }"

labelFormat="{value}°C"

[minimum]="0"

[maximum]=""3"

[interval]='1'>

</e-axis>

</e-axes>

<e-series-collection>

<e-series *ngFor="let serie of chart.series"

[dataSource]="serie.points"

[xName]="serie.xName"

[yName]="serie.yName"

[name]="serie.name"

[type]="serie.type"

[animation]="{ enable: serie.enableAnimation }"

[fill]="serie.fill"

[yAxisName]="yAxis1"

>

</e-series>

</e-series-collection>

</ejs-chart>

Attachment: screenshots_be7b9294.zip

[Dharanidharan Dharmasivam]

Hi Christophe, 

We have analyzed your queries with the provided code snippet. Kindly find the responses for your queries from below. 

Query	Response
How can I display multiples Axes	From the provided code snippet we found that, you have assigned the yAxisName property as [yAxisName] = “yAxis1” in series and in the axes property assigned name as [name]=’yAxis1’. But in the component file(.ts file), if you haven’t assigned any values, then null values will be considered, so the chart will not rendered.   We have prepared a sample based on your code snippet, here using the ngFor, we have created the series and placed all the series with respect to secondary y axis as like in the below screenshot. Find the code snippet to achieve this requirement.  Angular:  <ejs-chart [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>             <e-axes>                  <e-axis rowIndex=0                          name='yAxis1'                                            [opposedPosition]="true"                          [title]="title"                          [majorGridLines]="{ width : 1 }"                          labelFormat="{value}°C"                                                                           [minimum]="0"                          [maximum]="3"                          [interval]='1'  >                  </e-axis>              </e-axes>               <e-series-collection>                  <e-series *ngFor="let series of chartSeries" [dataSource]='series.dataSource' yAxisName='yAxis1' [type]='series.type' [xName]='series.xName' [yName]='series.yName' > </e-series>                                </e-series-collection>          </ejs-chart>  Screenshot:    Sample for your reference can be find from below link.  https://stackblitz.com/edit/angular-kxg2lh?file=src/app/app.component.html
Is there a event after a scrollbar and before onLoaded (because it seems to not apply the zoomFactor change here) where I can redefine the Zoom Factor please ?	As of now, there is no event for changing the zoom factor after the scrollbar moved and we tried to achieve your scenario as workaround. Unfortunately, there is no possible workarounds for your scenario, so we have logged improvement task to provide an event after the scrollbar moved, which will be available in vol 3 2018 main release and is expected to be out at the middle of September, 2018.

Thanks, 

Dharani. 

[Christophe Giordano]

Hello Dharani,

thank you very much for your answers, I was able to fix my configuration and the multiples axes are working well.

Concerning the event after scrolled, actually my main purpose was to reproduce the same behavior as in JS1 with the enableScrollbar property and get the indexed value in event to be able to request data with indexed values.

Please can you confirm we will be able to do this with the new event available in September please ?

Thank you

Christophe

[Dharanidharan Dharmasivam]

Hi Christophe, 

 

We are happy to hear that the provided solution has resolved your issue. And regarding scrolled event, we are not clear with your exact requirement. So, we would like to know what do you have mean from the context “get the indexed value in event to be able to request data with indexed values”. Do you need to have current or previous points length? 

 

In EJ1, we can able to get the following arguments from the scrollEnd event, 

 

• Zoom Factor
• Zoom Position
• Current axis
• Start and end ranges (Current and previous).

 

Kindly provide us more information on your exact requirement or what are the arguments do you need to have other than the above arguments, this will be much helpful in our development phase. 

 

Thanks, 

Dharani. 

[Christophe Giordano]

thank you for your precision about the ScrollEnd event Dharani,

actually I need exactly the same as in EJ1 event.

• Zoom Factor
• Zoom Position
• Current axis
• Start and end ranges (Current and previous).

So if i get start and end ranges in this event , it will be what I need to request data to have a paginated Chart.

thank you 

Christophe

[Dharanidharan Dharmasivam]

Hi Christophe, 

 

Thanks for the provided information. We will consider your requirements and will be included in the event for scrollbar. 

 

Thanks, 

Dharani.