Search code examples
jsonc3

LineChart with C3 using JSON


I can't understand because my chart is not working properly. Anything is displayed.

Below my simple code:

    <div id="chartc3"></div>
    <script>
    var scene;
    $.getJSON('assets/json/chartc3.json', function(data) 
    { 
        scene=data;

        var chart = c3.generate({
        bindto: '#chartc3',
        data: 
            {
                json: scene,
                keys: 
                    {
                        value: ['round','val'],
                    }
            }
        });
    }); 
    </script>

and the following json file:

[
{
    round:'1', val:1000
},
{
    round:'2', val:1000
},

    round:'3', val:1000
},
{
    round:'4', val:1000
},
{
    round:'5', val:1000
},
{
    round:'6', val:1000
},
]

Do you have any idea ? I don't have any error messages in my console. JSFIDDLE: here


Solution

  • Your JSON seems to be invalid.

    1. The 3rd element is missing an open parentheses.
    2. Include double quotes around the property names
    3. Change your single quotes to double quotes

    The following JSON works

    [
    {
        "round":"1", "val":1000
    },
    {
        "round":"2", "val":1000
    },
    {
        "round":"3", "val":1000
    },
    {
        "round":"4", "val":1000
    },
    {
        "round":"5", "val":1000
    },
    {
        "round":"6", "val":1000
    }
    ]