Dear visitor, despite the COVID-19 outbreak, our team continues operating at full speed.

Also, here is the form where you can apply for a special discount and we will contact you with possible options. Stay safe and continue achieving your business goals.

Fill the form
Get Free Trial
Get Free Trial

How does charts work?

Answered
kaavya asked on March 16, 2020

Hi Team,
 
Can you please explain how does charts work?
I have implemented the checkbox functionality, due to that first column every time is checkbox.
In chart nothing is showing. Why false is coming everytime
 
http://prntscr.com/rh7g6o
 
Code
 

import { Component, ViewChild } from ‘@angular/core’;
import * as Flexmonster from ‘flexmonster’;
import { FlexmonsterPivot } from ‘ng-flexmonster’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})
export class AppComponent {
  title = ‘flexmonster-app’;
  @ViewChild(‘pivot’, {static: true}) pivot: FlexmonsterPivot;

  data: any;
  report : any;
  rows: any;
  showConfiguratorButton = false;
  toolbar = true;
  selectedRows = {};
  customizeCellFunction(cell, data): any {
    console.log(data)
    if (data.type === “value” && !data.isDrillThrough && cell.text.includes(‘<’)) {
          cell.style[‘z-index’] = 2;
          cell.text = data.member.caption;
    }
    if (data.hierarchy.uniqueName == “id”) {
        console.log(data)
        cell.text = “<center><input type=’checkbox’ ” + (data.label == “true” ? “checked” : “”) + “/></center>”;
      }
    // if (data.measure && data.type != ‘header’ && data.measure.uniqueName == “Checkbox”) {
    //     cell.text = `<input type=”checkbox” value=”1″ onchange=”onCheck(event)” ‘checked’ >`;
    //     cell.style[‘z-index’] = 2;
    // }
  }
  onCustomizeCell(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData): void {
    console.log(data)
   this.rows.filter(ele => {
     if (ele.uniqueName === data.measure.uniqueName && data.type != ‘header’) {
       if (ele.isHyperLink) {
         cell.text = `<a href=’https://en.wikipedia.org/wiki/’ target=’_blank’ class=’flexmonster_hyperlink–properties’ onclick=’alert(“fgf”)’>${data.label}</a>`;
         cell.style[‘z-index’] = 2;
       }
     }
   });
   if ( data.measure.uniqueName == “Checkbox”) {
    if (data.type != ‘header’) {
      cell.text = `<input type=”checkbox” name=”fm-checkbox” value=”${data.value}” ${this.selectedRows[data.value] ? ‘checked’ : ”}>`;
    } else {
      cell.text = `<input type=”checkbox” name=”fm-checkbox-header” value=”${data.value}” ${this.selectedRows[data.value] ? ‘checked’ : ”}>`;
    }

    cell.style[‘z-index’] = 2;
  }
}

onPivotReady(pivot: Flexmonster.Pivot): void {
  this.pivot.flexmonster.customizeCell((cell, data) => this.onCustomizeCell(cell, data));
  
}
selectAll(prop): void {

  const boxes = document.getElementsByName(‘fm-checkbox’);
  for (let i = 0; i < boxes.length; i++) {
    if (prop) {
    boxes[i].setAttribute(“checked”, “checked”);
    }
    else {
    boxes[i].removeAttribute(“checked”);
    }
    this.selectedRows[boxes[i].getAttribute(‘value’)] = prop;
  }
}

    printChecked() {
    let output = “Selected row’s ID:\n”;
    for (const elem in this.selectedRows) {
    if (this.selectedRows[elem])
        output += elem + ‘\n’;
    }
    alert(output);
}

    customizeToolbar(toolbar) {
    // get all tabs

    const tabs = toolbar.getTabs();
    let pivot = this.pivot.flexmonster;

    toolbar.getTabs = function() {
        delete tabs[0];
        delete tabs[1];
        delete tabs[2];
        tabs[3].menu[1].handler = exportHandler;
        tabs[3].menu[1].args = {
            type: ‘html’,
            filename: ‘test.html’
        };

        return tabs;
    };
    function exportHandler(params) {
    pivot.exportTo(params.type, {
        filename: params.filename
    });
    }

}

    onCheck(event) {

  // console.log(event);
  if (event.detail.target.checked == true) {
    

  } else {
   
  }
  this.selectedRows[event.target.value] = event.target.checked;
}
  ngOnInit(){
    
    this.rows = [
      {
            “uniqueName”: “Checkbox”,
            “caption”: “checkbox”
          },
          {
            “uniqueName”: “employee_name”,
            “caption”: “employee_name”
          },
          {
            “uniqueName”: “employee_salary”,
            “caption”: “employee_salary”
          },
        ];
        console.log(this.data);
    this.data = [
    {“id”:”16102″,”employee_name”:”a”,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””,”Checkbox”: false},
    {“id”:”16102″,”employee_name”:”a1″,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””,”Checkbox”: false},
    {“id”:”16102″,”employee_name”:”a2″,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””,”Checkbox”: false},
    {“id”:”16102″,”employee_name”:”a”,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””,”Checkbox”: false},
    {“id”:”16103″,”employee_name”:”bn”,”employee_salary”:”2″,”employee_age”:”166″,”profile_image”:””,”Checkbox”: false}];
    this.report = {
      dataSource: {
          dataSourceType: “json”,
          data: this.data,
      },
      options: {
        grid: {
          type: “flat”,
          showGrandTotals: false,
          datePattern: “yyyy/MM/dd HH:mm:ss”,
          showHeaders: false
        },
        configuratorButton : this.showConfiguratorButton
      },
      formats: [
        {
          textAlign: “left”,
          nullValue: “1”,
          thousandsSeparator: “”
        }
      ],
      slice: {
        rows: this.rows,
        columns: [{ uniqueName: “[Measures]”}],
        measures: [{uniqueName: “employee_name”}, {uniqueName: “employee_salary”}]
      }
  };
  }

onReportComplete(event){}
}

 

5 answers

Public
Vera Didenko Flexmonster March 17, 2020

Hello, Kaavya,
 
Thank you for writing to us.
 
If we understand correctly, you would like the checkbox to be shown in the charts section (instead of the Checkbox field’s values, for example, false).
We would like to explain that the customizeCell() API call is not supported for charts. 
Kindly note that customizing the built-in charts to display checkboxes is not supported at the moment.
 
A possible solution to your case is to use a third-party chart library, which supports such customizations. 
The following tutorials will help you to connect the chosen 3rd party visualization tool to Flexmonster:

 
Please let us know if you have any other questions we can help you with.
 
Kind regards,
Vera

Public
kaavya March 17, 2020

No, I do not want to modify charts.
 

    1. My scenario is when I applied checkbox to the grid then checkbox column appears the first column which is correct, but this gave impact on charts, meaning.. chart always showed false and the on drill down the values, which is wrong. To overcome this, I tried loading the grid with checkbox position at the last and then manually dragged to first column position and in this case charts displayed fine.
       
      Now how to drag the particular column to first column position after grid load.
  1. With this code

import { Component, ViewChild } from ‘@angular/core’;
import * as Flexmonster from ‘flexmonster’;
import { FlexmonsterPivot } from ‘ng-flexmonster’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})
export class AppComponent {
  title = ‘flexmonster-app’;
  @ViewChild(‘pivot’, {static: true}) pivot: FlexmonsterPivot;

  data: any;
  report : any;
  rows: any;
  showConfiguratorButton = false;
  toolbar = true;
  isCheckbox = true;
  selectedRows = {};
  customizeCellFunction(cell, data): any {
    
    if (data.type === “value” && !data.isDrillThrough && cell.text.includes(‘&lt;’)) {
          cell.style[‘z-index’] = 2;
          cell.text = data.member.caption;
    }
    if (this.isCheckbox) {
        
        cell.text = “<center><input type=’checkbox’ ” + (data.label == “true” ? “checked” : “”) + “/></center>”;
      }
    // if (data.measure && data.type != ‘header’ && data.measure.uniqueName == “Checkbox”) {
    //     cell.text = `<input type=”checkbox” value=”1″ onchange=”onCheck(event)” ‘checked’ >`;
    //     cell.style[‘z-index’] = 2;
    // }
  }
  onCustomizeCell(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData): void {
    
    this.rows.filter(ele => {
     if (ele.uniqueName === data.measure.uniqueName && data.type != ‘header’) {
       if (ele.isHyperLink) {
         cell.text = `<a href=’https://en.wikipedia.org/wiki/’ target=’_blank’ class=’flexmonster_hyperlink–properties’ onclick=’alert(“fgf”)’>${data.label}</a>`;
         cell.style[‘z-index’] = 2;
       }
     }
   });
    if ( data.measure.uniqueName==”Checkbox”) {
    if (data.type != ‘header’) {
      cell.text = `<input type=”checkbox” name=”fm-checkbox” value=”${data.value}” ${this.selectedRows[data.value] ? ‘checked’ : ”}>`;
    } else {
      cell.text = `<input type=”checkbox” name=”fm-checkbox-header” value=”${data.value}” ${this.selectedRows[data.value] ? ‘checked’ : ”}>`;
    }

    cell.style[‘z-index’] = 2;
  }
}

onPivotReady(pivot: Flexmonster.Pivot): void {
  this.pivot.flexmonster.customizeCell((cell, data) =>{
    this.onCustomizeCell(cell, data)
  }); 
  
}
selectAll(prop): void {

  const boxes = document.getElementsByName(‘fm-checkbox’);
  for (let i = 0; i < boxes.length; i++) {
    if (prop) {
    boxes[i].setAttribute(“checked”, “checked”);
    }
    else {
    boxes[i].removeAttribute(“checked”);
    }
    this.selectedRows[boxes[i].getAttribute(‘value’)] = prop;
  }
}
    customizeToolbar(toolbar) {
    // get all tabs

    const tabs = toolbar.getTabs();
    let pivot = this.pivot.flexmonster;

    toolbar.getTabs = function() {
        delete tabs[0];
        delete tabs[1];
        delete tabs[2];
        tabs[3].menu[1].handler = exportHandler;
        tabs[3].menu[1].args = {
            type: ‘html’,
            filename: ‘test.html’
        };

        return tabs;
    };
    function exportHandler(params) {
    pivot.exportTo(params.type, {
        filename: params.filename
    });
    }

}

    onCheck(event) {

  // console.log(event);
  if (event.detail.target.checked == true) {
    

  } else {
   
  }
  this.selectedRows[event.target.value] = event.target.checked;
}
  ngOnInit(){
    
    this.rows = [
      
          {
            “uniqueName”: “employee_name”,
            “caption”: “employee_name”
          },
          {
            “uniqueName”: “employee_salary”,
            “caption”: “employee_salary”
          },
        ];
    
    this.data = [
    {“id”:”16102″,”Checkbox”: false, “employee_name”:”a”,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””},
    {“id”:”16102″,”Checkbox”: false, “employee_name”:”a1″,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””},
    {“id”:”16102″,”Checkbox”: false, “employee_name”:”a2″,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””},
    {“id”:”16102″,”Checkbox”: false, “employee_name”:”a”,”employee_salary”:”47″,”employee_age”:”170″,”profile_image”:””},
    {“id”:”16103″,”Checkbox”: false, “employee_name”:”bn”,”employee_salary”:”2″,”employee_age”:”166″,”profile_image”:””}];
    this.report = {
      dataSource: {
          dataSourceType: “json”,
          data: this.data,
      },
      options: {
        grid: {
          type: “flat”,
          showGrandTotals: false,
          datePattern: “yyyy/MM/dd HH:mm:ss”,
          showHeaders: false
        },
        viewType: “grid”,
      // chart: {
      //   activeMeasure: {
      //     uniqueName: “[employee_salary]”
      //   }
      // },
        configuratorButton : this.showConfiguratorButton
      },
      formats: [
        {
          textAlign: “left”,
          nullValue: “1”,
          thousandsSeparator: “”
        }
      ],
      slice: {
        rows: this.rows,
        columns: [{ uniqueName: “[Measures]”}],
        measures: [{uniqueName:”Checkbox”},{uniqueName: “employee_name”}, {uniqueName: “employee_salary”}]
      }
  };
  }
 
 
}
Chart is working fine but position of checkbox is wrong

http://prntscr.com/rhu6ot

Public
Vera Didenko Flexmonster March 17, 2020

Hello, Kaavya,
 
Thank you for your reply.
 
Regarding how to drag the particular column to first column position after grid load:
We kindly recommend using the reportcomplete event and calling the runQuery() API call to apply the desired data slice: https://jsfiddle.net/flexmonster/s7te1g82/
 
Here is how this could be achieved in Angular: 
1) In app.component.html:

<fm-pivot#pivot

[toolbar]="true"

[width]="'100%'"

[height]="500"

[report]="pivotReport"

(ready)="onPivotReady($event)"

(reportcomplete)="applySlice()">

</fm-pivot>

2) In app.component.ts:

applySlice():void{

this.pivot.flexmonster.off("reportcomplete");

var slice = {
rows: [
{
"uniqueName": "ID",
"format": 'left'
},
{
"uniqueName": "Checkbox",
"caption": "checkbox"
},
{
"uniqueName": "employee_name",
"caption": "employee_name"
},
{
"uniqueName": "employee_salary",
"caption": "employee_salary"
}
],
columns: [
{
"uniqueName": "[Measures]"
}
],
measures: [
{
uniqueName: "ID",
aggregation: "sum",
active: false,
format: "left"
},
{
"uniqueName": "employee_name"
},
{
"uniqueName": "employee_salary"
}
]
};


this.pivot.flexmonster.runQuery(slice);
}

It is important to sign off the reportcomplete event inside the handler. This will prevent the handler from getting called infinitely in case some of the used methods trigger the reportcomplete event, for example, the runQuery() API call. 
 
Please let us know if this works.
 
Kind regards,
Vera

Public
kaavya March 18, 2020

Hi Vera,
 
This solution is impacting chart display, see this is replacing everything. After doing this I am back to same issue, now charts are not showing correctly.
 
I do not want checkbox on Y-axis
http://prntscr.com/ri5q7e

Public
Vera Didenko Flexmonster March 18, 2020

Hello, Kaavya,
 
Thank you for your response. 
 
It seems this case is open in more than one forum thread.
In order to solve it more effectively and avoid possible misunderstandings, we have decided to continue the communication in one thread.
Please see our answer in the following thread.
 
Kind regards,
Vera

Please login or Register to Submit Answer