title: C3js dynamic load unknown columns
body: <p>I have an empty timeseries chart with c3js and would like to "load" dynamically columns from a unknown map.</p>
  
  <p><strong>Initialization</strong></p>
  
  <pre><code>var chart = c3.generate({
      data: {
          x: 'ts',
          xFormat: null, // For millis
          columns: []
      },
      axis: {
          x: {
              type: 'timeseries',
              tick: {
                  format: '%Y-%m-%d'
              }
          }
      },
      line: { // For enable null values in series (gaps in charts))
          connectNull: false 
      }
  });
  </code></pre>
  
  <p><strong>I add the x axis values and dynamically generated map with all data:</strong></p>
  
  <pre><code>var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION);
  periodPowerChart.load({
      columns: [
          tsData
      ]
  });
  // opMode looks like [{"1": [null, null, 0, 3, 5]}, {"2": [2, 4, null, null, null]}]
  for (key in opMode) {
      chart.load({
          columns: [
              [key].concat(opMode[key])
          ]
      })
  }
  </code></pre>
  
  <p>So the idea is loading data from <code>opMode</code>. In the first iteration in the for i got:</p>
  
  <pre><code>Error: x is not defined for id = "1"
  </code></pre>
  
  <p>The 3 arrays (ts, "1" and "2" have same number of elements). Any ideas?</p>