We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Remove individual series from series array

Thread ID:

Created:

Updated:

Platform:

Replies:

129370 Mar 14,2017 04:00 PM Mar 16,2017 08:50 AM Angular 4
loading
Tags: ejChart
Zack
Asked On March 14, 2017 04:00 PM

So I'm using a polar chart and it works great except if the user sets something where the series decreases in categories. e.g.

Series = [
    {
      points: [{x: 'Calving', y: null}]
    },
    {
      points: [{x: 'Wellness', y: null}]
    },
    {
      points: [{x: 'Type', y: null}]
    }
]

Series = [
    {
      points: [{x: 'Wellness', y: null}]
    },
    {
      points: [{x: 'Type', y: null}]
    }
]

I get an error saying that "Cannot read property 'dataSource' of undefined". I'm relatively sure it's iterating over the old array to look for changes, only problem being the array is now smaller. 

Html looks like this 

      <ej-chart #chart *ngIf="chartData.length > 0" 
                [series]="chartData" 
                class="polar-chart" 
                [primaryXAxis]="primaryXAxis" 
                [commonSeriesOptions]="commonSeriesOptions"
                [primaryYAxis]="primaryYAxis"></ej-chart>

Then after some manipulation of chartData I call this.chart.widget.redraw();

Works great with new points and with changes to existing points, reducing points seems to be the issue




Zack
Replied On March 14, 2017 11:15 PM

It's not points I need to remove! I need to be able to decrease the length of the series array. I've changed the model using splice but that doesn't seem to work.

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 15, 2017 09:19 AM

Hi Zack, 

Thanks for contacting Syncfusion support.  

We have analyzed your query. We have achieved your requirement of removing series in a button click. In this we have five series initially, you need to specify the series index value in the text box and click on remove series button, then the specified series will be removed from the chart. Find the code snippet below. 

Angular 2: 

<button  (click)="removeSeries()">Remove Series</button> 
removeSeries() { 
        let seriesIndex = parseInt($('#selection')[0]['value']); 
        let chartObj = this.Chart.widget; 
        chartObj.model.series.splice(seriesIndex, 1) 
        chartObj.redraw(); 
    } 

Screenshot before removing series: 
 

Screenshot after removing 2nd series: 
 

Sample for reference can be find from the below link: 
 
Thanks, 
Dharani. 


Zack
Replied On March 15, 2017 09:29 AM

That worked! I was trying to do the same thing but with just the model 

What's the difference between the two 

 this.Chart.widget.model.series

 this.Chart.model.series

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 16, 2017 08:50 AM

Hi Zack, 

Thanks for your revert. 

this.Chart.model will be created before the component is loaded and it hold all the default values of the control. And this.Chart.widget.model will be created after the component is loaded and it holds the instance of chart. 

Thus changing the value in this.Chart.model will not take any effect on chart. Since this.Chart.widget.model holds the chart instance, changing the value of the properties in it, will make effect on the rendered chart.  

So, kindly use this.Chart.widget.model to redraw the chart component. 

Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;