Mit demselben JSON-Schlüssel für verschiedene Daten mit C3.js

Question

Ich möchte zwei verschiedene Zeitreihendaten gleichzeitig mit C3.js plotten, und sie sind in JSON-Variablen mit der gleichen Struktur gespeichert (siehe unten).

Mit dem folgenden Code wird das Diagramm vom zweiten Dataset überschrieben und kann zwei Daten nicht überlagern. Ich denke, es wird durch die Verwendung des gleichen Schlüssels für verschiedene Daten verursacht. Wie kann es gelöst werden?

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     json: jsonVariable1, 
     keys: { 
      x: 'Time', 
      value: ['Value'] 
     }, 
     names: { 
      Value: 'Past Fatigue' 
     }, 
     types: { 
      Value: 'area' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d', 
       count: 5 
      } 
     } 
    }, 
    zoom: { 
     enabled: true 
    } 
}); 

setTimeout(function() { 
    chart.load({ 
     json: jsonVariable2, 
     keys: { 
      x: 'Time', 
      value: ['Value'] 
     }, 
     types: { 
      Value: 'area' 
     } 
    }); 
}, 2000); 



jsonVariable1 
"[{"Time":"2016-03-24T04:54:27.580Z","Value":0},{"Time":"2016-03-24T20:12:00.000Z","Value":15.292338671638888},{"Time":"2016-03-24T20:26:00.000Z","Value":14.592338671638888},{"Time":"2016-03-24T21:26:00.000Z","Value":15.592338671638888},{"Time":"2016-03-24T21:52:00.000Z","Value":15.159005338305555},{"Time":"2016-03-24T22:07:00.000Z","Value":14.409005338305555},{"Time":"2016-03-24T22:14:00.000Z","Value":14.292338671638888},{"Time":"2016-03-24T22:26:00.000Z","Value":13.692338671638888},{"Time":"2016-03-24T23:32:00.000Z","Value":14.792338671638888},{"Time":"2016-03-24T23:39:00.000Z","Value":14.67567200497222},{"Time":"2016-03-25T00:05:00.000Z","Value":13.37567200497222},{"Time":"2016-03-25T00:22:00.000Z","Value":13.092338671638887},{"Time":"2016-03-25T00:26:00.000Z","Value":12.892338671638887},{"Time":"2016-03-25T00:36:00.000Z","Value":12.392338671638887},{"Time":"2016-03-25T01:01:00.000Z","Value":11.975672004972221},{"Time":"2016-03-25T01:14:00.000Z","Value":11.32567200497222},{"Time":"2016-03-25T01:27:00.000Z","Value":11.109005338305554}]" 

jsonVariable2 
"[{"Time":"2016-03-25T19:37:00.000Z","Value":29.27567200497222},{"Time":"2016-03-25T19:43:00.000Z","Value":29.175672004972217},{"Time":"2016-03-25T20:02:00.000Z","Value":28.225672004972218},{"Time":"2016-03-25T20:07:00.000Z","Value":28.142338671638885},{"Time":"2016-03-25T20:13:00.000Z","Value":28.042338671638884},{"Time":"2016-03-25T20:25:00.000Z","Value":27.442338671638883},{"Time":"2016-03-25T20:27:00.000Z","Value":27.409005338305548},{"Time":"2016-03-25T23:02:00.000Z","Value":29.99233867163888},{"Time":"2016-03-25T23:09:00.000Z","Value":29.875672004972213},{"Time":"2016-03-25T23:27:00.000Z","Value":28.975672004972214},{"Time":"2016-03-25T23:35:00.000Z","Value":28.575672004972215},{"Time":"2016-03-26T00:07:00.000Z","Value":28.04233867163888},{"Time":"2016-03-26T00:27:00.000Z","Value":27.04233867163888},{"Time":"2016-03-26T02:45:00.000Z","Value":29.34233867163888},{"Time":"2016-03-26T02:49:00.000Z","Value":29.275672004972215},{"Time":"2016-03-26T04:54:27.580Z","Value":31.36666666666666}]" 

Answer 1

Sie können die Daten fertig wie map unter Verwendung gezeigt:

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     columns: [ 
     x1,//jsonVariable 1 date 
     x2,//jsonVariable 2 date 
     data1,//jsonVariable 1 value 
     data2////jsonVariable 2 value 
     ], 
     xFormat: '%Y-%m-%dT%H:%M:%S.%LZ', 
     xs: { 
     'data1': 'x1', 
     'data2': 'x2', 
     }, 
     names: { 
     Value: 'Past Fatigue' 
     }, 
     types: { 
     data1: 'area', 
     data2: 'area' 
     } 
    }, 
    axis: { 
     x: { 
     type: 'timeseries', 
     tick: { 
      format: '%Y-%m-%dT%H:%M:%S.%LZ', 
      count: 5 
     } 
     } 
    }, 
    zoom: { 
     enabled: true 
    } 
    }); 

Arbeits Code here

:

var x1 = jsonVariable1.map(function(d) { 
    return d.Time 
    }); 
    x1.unshift("x1") 
    var x2 = jsonVariable2.map(function(d) { 
    return d.Time 
    }); 

    x2.unshift("x2") 
    var data1 = jsonVariable1.map(function(d) { 
    return d.Value 
    }); 
    data1.unshift("data1") 

    var data2 = jsonVariable2.map(function(d) { 
    return d.Value 
    }); 
    data2.unshift("data2") 

Dann c3 Konfiguration wie unten mit neuen Datensatz definieren