Jak oznaczać dyskretne punkty na wykresie szeregów czasowych za pomocą D3/Rickshaw?

Question

Używam Rickshaw do tworzenia aktualizowanego na żywo wykresu szeregów czasowych.

Oto demo: http://abhshkdz.github.io/icuvisualanalytics/prototypes/rickshaw.html

Dane w formacie csv (czas, wartość), a to jest podstawą javascript do wizualizacji:

var count = 0, index=0; 

var margin = {top: 10, right: 10, bottom: 10, left: 10}, 
    width = window.innerWidth - margin.right - margin.left - 100, 
    height = window.innerHeight - margin.top - margin.bottom - 100; 

var graph = new Rickshaw.Graph({ 
    element: document.querySelector("#chart"), 
    width: width, 
    height: height, 
    renderer: 'line', 
    min: -300, 
    max: 500, 
    preserve: true, 
    series: new Rickshaw.Series.FixedDuration(
     [ 
      { 
       name: 'ECG', 
       color: palette.color() 
      } 
     ], 
     undefined, 
     { 
      timeInterval: 12.5, 
      maxDataPoints: 400, 
      timeBase: data[index][count].x 
     }) 
    }) 

var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph }); 

var y_axis = new Rickshaw.Graph.Axis.Y({ 
     graph: graph, 
     orientation: 'left', 
     tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
     element: document.getElementById('y_axis') 
}); 

var hoverDetail = new Rickshaw.Graph.HoverDetail({ 
    graph: graph 
}); 

graph.render(); 

setInterval(function() { 

    if (count == 2397) { 
     count = 0; 
     index++; 
    } 
    var d = {'ECG': data[index][count+=3].y}; 
    graph.series.addData(d); 
    graph.render(); 

}, 12.5); 

Teraz jest inny zestaw danych który jest generowany przez algorytm. Te dane są również w formacie csv (czas, wartość). Zasadniczo znajduje szczyty tego spisku. Korzystając z tych danych, chcę zaznaczyć te punkty na tej wizualizacji.

O ile mi się wydawało, Rickshaw nie wspiera natywnie wielu serii przy użyciu różnych rendererów (oba muszą być liniami lub wykresami rozproszonymi itp.).

Więc jak mam to zrobić?

Answer 1

Funkcja wielu renderer została dodana około miesiąc temu. Ten example pokazuje, jak połączyć kilka renderers w jednym wykresie. Odpowiedni kod przykładu:

var graph = new Rickshaw.Graph({ 
    element: document.getElementById("chart"), 
    renderer: 'multi', 
    width: 900, 
    height: 500, 
    dotSize: 2, 
    series: [ 
     { 
      name: 'temperature', 
      data: seriesData.shift(), 
      color: 'rgba(255, 0, 0, 0.4)', 
      renderer: 'stack' 
     }, { 
      name: 'heat index', 
      data: seriesData.shift(), 
      color: 'rgba(255, 127, 0, 0.4)', 
      renderer: 'stack' 
     }, { 
      name: 'dewpoint', 
      data: seriesData.shift(), 
      color: 'rgba(127, 0, 0, 0.3)', 
      renderer: 'scatterplot' 
     }, { 
      name: 'pop', 
      data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y/4 } }), 
      color: 'rgba(0, 0, 127, 0.4)', 
      renderer: 'bar' 
     }, { 
      name: 'humidity', 
      data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y * 1.5 } }), 
      renderer: 'line', 
      color: 'rgba(0, 0, 127, 0.25)' 
     } 
    ] 
});