Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
45
Igniteui-Angular-Wrapper IgDataChart Ionic - updated data not visible on ui
posted

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