Google 차트로 라인 차트 애니메이션 스크롤

Question

Google 차트에서 꺾은 선형 차트로 스크롤 애니메이션을 만들려고합니다. 외부 데이터 소스의 실시간 데이터를 표시하려고하므로 내 데이터 테이블을 미리 채울 수 없으며 특정 크기 일 수 없습니다.

내 일반적인 아이디어는 스크롤 창 (여기 마지막 예제 참조)을 사용하여 창 뒤의 데이터를 제거하고 창 앞에 데이터를 추가하는 동안 창을 앞으로 이동시키는 것입니다.

지금까지 내 진행은 다음과 같습니다 http://jsfiddle.net/svantetobias/knt7F/

HTML :

<div id="google_chart_div" width="750" height="400"></div> 
<input id="next" type="button" value="Next reading"> 

자바 스크립트 : 다음

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', { 
    'packages': ['corechart'] 
}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(loadChart); 

function loadChart() { 
    // Set chart options 
    var options = { 
     width: 1000, 
     height: 400, 
     vAxis: { 
      minValue: 0, 
      maxValue: 100 
     }, 
     hAxis: { 
      viewWindow: { 
       min: 1, 
       max: 5 
      } 
     }, 
     curveType: 'none', // or 'function' 
     pointSize: 5, 
     series: { 
      0: { 
       color: 'Blue' 
      }, 
      1: { 
       color: 'Orange' 
      } 
     }, 
     animation: { 
      duration: 1000, 
      easing: 'linear' 
     } 
    }; 

    // Create the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Time', 'series1', 'series2'], 
     ['2014 23/07 13:00', 700, 900], 
     ['2014 23/07 14:00', 850, 900], 
     ['2014 23/07 15:00', 1000, 900], 
     ['2014 23/07 16:00', 1050, 900], 
     ['2014 23/07 17:00', 700, 900], 
     ['2014 23/07 18:00', 650, 900], 
     ['2014 23/07 19:00', 700, 900], 
     ['2014 23/07 20:00', 950, 900] 
    ]); 

    // Instantiate our chart 
    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div')); 

    // Define button 
    var button = document.getElementById('next'); 

    function drawChart() { 
     // Disabling the button while the chart is drawing. 
     button.disabled = true; 
     google.visualization.events.addListener(chart, 'ready', function() { 
      button.disabled = false; 
     }); 
     // Draw chart 
     chart.draw(data, options); 
    } 

    button.onclick = function() { 
     //data.removeRow(0); 
     data.insertRows(data.getNumberOfRows(), [ 
      ['2014 23/07 20:00', Math.floor((Math.random() * (1400 - 600)) + 600), 900] 
     ]); 
     options.hAxis.viewWindow.min += 1; 
     options.hAxis.viewWindow.max += 1; 
     drawChart(); 


    }; 
    drawChart(); 
} 

내가 원하는 것 같습니다 처음 몇 애니메이션

하지만, 선이 이상한 파도를 만들기 시작합니다. 스크롤 창과 같이 제대로 애니메이트하려면 어떻게해야합니까?

Answer 1

문제는 동일한 날짜를 반복해서 추가하는 것이므로 차트에 결과를 보간하는 데 어려움이 있습니다. http://jsfiddle.net/KaU3y/ 또는 다음을 시도하십시오.

data.insertRows(data.getNumberOfRows(), [ 
     ['' + new Date(), Math.floor((Math.random() * (1400 - 600)) + 600), 900] 
    ]);