soumyasankarduttagit
commented
4 years ago Yes, we checked it internally, however, there is a known issue with Spline area chart type when the data is getting updated through setJSONData API method.
As of now, the probable workaround could be to implement "area2d" chart type if smoothed area visualization is not the essential requirement.
My project is angular 8 and I am using splinearea type of chart. There is select to set time period and when value is changed it will make api call using http client. After success of call it will update chart data. At that time I am getting above error. Follow is code for api call and chart initialized event. `getMetrics(params: string = '') { const url = params ? 'https://test.parking-rewards.com/metrics?includeDropdownInfo=true' + params : 'https://test.parking-rewards.com/metrics?includeDropdownInfo=true'; const headers = { headers: new HttpHeaders().set('AccessToken', '5e54089c21fad61758ce1326') }; this.http.get(url, headers).subscribe((res: any) => { console.log('get metrics: ', res); this.isLoading = false; this.adAccounts = res.adAccounts; this.campaigns = res.campaigns; this.adGroups = res.adGroups; this.timePeriods = res.timePeriods; this.selectTimePeriod = this.selectTimePeriod ? this.selectTimePeriod : this.timePeriods[0].value; this.impressions = res.impressions; if (this.impressionsChart) { console.error('EEE impressions chart: ', this.impressions); this.setChartData(); } else { console.error('EEE impressions chart: ', this.impressions); } this.totalImpressions = res.totalImpressions; this.clicks = res.clicks; this.totalClicks = res.totalClicks; this.spend = res.spend; this.totalSpend = res.totalSpend this.ctr = res.ctr; this.totalCTR = res.totalCTR; this.standard = 'Impressions'; this.comparings = ['Clicks', 'Spend', 'CTR']; this.selectedMetric = ''; this.msSplineData.chart.paletteColors = [this.COLORS[0]]; const item = { category: [] }; const data = { seriesname: 'Impressions', data: [] } this.impressions.map((i: any) => { item.category.push({label: i.label}); data.data.push({value: i.value}) }); this.msSplineData.categories = []; this.msSplineData.categories.push(item); this.msSplineData.dataset = []; this.msSplineData.dataset.push(data); }, (err) => { console.error('get metrics error: ', err); this.isLoading = false; }) }
initialized(ev: any) { console.log('initialized') this.impressionsChart = ev.chart; this.setChartData(); } setChartData() { const tmp = this.getSplineAreaSource(this.COLORS[0], this.impressions); this.impressionsChart.setJSONData(tmp); this.cdr.detectChanges(); }`
Every call api will be returned different length data. Probably length is 90, 7 or 14. Above error happened get 90 length data and after update it to 7 or 14 length. After error happened I can't update chart(it is frozen)
Hope to get your help