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
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]); } } }
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 DinchevaAssociate Software DeveloperInfragistics, Inc.