Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Load multiple json

See original GitHub issue

I would like to render the data1 in bar and the data2 in line

It seems the json parameter do not allow to load multiple json data… this is not working

    data1 = [{ "label" : "2004", "value" : "3.57" }, { "label" : "2005", "value" : "4.02" }, { "label" : "2006", "value" : "4.41" }, { "label" : "2007", "value" : "4.62" }, { "label" : "2008", "value" : "4.94" }, { "label" : "2009", "value" : "5.32" }, { "label" : "2010", "value" : "5.64" }, { "label" : "2011", "value" : "5.73" } ]

    data2 = [{ "label" : "2004", "value" : "6.67" }, { "label" : "2005", "value" : "7.08" }, { "label" : "2006", "value" : "7.46" }, { "label" : "2007", "value" : "8.00" }, { "label" : "2008", "value" : "8.38" }, { "label" : "2009", "value" : "8.76" }, { "label" : "2010", "value" : "9.63" }, { "label" : "2011", "value" : "10.37" } ]

    var chart = c3.generate({
      bindto: '#chart_panel',
      data: { 
              json: [data1, data2],
              keys: {
                x: 'label',
                value: ['value']
              },
              types: { data1 : 'bar', data2: 'spline' }
            },

      axis: {
        x: {
          type: 'category',
          categories: [2004,2005,2006,2007,2008,2009,2010,2011],
          label: { text: 'Années', position: 'outer-center'}
        }
      }
    });

Issue Analytics

State:
Created 9 years ago
Reactions:1
Comments:9 (3 by maintainers)

Top GitHub Comments

2reactions

ghostcommented, Jan 12, 2016

+1 for this enhancement. Thanks!

2reactions

aendra-rininslandcommented, Dec 18, 2014

The thing is, C3 doesn’t know the first array should be referred to as data1 (that’s just the variable name it’s stored in); I’m not sure an array works best there. What if the object-to-array syntax of JSON could support objects?

    data1 = [{ "label" : "2004", "value" : "3.57" }, { "label" : "2005", "value" : "4.02" }, { "label" : "2006", "value" : "4.41" }, { "label" : "2007", "value" : "4.62" }, { "label" : "2008", "value" : "4.94" }, { "label" : "2009", "value" : "5.32" }, { "label" : "2010", "value" : "5.64" }, { "label" : "2011", "value" : "5.73" } ]

    data2 = [{ "label" : "2004", "value" : "6.67" }, { "label" : "2005", "value" : "7.08" }, { "label" : "2006", "value" : "7.46" }, { "label" : "2007", "value" : "8.00" }, { "label" : "2008", "value" : "8.38" }, { "label" : "2009", "value" : "8.76" }, { "label" : "2010", "value" : "9.63" }, { "label" : "2011", "value" : "10.37" } ]

    var chart = c3.generate({
      bindto: '#chart_panel',
      data: { 
              json: {data1: data1, data2: data2},
              keys: {
                x: 'label',
                value: ['value']
              },
              types: { data1 : 'bar', data2: 'spline' }
            },

      axis: {
        x: {
          type: 'category',
          categories: [2004,2005,2006,2007,2008,2009,2010,2011],
          label: { text: 'Années', position: 'outer-center'}
        }
      }
    });

To be fair though, you could get this to work with just a bit of JavaScript transformation:

var data = [],
      data1 = [{ "label" : "2004", "value" : "3.57" }, { "label" : "2005", "value" : "4.02" }, { "label" : "2006", "value" : "4.41" }, { "label" : "2007", "value" : "4.62" }, { "label" : "2008", "value" : "4.94" }, { "label" : "2009", "value" : "5.32" }, { "label" : "2010", "value" : "5.64" }, { "label" : "2011", "value" : "5.73" } ],
     data2 = [{ "label" : "2004", "value" : "6.67" }, { "label" : "2005", "value" : "7.08" }, { "label" : "2006", "value" : "7.46" }, { "label" : "2007", "value" : "8.00" }, { "label" : "2008", "value" : "8.38" }, { "label" : "2009", "value" : "8.76" }, { "label" : "2010", "value" : "9.63" }, { "label" : "2011", "value" : "10.37" } ]

for (var i = 2004; i < data1.length + 2004; i++) {
  data[i - 2004] = {};
  var d1 = data1.filter(function(v){return v.label == i;});
  var d2 = data2.filter(function(v){return v.label == i;});
  if (d1.length) data[i - 2004].data1 = d1[0].value;
  if (d2.length) data[i - 2004].data2 = d2[0].value;
}

var chart = c3.generate({
   bindto: '#chart_panel',
   data: { 
        json: data,
            keys: {
                value: ['data1', 'data2']
              },
              types: { data1 : 'bar', data2: 'spline' }
            },

      axis: {
        x: {
          type: 'category',
          categories: [2004,2005,2006,2007,2008,2009,2010,2011],
          label: { text: 'Années', position: 'outer-center'}
        }
      }
    });

Plunker