Highcharts grafiği csv dosyasından dinamik olarak günceller

Highcharts belgeler sayfasında dynamic spline jsfiddle çalışıyorum. Orada, verileri güncellemek ve seriye eklemek için Math.random() kullanıyorlar.Highcharts grafiği csv dosyasından dinamik olarak günceller

doc itibaren

, ben de csv files tipik tek seferde yüklemek için nasıl biliyor (ya rapid highcharts mükemmel kodunu kullanarak:

function parseCSVData(csvFile) { 
var data = [] 
var lines = csvFile.split("\n") 
$.each(lines, function (lineNumber, line) { 
    var fields = line.split(","); 
    if (fields.length == 2){ 
     var timestamp = Date.parse(fields[0]) 
     var value = parseFloat(fields[1]); 
     data.push([timestamp, value]) 
    } 
}) 
return data}

)

Ne yapmak istiyorum şudur:

csv dosyasının bir satırı oku
grafiğini güncelleyin
için 91.363.210
duraklama dosyası

ve dolayısıyla bir gerçek zamanlı uygulamayı taklit sonuna kadar yukarıdaki yeniden. Bununla birlikte, daha önce hangi satırların okunduğunu takip etmenin bir yolu olmadığından, 'un altına koyamıyorum. Verileri gerçek zamanlı olarak çektikleri örnekler, benim için çok gelişmiş ve zaten benim durumumda kullanılamayan bir çeşit api veya websocket kullanıyor.
benim csv dosyası şuna benzer ki: (sample.csv)

t observed 1 19 2 12 3 28 4 17 5 85 6 22 7 86 8 16 9 90 10 93 11 39 12 96 13 42 14 74 15 100 16 22 17 41 18 32

nispeten kolay bir şekilde yukarıdaki adımları gerçekleştirmek için bir yolu var mı? my jsfiddle

kaynak

2016-04-07 Pep

bunu spline örnekte olduğu gibi yapabilirsiniz http://jsfiddle.net/qkxda04n/: En koduna göre

Örnek? onlar orada var olan bir yerleşim, onlar veri güncellemek için math.random kullanmayın, onlar rastgele veri üretmek için kullanırlar, setTimeout ne güncelleştirir bize grafik bir keman içinde nasıl görünüyor bize gösterebilir? – JordanHendrix

Yeni veriler oluşturmak ve seriye her saniye eklemek için 'setInterval' kullanırlar. Şimdiye kadar hangi satırların okunduğunu takip etmem gerektiğinden bunu yapamam. 'event: load' altındaki herhangi bir kod, önceki işlemlerin bir referansını tutamazdı. Gerçekten çalışan bir keman yok, ama buna en yakın olan: https://jsfiddle.net/f2ph7jap/ – Pep

Tüm CSV verilerini bir diziye ayrıştırma ile başlayabilirsiniz. Ardından, tüm dizi eklenene kadar bu dizi "setInterval" içinde yinelenecek, ardından aralığı temizleyecektir. Dizi ve yineleyici dışında aralık fonksiyonu tanımlayın, böylece tüm yineleme boyunca erişilebilir olacaktır. –

Bir sonraki dizi dizini için bir değişken tutmaya ne dersiniz? Eğer üzerinde yineleme setInterval dışında tanımlanan yineleyici kullanarak veri dizisi çözümlenen olacaksa

setInterval(function() { 
    if(window.nextIndex===undefined){ 
     window.nextIndex=0; 
    }else{ 
     window.nextIndex++; 
    }       
    series.addPoint(data[window.nextIndex], true, true); 
}, 1000);

kaynak

2016-04-11 17:50:36

, o zaman her tekrarında noktayı yükleyebilir. Yineleyici mevcut verilerin uzunluğuna ulaştığında, aralığı clearInterval kullanarak temizleyebilirsiniz.

JSFiddle demosu amacı ile HTML'den CSV verilerini yükleyelim.

kaynak

2016-04-13 11:52:37

Teşekkürler, bu tam olarak ihtiyacım olan şey. Biraz ilgisiz, ancak Zoom seviyesini ve "From" "To" dan çıkarmak mümkün mü? – Pep

@Pep Evet, sadece rangeSelector öğesini ayarlayın: {enabled: false}, - örnek: http://jsfiddle.net/qkxda04n/1/ –

Highcharts grafiği csv dosyasından dinamik olarak günceller

cevap

İlgili konular