c3.js Mehrzeilendiagramme mit fehlenden Daten/verschiedenen x-Werten

Question

Ich habe ein Problem mit c3.js mit Multi-Liniendiagramm und verschiedenen x-Werten in jeder Zeile. Zum Beispiel:

data1 = [ 
    { 
    "date": 1470520800000, 
    "admin": 10 
    }, 
    { 
    "date": 1470607200000, 
    "admin": 10.06 
    }, 
    { 
    "date": 1470693600000, 
    "admin": 10.03 
    }, 
    { 
    "date": 1470780000000, 
    "admin": 10 
    }, 
    { 
    "date": 1470866400000, 
    "admin": 10.05 
    }, 
    { 
    "date": 1470952800000, 
    "admin": 10 
    } 
]; 

data2 = [ 
    { 
    "date": 1470607200000, 
    "user": 94.66 
    }, 
    { 
    "date": 1470693600000, 
    "user": 316.58 
    }, 
    { 
    "date": 1470780000000, 
    "user": 10 
    }, 
    { 
    "date": 1470866400000, 
    "user": 1.5 
    }, 
    { 
    "date": 1470952800000, 
    "user": 12 
    } 
]; 

    var chart = c3.generate({ 
     data: { 
      json: data1, 
      keys: { 
       x: 'date', 
       value: ["admin"] 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        format: function (x) { return x.toLocaleDateString(); } 
       } 
      } 
     }, 
     padding: { 
      right: 50 
     } 
    }); 

    chart.load({ 
       json: data2, 
       keys: { 
        x: "date", 
        value: ['user'] 
       } 
      }); 

Daten nicht gut an, wenn ich Fucus auf sie mit meiner Maus. Ich poste meinen Code hier https://jsfiddle.net/gahm5wgb/.

Answer 1

Ich habe noch nie c3.js Bibliothek verwendet, aber am Anfang Daten2 dieses Objekt hinzufügen:

{ 
    "date": 1470520800000, 
    "user": 0 
    }, 

Ich denke, Anzahl der Punkte ist nicht gleich - Daten2 hat 1 Punkt weniger. Es sollte dein Problem lösen :-)

Answer 2

Ich finde Lösung für dieses Problem. Sie müssen nur Multiple XY Liniendiagramm verwenden. Beispiel: http://c3js.org/samples/simple_xy_multiple.html