2012-11-20 3 views
1

Jquery/Flot 플러그인을 사용하여 웹 응용 프로그램을 개발 중이며 30.000 데이터 포인트의 일부 timeseries를 표시해야합니다. 엄청난 양의 데이터로 인해 모든 브라우저에서 퍼머넌트 문제가 발생합니다. 물론 모든 데이터 포인트를 화면에 표시 할 필요는 없으며 400px 차트에서는 불가능합니다. 내 일반적인 생각은 "가장 중요한 데이터"만 표시하므로 좋은 실적과 적절한 차트 정확도를 유지하기위한 모범 사례/제안이 필요합니다.jquery로 많은 양의 데이터 표시 Flot

+0

대역폭 사용을 줄이기 위해 서버 측 다운 샘플링 (PHP 서버 측)을 고려 중입니다 – Nibbiolo

+1

명확한 것 이외의 다른 응답을 기대하는 응답이 무엇인지 확실하지 않습니다 ... – charlietfl

+0

관련 : http : //stackoverflow.com/questions/4674544/graph-plotting-only-keeping-most-relevant-data – Mark

답변

2

차트가 400px 너비라면 서버 측 코드는 400 점 이상을 브라우저에 보내십시오.

예를 들어, 매분마다 포인트가있는 시계열 데이터가있는 경우 한 가지 해결책은 한 시간 동안 모든 값의 평균을 구하는 것입니다. 즉, 30k 포인트를 500으로 낮추는 것입니다. 데이터가 데이터베이스에서 나왔습니다. 귀하의 검색어는 대략 다음과 같이 보일 수 있습니다.

SELECT truncate_to_hour(data_time) as sample_time, avg(data_value) 
FROM values 
GROUP BY sample_time 

하지만 분명히 최고의 모범 사례는 없습니다. 귀하의 데이터에 따라 다릅니다.

+0

I 한 걸음 더 나아가서 픽셀 당 1 포인트를 갖는 것이 너무 많으면 포인트 당 3 픽셀 (400/3 = 133)과 같아야하지만 5는 이상적 (400/5 = 80)이어야한다고 말합니다. Flot 그래프의 각 점은 시각적으로 1 픽셀 이상이므로 400을 사용할 수 없다는 점에 유의하십시오. – TravisO

+0

이론 상으로는 최대 1ppp의 이점을 얻을 수 있습니다 - 어떤 종류의 매력적인 스플라인을 상상해보십시오. 그러나 실제로는 대부분의 실제 사용 사례에서 각 점 사이에 최소한 몇 픽셀 만 있으면됩니다. – DNS

+1

나는 무엇을 얻고 있는지 보지만, FLOT 그래프의 한 점이 실제로 1 픽셀보다 클 때 마우스를 정확히 가져 가거나 제대로 볼 수 없으므로 3을 말하는 이유는 무엇입니까? 1 포인트 당 5 픽셀. – TravisO

관련 문제