Igniteui-Angular-Wrapper IgDataChart Ionic - updated data not visible on ui

kirstin posted over 6 years ago

I use your igniteui-angular-wrapper in Ionic framework. I like to update data from chart programatically. This time I try it by button click, later I like to use this with real-time-data. My DataChartComponent fill the (igdatachart-)option "dataSource" with content of "this.data" while initializing. If the button "Change Data" is clicked, the Method "changeData" switch the content of "this.data", but nothing happens on ui.

import { Component } from '@angular/core';

@Component({
  selector: 'data-chart',
  templateUrl: 'data-chart.html'
})
export class DataChartComponent {
  private data: any;
  private options: any;

  private dataChange : any;

  constructor() {
    this.dataChange = [];
    this.dataChange.push([{"CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394},
      {"CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396},
      {"CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351}]);
    this.dataChange.push([{"CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277},
      {"CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218}]);
    this.data = this.dataChange[0];
    this.options = {
      dataSource: this.data,
      axes: [{
        name: "NameAxis",
        type: "categoryX",
        title: "Country",
        label: "CountryName"
      },
        {
          name: "PopulationAxis",
          type: "numericY",
          minimumvalue: 0,
          title: "Milions of People"
        }],
      series: [{
        name: "2015Population",
        type: "column",
        isHighlightingEnabled: true,
        isTransitionInEnabled: true,
        xAxis: "NameAxis",
        yAxis: "PopulationAxis",
        valueMemberPath: "Pop2015"
      }]
    };
  }

  changeData(){
    let index = 1;
    if(this.data[0].CountryName === "Indonesia"){
      index=0;
    }
    this.data = [];
    let dataToShow = this.dataChange[index];
    for(let i = 0; i<dataToShow.length;i++){
      this.data.push(dataToShow[i]);
    }
  }
}

This is the complete testcase. You need npm and ionic, if you like to build it.

0434.igDataChartTestcase.zip

Top Replies

320

Offline Desislava Dincheva posted over 6 years ago +1 verified
Hello Kirstin, Thank you for contacting Infragistics Support. I am sending you back as attached file your sample with applied necessary fixes. I recommend...view reply »

Parents

No Data

Reply

320

Verified Answer
Offline Desislava Dincheva posted over 6 years ago

Hello Kirstin,

Thank you for contacting Infragistics Support.

I am sending you back as attached file your sample with applied necessary fixes. I recommend you to take a look at https://www.igniteui.com/help/api/2017.2/ui.igDataChart .

If you have any other questions please contact me.

IgDataChart.zip

Best Regards,
Desislava Dincheva
Associate Software Developer
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel

Children

Offline kirstin posted over 6 years ago in reply to Desislava Dincheva

Hy Desislava,

Thank you for your reply: it works.

For other users have the same problem and reading this, I only changed the handling of both data sets and attached the source. Now switching between 2 data sets is working correctly.

import { Component, ViewChild } from '@angular/core';
import { IgDataChartComponent } from "igniteui-angular-wrappers";

@Component({
  selector: 'data-chart',
  templateUrl: 'data-chart.html'
})
export class DataChartComponent {
	@ViewChild("dataChart", { read: IgDataChartComponent })
  public child: IgDataChartComponent;
	
	public data: any;
  private options: any;

  private dataList1 : any[];
  private dataList2 : any[];

 
  constructor() {
  	  this.dataList1 = [{"CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394},
          {"CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396},
          {"CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351}];
  	  this.dataList2 = [{"CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277},
          {"CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218}];
  	  this.data = [];

  	  for(let i = 0;i<this.dataList1.length; i++){
  	  	this.data.push(this.dataList1[i]);
	  }
      this.options = {
			dataSource: this.data,
			axes: [{
				name: "NameAxis",
				type: "categoryX",
				title: "Country",
				label: "CountryName"
			},
				{
					name: "PopulationAxis",
					type: "numericY",
					minimumvalue: 0,
					title: "Milions of People"
				}],
			series: [{
				name: "2015Population",
				type: "column",
				isHighlightingEnabled: true,
				isTransitionInEnabled: true,
				xAxis: "NameAxis",
				yAxis: "PopulationAxis",
				valueMemberPath: "Pop2015"
			}]
		};
  }

  changeData(){
  	let dataToShow = this.dataList2;
    if(this.data[0].CountryName === "Indonesia"){
        dataToShow = this.dataList1;
    }
    this.data.length = 0;
	this.child.notifyClearItems(this.data);

    for(let i = 0; i<dataToShow.length;i++){
    	this.data.push(dataToShow[i]);
		this.child.notifyInsertItem(this.data, i, dataToShow[i]);
    }
  }
}

7848.IgDataChart.zip