Forums Ignite UI for Angular
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
Close
Iryna Sigova
15
Graphs for data grids (UI Ignite for Angular)
posted

Hi

Is it possible to have graphs for grids, like in the example below, important is the ability to drill down to the data behind the chart (e.g. by clicking on blue zone in pie chart) and see the data in the grid.

  • 1560
    Offline posted
    Hello,

    Thank you for the provided screenshot.
    I have been looking into your requirement and created a small sample with a pie chart and IgxGrid according to the provided information.
    In order to achieve your requirement, my suggestion is to define a global variable where the selected pie slice would be stored. It could be accessed using the sliceClick event arguments. In order to highlight the grid's rows corresponding to the pie chat item my suggestion is to use the Grid Conditional Cell Styling. More about it could be found in this topic in our documentation. Each time when the selected slice is changed, you should reflow the grid in order to update the style:
     ItemSelection(event: any) {
    if(this.item === event.args.dataContext.Company){    
      this.item = ""
    }else{
       this.item = event.args.dataContext.Company;
    }
   
    this.condClasses = {
      deselect: this.deselectCondition,
      select: this.selectCondition
    };
    this.grid.reflow();
  }
    Here you can find my sample for your reference.
     
    Additionally, what I can suggest is having a look at our Data Analysis topic in our documentation where we stress on examining, transforming, and arranging data in a specific way to generate useful information based on it.
    Let me know if I may be of any further assistance.
    Sincerely,
    Teodosia Hristodorova
    Associate Software Developer