C3: C3 bar chart - JSON input

Created on 23 Oct 2014  路  5Comments  路  Source: c3js/c3

Does the C3 bar chart support JSON data? I am trying to get a simple example working but could not find any documentation or examples on how to achieve something like this:

var chart = c3.generate({
    data: {
        type: 'bar',
        json: [
            { 'indicator': 'X', 'total': 100 },
            { 'indicator': 'Y', 'total': 200 },
            { 'indicator': 'Z', 'total': 300 }
        ],
        keys: {
            x: 'indicator',
            value: ['total']
        }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});
question resolved maybe

Most helpful comment

It seems that you are missing 'axis' section. Try this:

var chart = c3.generate({
    data: {
        type: 'bar',
        json: [
            { 'indicator': 'X', 'total': 100 },
            { 'indicator': 'Y', 'total': 200 },
            { 'indicator': 'Z', 'total': 300 }
        ],
        keys: {
            x: 'indicator',
            value: ['total']
        }
    },
    axis: {
            x: {
                type: 'category'
            }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

All 5 comments

Thanks for the links. I saw those examples before. I actually have line charts working with JSON.

However I could not get it to work with bar charts, even a simple example.

Here's a fiddle: http://jsfiddle.net/z2erLqgx/1/

It seems that you are missing 'axis' section. Try this:

var chart = c3.generate({
    data: {
        type: 'bar',
        json: [
            { 'indicator': 'X', 'total': 100 },
            { 'indicator': 'Y', 'total': 200 },
            { 'indicator': 'Z', 'total': 300 }
        ],
        keys: {
            x: 'indicator',
            value: ['total']
        }
    },
    axis: {
            x: {
                type: 'category'
            }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

Thanks for the pointer! That was the problem.

Here's a working fiddle if anyone else runs into this:
http://jsfiddle.net/z2erLqgx/2/

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wojciechowskid picture wojciechowskid  路  3Comments

unlight picture unlight  路  3Comments

seubert picture seubert  路  3Comments

alantygel picture alantygel  路  3Comments

Shugardude picture Shugardude  路  4Comments