Динамически добавлять точки данных к диаграмме Рикши

Question

Так что я использую графическую библиотеку Rickshaw, и мне было интересно, как динамически добавлять точки к графику.

У меня есть график инстанцированный так:

 @seriesData = [ [], [], [] ] 
     random = new Rickshaw.Fixtures.RandomData(150) 


     for (var i = 0; i < 50; i++) { 
      random.addData(self.seriesData) 
     } 


     @graph = new Rickshaw.Graph(
      element: document.getElementById("chart") 
      width: 550 
      height: 300 
      renderer: 'area' 
      series: [ 
       { 
        color: "#c05020" 
        data: self.seriesData[0] 
        name: 'One' 
       }, { 
        color: "#30c020" 
        data: self.seriesData[1] 
        name: 'Two' 
       }, { 
        color: "#2791d7" 
        data: self.seriesData[2] 
        name: 'Three' 
       } 
      ] 
     ) 

     @graph.render() 

     hoverDetail = new Rickshaw.Graph.HoverDetail(
      graph: self.graph 
     ) 

     legend = new Rickshaw.Graph.Legend(
      graph: self.graph 
      element: document.getElementById('legend') 

     ) 

     shelving = new Rickshaw.Graph.Behavior.Series.Toggle(
      graph: self.graph 
      legend: legend 
     ) 

     axes = new Rickshaw.Graph.Axis.Time(
      graph: self.graph 
     ) 
     axes.render() 

И у меня есть данные, поступающие через Socket.io так:

app.on('data', 
     (one, two, three) => 
      // Dynamically add data points to graph 
    ) 

И мне было интересно, как добавить эти три точки график. Я не могу найти хорошую документацию для этой библиотеки. Я знаю, что он построен поверх d3.js, но я не уверен, как включить эти методы в мой график.

Любая помощь будет оценена по достоинству.

Answer 1

Я предвижу два сценария, которые могли бы решить ваш вопрос:

• Использование fixed Window Series for Streaming Data
• используя тот факт, что массивы в JavaScript передаются по ссылке. Доступна демонстрационная версия here

.

var data = [ 
     { 
      data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ], 
      color: "#c05020" 
     }, { 
      data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ], 
      color: "#30c020" 
     } 
]; 


var graph = new Rickshaw.Graph({ 
    element: document.getElementById("chart"), 
    renderer: 'line', 
    height: 300, 
    width: 800, 
    series: data 
}); 

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

graph.render(); 


$('button#add').click(function() { 
    data.push({ 
      data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ], 
      color: "#6060c0" 
    }); 
    graph.update(); 
});