C3: Load multiple json

[DemersM]

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'}
        }
      }
    });

[aendrew]

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

[DemersM]

+1 for the enhancement you propose at first. This is how it should explicitely load multiple json into a chart. I dont know if its implementation is possible though.

I hope such feature would be added.

I see your proposed solution more as a useful workaround for now.

Thanks a lot!

[aendrew]

Given this seems to be somewhat of an edge case, could you please query the Google Group to see if there's any demand for this? It probably won't get priority otherwise.

Closing for now, will reopen if there's any appetite to implement this.

[DemersM]

I see this post in the group asking for the same feature:

https://groups.google.com/forum/#!searchin/c3js/max$20demars/c3js/BLX1mf9xDdM/7UBFtvvxbV8J

[aendrew]

Reopening after discussion with @masayuki0812 re: how to handle on hold issues.

[jjzazuet]

+1 for this enhancement. Thanks!

[slhck]

:+1: for this — it would enable more succinct code. Right now the only way to achieve this would be with manual data transformations.

[axelson]

+1 as well

[ghost]

+1 for this enhancement. Thanks!