asked on December 6, 2021
Hi Team,
this.pivot.flexmonster.highcharts.getData() => this line throws undefined error. i.e. highcharts is undefined in flexmonster in angular 11 application
I have included flexmonster highchart connector in script section of angular.json file. "node_modules/flexmonster/lib/flexmonster.highcharts.js".
I am getting data in Flexmonster grid, but pivot.flexmonster.highcharts throws error "Cannot read properties of undefined getData()". Let me know, how to go ahead.
Thanks
⋅ December 6, 2021
Shahul,
Thank you for raising your support ticket.
Seems like the Connector for Highcharts might not be properly included in your project. Please check out the sample Angular integration project, which, among other examples, includes a sample with Highcharts – you can use it as a reference for your own project structure.
If this does not help, feel free to send us your project (or a similar one where this issue is reproducible) so that we can take a closer look and provide you with a solution.
Please let us know if this helps.
Best regards,
Mykhailo
⋅ December 7, 2021
Thanks for the response. Instead of importing in Script section of angular.json, if we import at top of component, issue get resolved.
But we face few problems in integration as such pivot.flexmonster.highcharts.getData() function don't emit rawData. It emits data (1 x-axis) data from flexmonster grid(pivot), eventhough, we have grouped/multiple rows definitions in flexmonster grid. We expect rawData (which will have data and meta according to flexmonster highchart connector documentation). But we get below response data object. Please refer attached image.
⋅ December 8, 2021
Hello, Shahul,
Thank you for your reply.
We are happy to hear that it worked to import the Highcharts connector library.
There are two ways how you can get the raw data:
The Highcharts connector returns two objects in the create chart and update chart callbacks: chartConfig and rawData. Therefore, you could access the raw data in the following way:
this.pivot.flexmonster.highcharts?.getData(
{
type:"column"
},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
// You can use rawData here
Highcharts.chart('highcharts-container', <Highcharts.Options>chartConfig);
},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
// You can use rawData here
Highcharts.chart('highcharts-container', <Highcharts.Options>chartConfig);
}
);
rawData object is also available in the connector's prepareDataFunction property
Also, you can get the raw data and customize the way the connector prepares the data through the prepareDataFunction property. With this approach, you could provide your own data processing logic and compose a custom chart configuration object:
this.pivot.flexmonster.highcharts?.getData(
{
type:"column",
prepareDataFunction: function(rawData, options) {
// Here you can process the rawData object and provide your own chart configuration output
var output = {...}
// Once ready, return the result:
return output;
}
},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
// chartConfig will contain your customized output returned in prepareDataFunction
// You can use rawData here as well
Highcharts.chart('highcharts-container', <Highcharts.Options>chartConfig);
},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
// chartConfig will contain your customized output returned in prepareDataFunction
// You can use rawData here as well
Highcharts.chart('highcharts-container', <Highcharts.Options>chartConfig);
}
);
Here is an example where the chart configuration is customized through the prepareDataFunction property: https://jsfiddle.net/flexmonster/x0cqafqh/.
Please let us know if this works. Looking forward to your response.
Kind regards,
Vera
⋅ December 8, 2021
Thanks Vira Didenko.
I got rawData yesterday from this method (callback handler)
(chartConfig, rawData)=>{
debugger;
console.table(chartConfig);
console.log(rawData);
Highcharts.chart('highcharts-container', <Highcharts.Options>chartConfig);
},
I need to reconstruct multiple x-axis from rawData.
I am getting the below error, when i use prepareDataFunction.
The expected type comes from property 'prepareDataFunction' which is declared here on type '{ type?: string; slice?: Slice; xAxisType?: string; valuesOnly?: boolean; withDrilldown?: boolean; prepareDataFunction?: (rawData: any) => any; }'
⋅ December 9, 2021
Hi FM Team ,
We are licensed users and we need some quick help here to meet our deliverable Timelines.
Expecting a quick response . Thanks much for the support so far
Regds,
Aparna Jagjit
⋅ December 9, 2021
Hello,
Thank you for your reply.
We found that the options parameter is missing in the prepareDataFunction type definitions.
Our team will provide an update for the type definitions in the upcoming minor release with the ETA 14th of December.
Meanwhile, a possible solution is to add a question mark to the options parameter, for example:
this.pivot.flexmonster.highcharts?.getData(
{
type:"column",
prepareDataFunction: function(rawData, options?: any) {
// Here you can process the rawData object and provide your own chart configuration output
var output = {...}
// Once ready, return the result:
return output;
}
},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {...},
(chartConfig: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {...}
);
This should compile successfully.
Please let us know if this works.
Kind regards,
Vera
⋅ December 13, 2021
Hello,
We are happy to inform you that the options parameter was added to the prepareDataFunction property definition for Highcharts.
This is available in the 2.9.14 (latest) minor release version of Flexmonster.
You are welcome to update the component. Here is our updating to the latest version guide for reference.
Please let us know if the update works fine for you.
Looking forward to your reply.
Kind regards,
Vera
⋅ December 14, 2021
Thanks Vera.
options? solved the problem of prepareDataFunction. Will reply after updating to latest release.
Not able to call any custom function which defined outside of prepareDataFunction.
Required to create a custom function which dynamically creates multilevel categories for grouping xAxis. That function is not accessible from prepareDataFunction. Is there any fix available for this?
Example :
createXAxisCategory(xAxisGrpName:string):any {
let category = new Object();
category["categories"] = [];
let titleObj = new Object();
titleObj["text"] = xAxisGrpName;
category["title"] = titleObj;
category["name"] = xAxisGrpName;
return category;
}
this.pivot.flexmonster.highcharts?.getData(
{
prepareDataFunction: function (data: any, options?: any) {
for(var indx=0; indx < CustomerName.length; indx++)
{
// let category = new Object();
// category["categories"] = [];
// let titleObj = new Object();
// titleObj["text"] = CustomerName[indx];
// category["title"] = titleObj;
// category["name"] = CustomerName[indx];
// xAxisArray[0].categories.push(category);
xAxisArray[0].categories.push(this.createXAxisCategory(CustomerName[indx]));
}
}
});
createXAxisCategory or this.createXAxisCategory is not accessible (undefined)
⋅ December 14, 2021
Hello, Shahul,
Thank you for the update. We are happy to hear that adding the question mark to the options parameter works for you.
Regarding calling an outside helper function inside prepareDataFunction:
You can fix this issue by saving a reference to the class context before this.pivot.flexmonster.highcharts?.getData is called. For example:
drawChart() {
// Save a reference to the class context (to "this"):
const _this = this;
this.pivot.flexmonster.highcharts?.getData(
{
prepareDataFunction: function (data, options?: any) {
// Now, inside prepareDataFunction you can call other functions through the saved context reference:
_this.helperFunction();
...
}
},
(data: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
console.log(rawData);
Highcharts.chart('highcharts-container', <Highcharts.Options>data);
},
(data: Flexmonster.GetDataValueObject, rawData: Flexmonster.GetDataValueObject) => {
console.log(rawData);
Highcharts.chart('highcharts-container', <Highcharts.Options>data);
}
);
}
helperFunction() {
// Helper function logic
}
Please consider that the context inside the prepareDataFunction function is different and, as a result, this is also different. This is the reason why your helper function is not accessible via this inside prepareDataFunction. For such cases, we suggest using the approach demonstrated above (using a saved reference).
Please let us know if using a saved reference works.
Looking forward to your reply.
Kind regards,
Vera