C3: Unable to create chart with json and dot in key

[DoomyTheFroomy]

I have tried to create a donut chart for Chrome version. Which contain a dot as key. This will cause errors. I have tried to create the chart on http://c3js.org (c3.min-4c5bef8f.js) with a chrome (50.0). But it was not possible.

var chart = c3.generate({
    data: {
        json: [
            {'38.0': 10, '46.0': 10, '47.0': 10, '49.0': 20, '50.0': 30, 'unbekannt': 4}
        ],
        keys: {
            value: ['38.0', '46.0', '47.0', '49.0', '50.0', 'unbekannt']
        },
        type : 'donut'
    },
    donut: {
        title: "Chrome Versions"
    }
});

[Kyhel]

I encountered the same problem today.
I've done some research and found the culprit code.

In the function c3_chart_internal_fn.convertJsonToData, since the version 0.4.11 (the problem doesn't exist in version 0.4.10), the following block of code changes :

0.4.10

targetKeys.forEach(function (key) {
                    // convert undefined to null because undefined data will be removed in convertDataToTargets()
                    var v = isUndefined(o[key]) ? null : o[key];
                    new_row.push(v);
                });

becomes

0.4.11

targetKeys.forEach(function (key) {
                    // convert undefined to null because undefined data will be removed in convertDataToTargets()
                    var v = $$.findValueInJson(o, key);
                    if (isUndefined(v)) {
                        v = null;
                    }
                });

I'm not exaclty sure what the findValueInJson does, but the part replacing brackets with dots and then spliting on the dots seems to be the cause of problems.

Anyway, until this issue is resolved, using the 0.4.10 version solved it for me.

Cheers,
Kyhel

[DoomyTheFroomy]

@Kyhel thank you very much! So I can use it, until the issue has been fixed!

[kelthuzad]

This was implemented as a fix for issue https://github.com/c3js/c3/issues/1471 .
The problem is, that the syntax "x.y" is now interpreted as "get value of key y which is inside the object that is accesed by key x" and not "get value of key "x.y".

A bugfix would probably be to check if key "x.y" exists and using its value if it does. Only if this key doesn't exist, the nested-object logic should be used.

A workaround would be if your object structure would look like this:

json: [ {'38':{'0': 10}, '46':{'0': 10}, '47':{'0': 10}, '49':{'0': 20}, '50':{'0': 30}, 'unbekannt': 4} ],

[joeshub]

Has anyone created a jsfiddle of how the new x.y data model fetch is supposed to work? This would be really helpful.

[kelthuzad]

@joeshub This is a simple jsfiddle that demonstrates the new functionality: http://jsfiddle.net/h0wag7ur/

[kelthuzad]

Fixed the bug (see pull request), this jsfiddle shows @DoomyTheFroomy 's example with my fixed c3 dependency.
Sorry for the inconvenience due to this bug :-(

Edit:
This bugfix only fixes a key containing a . or [] in the first level of the object. All keys in nested objects may not contain . or [].

[Kyhel]

Thanks for the explanations, now I understand better what was the reason behind the new code.
However, I think allowing nested objects keys with the dot notation a bit strange, because of the conflict with decimal numbers.
But you probably can't satisfy everyone at the same time anyway.

Good job on fixing that quickly anyway, and thanks for your work on c3 !
Cheers,
Kyhel

[kelthuzad]

A check to see if a key is a number could be implemented to prevent the conflict with numbers.
Another possibility would be to choose another character instead of "." to reference inner objects.

But I don't know if it's worth it. I don't like the idea of implementing overly complex logic checks or obscure special characters.

[scherrs]

It seems that this issue is still open in the current version, isn't it?

We have a problem similar to the described behavior.

[svki0001]

The problem is still in the latest version.

[1Jesper1]

How to fix this problem?

[miladtai]

I have this problem too, how we can solve this ?