asked on February 3, 2020
Hi team,
When I'm trying to integrate with Highcharts, the getData method seems to be parsing my row value(i.e. the r0) into int somehow, which results in some of the r0 becomes NaN. Is there a way to prevent such behaviour, where I just them to stay as the way in the pivot table?
Thank you
⋅ February 3, 2020
Hello, Kim,
Thank you for reaching out to us.
We have not managed to reproduce the issue on our end.
Could you please provide a JSFiddle example with sample data where the issue is reproducible?
This will greatly help us to understand the situation better.
Looking forward to your reply.
Best regards,
Vera
⋅ February 4, 2020
Hi Vera,
I'm having trouble to reproduce the problem in JSfiddle as well, when I'm just using partial data; it works fine in JSFiddle somehow.
This behaviour only happens in one of the fields actually. I have attached the screenshot, and as you can see, The rows are showing the values properly in the pivot table, but when the data is fed into highcharts, they seem to be parsed to int, thus the NaNs.
I've tested the same data with webdatarocks along with highcharts first with good result, so I'm just wondering if there is any possible reason that might cause such behaviour with flexmonster.
Thank you
⋅ February 4, 2020
Hello, Kim,
Thank you for your reply and for providing screenshots for illustration.
It helped us to understand the situation better.
It seems we have managed to reproduce the same behavior on our end: https://jsfiddle.net/flexmonster/8xtkmdb4/
The reason for this is that the Country field gets interpreted as a measure because it contains data of mixed types (for example, "3", "Country").
We kindly suggest specifying the data types for the fields in the meta JSON object, for example:
[
{
"Country": {type: "string"},
"Category": {type: "string"},
"Price": {type: "number"},
"Quantity": {type: "number"}
},
{
"Country": "3",
"Category": "Accessories",
"Price": 445,
"Quantity": 464
},
...
]
or the mapping property of the dataSource object, for example:
dataSource: {
dataSourceType: "json",
data: getData(),
mapping: {
"Country": {type: "string"},
"Category": {type: "string"},
"Price": {type: "number"},
"Quantity": {type: "number"}
}
},
Here is a modified version of the JSFiddle example where the mapping property is applied: https://jsfiddle.net/flexmonster/qte97d01/
Please let us know if this works.
Looking forward to your response.
Best regards,
Vera
⋅ February 5, 2020
Hi Vera,
I was suspecting that was the case, but didn't know you can set the mapping object before. After defining the mapping object, the charts can now be rendered properly. Really appreciate all the help.
Kim
⋅ February 5, 2020
Hello, Kim,
Thank you for your feedback.
We are glad to hear that the issue is resolved.
As for the mapping property, it is a relatively new feature and more details about it can be found in our Mapping guide.
You are welcome to write to us in case any questions arise.
Best regards,
Vera