Mehrere Werte auf x-Achsen mit C3JS (Zeitreihe)

Question

Ich habe dieses schöne Diagramm:

Ich habe auch dieses Array für den blauen Teil (Area-Spline).

["x2", "2015-01-05 00:00:00", "2015-01-12 00:00:00", "2015-01-19 00:00:00", "2015-01-26 00:00:00", "2015-02-02 00:00:00", "2015-02-09 00:00:00", "2015-02-16 00:00:00", "2015-02-23 00:00:00", "2015-03-02 00:00:00", "2015-03-09 00:00:00", "2015-03-16 00:00:00", "2015-03-23 00:00:00", "2015-03-30 00:00:00", "2015-04-06 00:00:00", "2015-04-13 00:00:00", "2015-04-20 00:00:00", "2015-04-27 00:00:00", "2015-05-04 00:00:00", "2015-05-11 00:00:00", "2015-05-18 00:00:00", "2015-05-25 00:00:00", "2015-06-01 00:00:00", "2015-06-08 00:00:00", "2015-06-15 00:00:00", "2015-06-22 00:00:00", "2015-06-29 00:00:00", "2015-07-06 00:00:00", "2015-07-13 00:00:00", "2015-07-20 00:00:00", "2015-07-27 00:00:00", "2015-08-03 00:00:00", "2015-08-10 00:00:00", "2015-08-17 00:00:00", "2015-08-24 00:00:00", "2015-08-31 00:00:00", "2015-09-07 00:00:00", "2015-09-14 00:00:00", "2015-09-21 00:00:00", "2015-09-28 00:00:00", "2015-10-05 00:00:00", "2015-10-12 00:00:00", "2015-10-19 00:00:00", "2015-10-26 00:00:00", "2015-11-02 00:00:00", "2015-11-09 00:00:00", "2015-11-16 00:00:00", "2015-11-23 00:00:00", "2015-11-30 00:00:00", "2015-12-07 00:00:00", "2015-12-14 00:00:00", "2015-12-21 00:00:00", "2015-12-28 00:00:00", "2016-01-04 00:00:00", "2016-01-11 00:00:00", "2016-01-18 00:00:00", "2016-01-25 00:00:00", "2016-02-01 00:00:00"] 

Die Kreise auf dem Diagramm haben diese Valuta:

["x1", "2013-12-30 00:00:00", "2014-01-06 00:00:00", "2014-01-13 00:00:00", "2014-01-20 00:00:00", "2014-01-27 00:00:00", "2014-02-03 00:00:00", "2014-02-10 00:00:00", "2014-02-17 00:00:00", "2014-02-24 00:00:00", "2014-03-03 00:00:00", "2014-03-10 00:00:00", "2014-03-17 00:00:00", "2014-03-24 00:00:00", "2014-03-31 00:00:00", "2014-04-07 00:00:00", "2014-04-14 00:00:00", "2014-04-21 00:00:00", "2014-04-28 00:00:00", "2014-05-05 00:00:00", "2014-05-12 00:00:00", "2014-05-19 00:00:00", "2014-05-26 00:00:00", "2014-06-02 00:00:00", "2014-06-09 00:00:00", "2014-06-16 00:00:00", "2014-06-23 00:00:00", "2014-06-30 00:00:00", "2014-07-07 00:00:00", "2014-07-14 00:00:00", "2014-07-21 00:00:00", "2014-07-28 00:00:00", "2014-08-04 00:00:00", "2014-08-11 00:00:00", "2014-08-18 00:00:00", "2014-08-25 00:00:00", "2014-09-01 00:00:00", "2014-09-08 00:00:00", "2014-09-15 00:00:00", "2014-09-22 00:00:00", "2014-09-29 00:00:00", "2014-10-06 00:00:00", "2014-10-13 00:00:00", "2014-10-20 00:00:00", "2014-10-27 00:00:00", "2014-11-03 00:00:00", "2014-11-10 00:00:00", "2014-11-17 00:00:00", "2014-11-24 00:00:00", "2014-12-01 00:00:00", "2014-12-08 00:00:00", "2014-12-15 00:00:00", "2014-12-22 00:00:00", "2014-12-29 00:00:00", "2015-01-05 00:00:00", "2015-01-12 00:00:00", "2015-01-19 00:00:00", "2015-01-26 00:00:00", "2015-02-02 00:00:00", "2015-02-09 00:00:00", "2015-02-16 00:00:00", "2015-02-23 00:00:00", "2015-03-02 00:00:00", "2015-03-09 00:00:00", "2015-03-16 00:00:00", "2015-03-23 00:00:00", "2015-03-30 00:00:00", "2015-04-06 00:00:00", "2015-04-13 00:00:00", "2015-04-20 00:00:00", "2015-04-27 00:00:00", "2015-05-04 00:00:00", "2015-05-11 00:00:00", "2015-05-18 00:00:00", "2015-05-25 00:00:00", "2015-06-01 00:00:00", "2015-06-08 00:00:00", "2015-06-15 00:00:00", "2015-06-22 00:00:00", "2015-06-29 00:00:00", "2015-07-06 00:00:00", "2015-07-13 00:00:00", "2015-07-20 00:00:00", "2015-07-27 00:00:00", "2015-08-03 00:00:00", "2015-08-10 00:00:00", "2015-08-17 00:00:00", "2015-08-24 00:00:00", "2015-08-31 00:00:00", "2015-09-07 00:00:00", "2015-09-14 00:00:00", "2015-09-21 00:00:00", "2015-09-28 00:00:00", "2015-10-05 00:00:00", "2015-10-12 00:00:00", "2015-10-19 00:00:00", "2015-10-26 00:00:00", "2015-11-02 00:00:00", "2015-11-09 00:00:00", "2015-11-16 00:00:00"…] 

Dies ist die x-Achse, was in der Grafik dargestellt ist.

Wie Sie sehen können, habe ich mehrere Werte für die x-Achsen (2 verschiedene Datums-Array).

Die erste beginnt bei 2013.12.03 aber die zweite, wie oben bei 2015 gezeigt beginnt

Wie kann ich das zweite Array ziehen bei 2015 statt statt 2013 zu beginnen?

Graph Code:

chart = c3.generate({ 
     point: { 
     r: function (d) { 
      if (d.id == 'A. v. Hensbergen') { 
      d.parkeerduur = parking_duur_hensbergen[d.index]; 
      return d.parkeerduur; 
      } 

      if (d.id == 'Gemeentehuis') { 
      d.parkeerduur = parking_duur_gemeentehuis[d.index]; 
      return d.parkeerduur; 
      } 

      if (d.id == 'Tricotage') { 
      d.parkeerduur = parking_duur_tricotage[d.index]; 
      return d.parkeerduur; 
      } 


      if (d.id == 'Coornhertpad') { 
      d.parkeerduur = parking_duur_coornhertpad[d.index]; 
      return d.parkeerduur; 
      } 

      if (d.id == 'Duivenweide') { 
      d.parkeerduur = parking_duur_duivenweide[d.index]; 
      return d.parkeerduur; 
      } else { 
      return 3; 
      } 
     } 
     }, 
     xs: { 
     'data1': 'x1', 
     'passanten': 'x2' 
     }, 
     bindto: '#chatterplot_elastic', 
     data: { 
     colors: { 
      passanten: '#007bb0' 
     }, 
     x: 'x1', 
     // @todo should be different based on interval selector. 
     xFormat: '%Y-%m-%d %H:%M:%S', 
     columns: [ 
      getParkingDates(), 
      PassantenData, 
      PassantenDatesData, 
      PassantenData, 
      HensbergenData, 
      GemeentehuisData, 
      CoornhertpadData, 
      DuivenweideData, 
      TricotageData 
     ], 
     axes: { 
      'passanten': 'y', 
      'time_period': "x", 
      'A. v. Hensbergen': 'y2', 
      'Gemeentehuis': 'y2', 
      'Coornhertpad': 'y2', 
      'Duivenweide': 'y2', 
      'Tricotage': 'y2' 
     }, 
     types: { 
      passanten: 'area-spline', 
      'A. v. Hensbergen': 'scatter', 
      'Gemeentehuis': 'scatter', 
      'Coornhertpad': 'scatter', 
      'Duivenweide': 'scatter', 
      'Tricotage': 'scatter' 
     }, 
     onclick: function (e) { 
      updateGraphMapper(e); 
     } 
     }, 
     axis: { 
     y: { 
      label: { 
      text: 'Passanten', 
      position: 'outer-middle' 
      } 
     }, 
     y2: { 
      show: true, 
      min: 0, 
      max: 100, 
      padding: {top: 0, bottom: 0}, 
      label: { 
      text: 'Bezettingsgraad %', 
      position: 'outer-middle' 
      } 
     }, 
     x: { 
      type: 'timeseries', 
      localtime: true, 
      tick: { 
      format: formatX, 
      rotate: 75, 
      multiline: false, 
      culling: { 
       max: 60, 
      }, 
      }, 
     }, 
     }, 
    }); 
    } 

Answer 1

Entfernen Sie diese Zeichenfolge x: 'x1', Nachdem Sie xs param für jede Zeile Namen wie folgt einstellen:

xs: { 
    'data1': 'x1', 
    'passanten': 'x2', 
    'A. v. Hensbergen': 'x1', // or 'x2' 
    'Gemeentehuis': 'x1', // or 'x2' 
    ...... 
    'OTHER COLUMN': 'x2', // or 'x1' 
    }, 

Versuchen Sie dieses Beispiel, Ihr Problem zu sehen: https://jsfiddle.net/xsLgbhwt/