asked on July 2, 2020
Hi!
We apply formatting on flexmontster instance, integrate it with highcharts and then we want to get formatted aggregated values. We get aggreated data via pivot.highcharts.getData() but these values are not formatted. Is there is any solution to get formatted values?
Regards,
Rodion
⋅ July 2, 2020
Hello, Rodion,
Thank you for your question.
Yes, the Highcharts connector has several functions for defining number formatting for Highcharts.
For instance, the highcharts.getAxisFormat(format) method takes the pivot table format object and returns the Highcharts format string with the value variable.
Please see the following guide for more details: https://www.flexmonster.com/doc/integration-with-highcharts/.
Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/z0bod0w9/
Please let us know if this helps.
Looking forward to your reply.
Kind regards,
Vera
⋅ July 7, 2020
Hi, Vera
We already apply formatting for highcharts, and we would like to fetch formatted values from highcharts to use it out of charts. Via pivot.highcharts.getData() we can fetch values like
series: [{
data: [2505, 81, 2241],
name: "Sum of Exception Count"
}]
but we would like to fetch already formatted values like this for example:
[{
"name": "Sum of Exception Count", "data": ["2 505", "81, "2 241"]
}]
Thanks in advance.
Regards, Rodion
⋅ July 7, 2020
Hello, Rodion,
Thank you for your reply.
We would like to kindly explain that the Highcharts connector returns unformatted values.
The recommended approach is to use the previously mentioned functions for defining the number formatting.
Could you please explain more about what you are trying to achieve and why the dedicated functions won't work for you?
More insight will help us to understand the situation better.
Looking forward to hearing from you.
Kind regards,
Vera
⋅ July 9, 2020
Hello Vera,
I am answering about our case instead of Rodion.
We have a highchart built based on pivot data. Also we have a simple table that displays only the data that is used in the highchart. We fetch this data for the table via pivot.highcharts.getData().
Example: https://jsfiddle.net/Dongor7/ekp0w7m5/
I have added a small table under the highchart. We need to format the data in the table.
Thank you once again for the help.
Kind regards,
Denis
⋅ July 9, 2020
Hello, Denis,
Thank you for providing further details about your use case.
A possible solution is to display the data that is used in the Highcharts chart in another instance of Flexmonster.
This way, the data can be formatted with Flexmonster by applying number formatting.
We would like to add that you can customize Flexmonster's appearance and remove certain functionality to fit your case better.
Here is a modified version of the provided JSFiddle example demonstrating the suggested approach: https://jsfiddle.net/flexmonster/j0Lyuw49/.
The full list of configuration options that Flexmonster offers is presented in the following guide: https://www.flexmonster.com/api/options-object/.
Please let us know if this would work for you.
Looking forward to your response.
Kind regards,
Vera
⋅ July 9, 2020
Hello Vera,
Thank you for your answer.
It is a good solution but we must not to use more the one flexmonster instance on a page. Therefore your example is not suitable for us. As I see it now we can write custom function, for example applyFormat(value, format) and apply format manually. It would be great if you could give some advice or piece of algorithm which you use for applying format on pivot.
Thank you for your help.
Kind regards,
Denis
⋅ July 13, 2020
Hello, Denis,
Thank you for your reply.
We would like to bring to your attention that Flexmonster is a pivot table component for visualizing data and cannot be used solely as a data provider.
When integrating Flexmonster with third party charts, Flexmonster provides unformatted data and delegates the number formatting logic to the chosen chart library.
Could you please explain why you can't use more than one instance of Flexmonster on a page?
A simple and quick workaround to format the data would be to use an existing number formatting library.
Here is a modified version of the provided example where Numeral.js is used to apply number formatting to the data: https://jsfiddle.net/flexmonster/5tyd92ng/.
The chart connector also returns Flexmonster's number format object, which you could use to compose the needed number formatting pattern/object. This way number formatting can be updated during runtime. This approach is used in the Highcharts connector: Flexmonster's number format object is converted to Highcharts number format pattern/object so that number formatting can be applied to the chart data. The Highcharts connector’s code is open, so you are welcome to see how this is implemented.
Please let us know if this works.
Looking forward to your reply,
Kind regards,
Vera
⋅ July 20, 2020
Hello, Denis,
Our team would like to kindly take an interest if you have found our solution helpful.
Were you able to achieve the desired result?
Looking forward to your feedback.
Kind regards,
Vera
⋅ July 27, 2020
Hello, Denis,
We are wondering if it worked to achieve the desired output. Did everything work fine for you?
If any questions remain, please do let us know - we are happy to help.
Please share your thoughts with us.
Looking forward to your feedback.
Kind regards,
Vera