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. Image for the cookie policy date
close icon

Remove individual series from series array

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




4 Replies

ZA Zack March 15, 2017 03:15 AM UTC

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.


DD Dharanidharan Dharmasivam Syncfusion Team March 15, 2017 01:19 PM UTC

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. 



ZA Zack March 15, 2017 01:29 PM UTC

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


DD Dharanidharan Dharmasivam Syncfusion Team March 16, 2017 12:50 PM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon