passing multiple arrays to c3 graph

Question

I have an api giving me back multiple arrays I have to place on a c3 line chart. I seem to be able to plot on just fine, but if I start to pass in multiples it starts having a fit. I've done some searching, but from what I've seen mine needs to be more dynamic than calling out specific variable names in the data because I don't know how many I will have at any given time.

My code kind of looks like this

array1 = [];
array2 = [];
array 3 = [];
Data = ?;
 c3.generate({
 bindto: '.timeline',
                    data:{
                        columns: [
                            Data,
                        ],
                        axes: {
                            data2: 'x' // ADD
                        }
                    },
                    axis: {
                        y: {
                            label: { // ADD
                                text: 'Waiting',
                                position: 'outer-middle'
                            }
                        },
                        x: {
                            type: 'category',
                            categories: hour,
                            show: true, // ADD
                            label: { // ADD
                                text: '',
                                position: 'outer-center'
                            }   
                        }
                    }
                });

I've seen around to do something like this

columns: [
          Data1,
          Data2,
          Data3
],

Is there any way I can put those arrays into one variable to pass into the c3 graph? I've tried making an array of arrays and passing that in. I've also tried putting them into an object, but that just blew it up too. Any help would be appreciated!

If you make an array of arrays, it should work as shown in the functioning example in the answer I gave below. Unless you post the actual data for array1, array2 and array3, I can't tell if they have the correct data to make the graph work. (Your code also has `array 3` instead of `array3` as the variable name, so I assume this isn't 100% the actual code you're running). Can you either post your code/array data, or let me know where the answer I've given isn't working for you? — Sean, Jun 05 '15 at 13:11

score 2 · Answer 1 · answered Jun 04 '15 at 14:57

Should be pretty straight-forward to get the three arrays into an array of arrays, which is the columns array.

var array1 = ['data1', 30, 200, 100, 400, 150, 250];
var array2 = ['data2', 50, 20, 10, 40, 15, 25];
var array3 = ['data3', 230, 190, 300, 500, 300, 400];
var Data = [array1, array2, array3];

c3.generate({
  bindto: '.timeline',
  data: {
    columns: Data
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class='timeline' />

Thank you for the answer! My code was actually working, but I couldn't see it because they all shared the same category and all the values were at 0 so it looked like only the first line was being drawn. — zazvorniki, Jun 08 '15 at 14:23

passing multiple arrays to c3 graph

1 Answers1