title: show multiple data sets in C3.js line chart
body: <p>I have following json:</p>
  
  <pre><code>[
     {"data"=&gt;"data1", "value1"=&gt;10, "value2"=&gt;6, "day"=&gt;"05-20-2016"},
     {"data"=&gt;"data1", "value1"=&gt;17, "value2"=&gt;10, "day"=&gt;"05-21-2016"},
     {"data"=&gt;"data1", "value1"=&gt;12, "value2"=&gt;8, "day"=&gt;"05-22-2016"},
     {"data"=&gt;"data2", "value1"=&gt;5, "value2"=&gt;1, "day"=&gt;"05-20-2016"},
     {"data"=&gt;"data2", "value1"=&gt;11, "value2"=&gt;3, "day"=&gt;"05-21-2016"},
     {"data"=&gt;"data2", "value1"=&gt;25, "value2"=&gt;18, "day"=&gt;"05-22-2016"}
  ]
  </code></pre>
  
  <p>What I want is to display these values in a line chart with C3.js and have a separate line for each value. </p>
  
  <p>Based on the example, I want to have one line for data1 and value1, one line for data1 and value2, one line for data2 and value1, one line for data2 and value2 and in the legend I want to have Value1 > Data1, Data2 and Value2 > Data1, Data2 (each data line to have a different color).</p>
  
  <p>Right now, when I load this in C3.js, it will only show me 2 lines (one for data1 and one for data2).</p>
  
  <p>Can someone show me exactly how to do this?</p>