amCharts rollbare und Aktualisierung pro Minute UI

Question

Ich versuche, zu sehen, wie eine scrollbare amCharts Liniendiagramm haben, genau wie diese

ist hier ein JSFiddle von dem, was ich rede. https://jsfiddle.net/6nchebyu/1/

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<div id="chartdiv"></div>       


var chartData = generateChartData(); 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "marginRight": 80, 
    "autoMarginOffset": 20, 
    "marginTop": 7, 
    "dataProvider": chartData, 
    "valueAxes": [{ 
     "axisAlpha": 0.2, 
     "dashLength": 1, 
     "position": "left" 
    }], 
    "mouseWheelZoomEnabled": true, 
    "graphs": [{ 
     "id": "g1", 
     "balloonText": "[[value]]", 
     "bullet": "round", 
     "bulletBorderAlpha": 1, 
     "bulletColor": "#FFFFFF", 
     "hideBulletsCount": 50, 
     "title": "red line", 
     "valueField": "visits", 
     "useLineColorForBulletBorder": true, 
     "balloon":{ 
      "drop":true 
     } 
    }], 
    "chartScrollbar": { 
     "autoGridCount": true, 
     "graph": "g1", 
     "scrollbarHeight": 40 
    }, 
    "chartCursor": { 
     "limitToGraph":"g1" 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
     "parseDates": true, 
     "axisColor": "#DADADA", 
     "dashLength": 1, 
     "minorGridEnabled": true 
    }, 
    "export": { 
     "enabled": true 
    } 
}); 

chart.addListener("rendered", zoomChart); 
zoomChart(); 

// this method is called when chart is first inited as we listen for "rendered" event 
function zoomChart() { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    chart.zoomToIndexes(chartData.length - 40, chartData.length - 1); 
} 


// generate some random data, quite different range 
function generateChartData() { 
    var chartData = []; 
    var firstDate = new Date(); 
    firstDate.setDate(firstDate.getDate() - 5); 

    for (var i = 0; i < 1000; i++) { 
     // we create date objects here. In your data, you can have date strings 
     // and then set format of your dates using chart.dataDateFormat property, 
     // however when possible, use date objects, as this will speed up chart rendering. 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 

     var visits = Math.round(Math.random() * (40 + i/5)) + 20 + i; 

     chartData.push({ 
      date: newDate, 
      visits: visits 
     }); 
    } 
    return chartData; 
} 

Aber ich will es jede Minute und nicht die „Reset“ die Ansicht Port aktualisieren, wenn Sie bei älteren Daten suchen (Ein- oder Auszoomen). Vielleicht haben Sie eine Taste, um es zurück nach vorne zu setzen und dann die aktuellen Daten angezeigt zu bekommen? Ist das möglich, all das zu haben?

Answer 1

Ich habe es ein wenig nach dem Erstellen dieses Themas herausgefunden.

chart.zoomOutOnDataUpdate = false; 
    var j = 101; 
    setInterval(function() { 
     var x = j++, 
      y = (Math.random() * 50) + 50; 

     chart.dataProvider.shift(); 
     chart. 

    dataProvider.push({ 
     date: x, 
     visits: y 
    }); 

    // chart.dataChanged(); 
    chart.validateData(); 
}, 1000); 

Das chart.zoomOutOnDataUpdate = false; Macht es so, dass es nicht weiter einzoomt.

chart.dataProvider.shift() schiebt den ersten Datenpunkt vom Bildschirm. An dieser Stelle muss ich nur eine benutzerdefinierte Schaltfläche hinzufügen, um zoomOutOnDataUpdate = true festzulegen, wenn ich darauf klicke. Und vielleicht ändern Sie es auch in false, wenn ich verkleinern oder vergrößern.