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){}
}
⋅ 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
⋅ March 17, 2020
No, I do not want to modify charts.
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('<')) {
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
⋅ 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
⋅ 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
⋅ 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