Selection is lost after calling widget.redraw() on ej-chart

[Peter Horak]

Hello,

we are using the following HTML to display a chart

  <ej-chart size.width="960px"

                      id="chartcontainer"

                      #chartcontainer

                      [enableCanvasRendering]="true"

                      (seriesRegionClick)="chartSeriesSelected($event)">

                <e-seriescollection>

                    <e-series type="column"

                              [marker.dataLabel.visible]="true"

                              fill="#E94649"

                              [enableAnimation]="true"

                              [selectionSettings]="{ enable:'true', mode: 'point',     pattern:'chessboard' }"

                              [dataSource]="source"

                              xName="x"

                              yName="y">

                    </e-series>

                </e-seriescollection>

            </ej-chart> 

The chart renders as expected and we are able to select individual elements of the series.

Depending on the selection we re-calculate values to visualize a percentaged comparision. To update the chart we are using the method this.chart.widget.redraw() which is working as well.

Our problem is that the selection is lost after calling redraw and we found no way to „re-select“ the specific element. As we want to export the calculated values as an image it is important to us that the selection is still visible. Otherwise it is not obvious on which basis the calculation was done.

Is there any way to keep the selection or to set the selection via code?

Thanks for your help.

[Dharanidharan Dharmasivam]

Hi Peter, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Find the response for your queries below. 

Query	Response
Our problem is that the selection is lost after calling redraw and we found no way to „re-select“ the specific element	We have tried to replicate the reported scenario with respect to your code snippet, but chart maintains the selection state on redraw. To ensure this we have created a sample, in which on button click we have changed the fill color of the series and call the redraw method. Sample used for testing can be find from bellow link.  http://www.syncfusion.com/downloads/support/forum/130929/ze/customSample1680779116     Code snippet:  Angular 2:  Html:  <button (click)="emptyChart()">Update Chart</button>  TS:  emptyChart() {                    let chartObj = $("#container").ejChart("instance");          chartObj.model.series[0].fill = "cyan";          chartObj.redraw();      }  Screenshot before redraw:    Screenshot after redraw:    We would also like to let you know that from version 13.4.0.53, this selection is working properly (maintain the state on redraw). Since we are not aware of your exact scenario on which the issue is reproduced, we would like to let you know the following details, which will be helpful in further analysis and provide you the solution sooner.  ·       Modify the attached sample or provide your sample with replication steps.  ·       Current version of Essential Studio you are using.  ·       Browser with version in which the issue is reproduced.  ·       Do you have used any CSS for chart series.
As we want to export the calculated values as an image it is important to us that the selection is still visible	Currently we don’t have support exporting chart with the another element, so we have already logged feature request for this requirement and this will be available in any of our upcoming release. And also we have created branch incident under your account, for further updates on this query, kindly follow up with the branch incident.

  

  

Thanks, 

Dharani. 

[Peter Horak]

Hello Dharani,

thanks for your reply.

Based on your code I found out the reason why our chart lost the selection after calling redraw().

The selection is kept when the selectionSettings are bound from the component. 

As soon as I set the selectionsSettings directly in HTML, the selection gets lost with calling redraw().

Maybe this has something to do with the click-eventhandler (seriesRegionClick)="chartSeriesSelected($event)" ?

So 

 <ej-chart size.width="960px"

                      id="chartcontainer"

                      #chartcontainer

                      [enableCanvasRendering]="true"

                      (seriesRegionClick)="chartSeriesSelected($event)">

                <e-seriescollection>

                    <e-series type="column"

                              [marker.dataLabel.visible]="true"

                              fill="#E94649"

                              [enableAnimation]="true"

                              [selectionSettings]="selection"

                              [dataSource]="entgeltTypWertList"

                              xName="entgeltgruppeName"

                              yName="wert">

                    </e-series>

                </e-seriescollection>

            </ej-chart>

is working with this code in the component contructor:  this.selection = { enable: true, mode: 'point', pattern: 'chessboard' };

Exporting the chart as png is working as long as we don't select anything. 

With the selection enabled the export isn't working anymore as you said.

[Dharanidharan Dharmasivam]

Hi Peter, 

Sorry for the inconvenience.  

We can able to reproduce the reported issue and logged issue report for the reported scenario. We have created branch incident for the issue under your account for better follow up. Kindly follow up with the branch incident for further details regarding the issue. 

  

Thanks, 

Dharani.