Изменение источника данных/серии на графике RickShaw

Question

Использование библиотеки графических данных javascript RickShaw (https://github.com/shutterstock/rickshaw) У меня есть ряд рядов данных и список переключателей, по одному для каждой серии данных.

var graphSeries1 = [ 
    [{ 
     data: [{ x: 1, y: 110 }, { x: 2, y: 220 }, { x: 3, y: 330 }, { x: 4, y: 440 }, { x: 5, y: 550 }], 
     color: palette.color() 
    }], 
    [{ 
     data: [{ x: 1, y: 5 }, { x: 2, y: 7 }, { x: 3, y: 18 }, { x: 4, y: 20 }, { x: 5, y: 30 }], 
     color: palette.color() 
    }], 
    [{ 
     data: [{ x: 1, y: 105 }, { x: 2, y: 210 }, { x: 3, y: 310 }, { x: 4, y: 405 }, { x: 5, y: 515 }], 
     color: palette.color() 
    }], 
    [{ 
     data: [{ x: 1, y: 5 }, { x: 2, y: 13 }, { x: 3, y: 12 }, { x: 4, y: 20 }, { x: 5, y: 20 }], 
     color: palette.color() 
    }], 
    [{ 
     data: [{ x: 1, y: 100 }, { x: 2, y: 200 }, { x: 3, y: 300 }, { x: 4, y: 400 }, { x: 5, y: 500 }], 
     color: palette.color() 
    }] 
]; 

Радио кнопка, чтобы позволить пользователю изменять отображаемые данные:

<div class="chart_container"> 
    <div id="y_axisDailtStats"></div> 
    <div id="chartDailyStats"></div> 
    <form class="row"> 
     <div class="input-field col s4"> 
      <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe1" value="0" /> 
      <label for="DailyStatTimeframe1">Previous Day</label> 
     </div> 
     <div class="input-field col s4"> 
      <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe7" value="1" checked /> 
      <label for="DailyStatTimeframe7">Last 7 Days</label> 
     </div> 
     <div class="input-field col s4"> 
      <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe30" value="2" /> 
      <label for="DailyStatTimeframe30">Last 30 Days</label> 
     </div> 
     <div class="input-field col s4"> 
      <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe91" value="3" /> 
      <label for="DailyStatTimeframe91">Quarter to date</label> 
     </div> 
     <div class="input-field col s4"> 
      <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe365" value="4" /> 
      <label for="DailyStatTimeframe365">Year to day</label> 
     </div> 
    </form> 
</div> 

Я отображение исходного набора данных на графике и пытаюсь обновить график для отображения и альтернативный ряд данных, когда выбран соответствующий переключатель.

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

$("input[name=DailyStatTimeframe]").change(function (e) { 
    // Remove existing graph from DOM... 
    var myNode = document.getElementById("chartDailyStats"); 
    while (myNode.firstChild) { 
     myNode.removeChild(myNode.firstChild); 
    } 

    // Create new graph object... 
    graph1 = new Rickshaw.Graph({ 
     element: document.querySelector("#chartDailyStats"), 
     renderer: 'bar', 
     height: 360, 
     unstack: true, 
     series: graphSeries1[e.target.value] 
    }); 
    graph1.render(); 
}); 

Кто-нибудь знает лучшего способа сделать это: https://jsfiddle.net/techwareone/ftwcjjbo/

Answer 1

Вы можете просто обновить объект, связанный с серией. Вы должны изменить свой код немного, как и

var data = []; 
data.push(graphSeries1[1][0]); 
var graph1 = new Rickshaw.Graph({ 
    element: document.querySelector("#chartDailyStats"), 
    renderer: 'bar', 
    height: 360, 
    unstack: true, 
    series: data 
}); 
... 

и

$("input[name=DailyStatTimeframe]").change(function (e) { 
    data[0] = graphSeries1[e.target.value][0]; 
    graph1.update(); 
}); 

---

Fiddle - https://jsfiddle.net/96L9p5kp/