2014-10-14 13 views
0

데이터를 수집하는 csv가 있습니다.dygraphs에 YYYY-MM-DD HH : MM : SS 범위를 표시하는 방법

다음
date_time,temp 
2014-10-14 03:37:56,21.50 
2014-10-14 03:53:04,21.56 
2014-10-14 04:08:12,21.50 
2014-10-14 04:23:19,21.50 
2014-10-14 04:38:27,21.44 
2014-10-14 04:53:35,21.50 
2014-10-14 05:08:43,21.50 
2014-10-14 05:23:51,21.44 
2014-10-14 05:38:58,21.38 
2014-10-14 05:54:06,21.44 
2014-10-14 06:09:14,21.44 
2014-10-14 06:24:22,21.38 
2014-10-14 06:39:29,21.38 
2014-10-14 06:54:37,21.38 

내가 가진 HTML 파일이 코드 : 제대로 작동하지만 내가 특정 날짜와 시간 기간을 선택할 수있는 가능성을 가지고 싶습니다

<html> 
<head> 
<script type="text/javascript" src="dygraph-combined.js"></script> 
</head> 
<body> 
<div id="labeldiv" style="width:100%; height:20px;"></div> 
<div id="graphdiv" style="width:100%; height:600px;"></div> 
<script type="text/javascript"> 
    g = new Dygraph( 
    document.getElementById("graphdiv"), 
    "test.csv", 
    { 
    strokeWidth: 2.5, 
    labelsSeparateLines: false, 
    labelsDiv: "labeldiv", 
    legend: "always", 
    showRangeSelector: true, 
    } 
); 
</script> 
</body> 
</html> 

및 CSV는 다음과 같습니다 CSV에서 전체 기간을 표시하지 않습니다. dateWindow: ["2014-10-14 04:53:35","2014-10-14 06:09:14"]과 같은 매개 변수를 지정하려고했지만 작동하지 않는 것 같습니다.

아무도 도와 줄 수 있습니까? 노력하고있는 것처럼 그것을 할 수 있습니까? dateWindow에서 사용하기 전에 YYYY-MM-DD HH : MM : SS를 다른 것으로 변환해야합니까?

답변

1

documentation for dateWindow 상태 :

초기 그래프의 단면을 확대. [가장 이른 것, 최신]의 형태이며, 가장 이른/가장 늦은 시간은 기원 이후의 밀리 초입니다. x 축의 데이터가 숫자 인 경우 dateWindow의 값도 숫자 여야합니다.

유형 : 두 숫자
기본의 배열 : 입력의 전체 범위는

그래서 당신은 설정해야 표시됩니다 : 나는 해결 방법을 사용하고있다

dateWindow: [Date.parse("2014-10-14 04:53:35"), 
      Date.parse("2014-10-14 06:09:14")] 
+0

dateWindow : [Date.parse ("2014-10-14 04:53:35"), Date.parse ("2014-10-14 06:09:14")] ** ** 작동하지 않았습니다. ** 그러나 그때 나는 이것이 작동하는 것을 발견했다 : dateWindow : [Date.parse ("2014/10/14 04:53:35"), Date.parse ("2014/10/14 06:09:14") ] ** 그래서 대시 대신 슬래시를 사용해야합니다. ** 어쨌든 좋은 힌트를 주셔서 감사합니다! – stacky33

+0

"작동하지 않았다"는 의미를 명확히 할 수 있습니까? 슬래시 대 대시는 데이터가 현지 시간 또는 UTC를 사용하여 파싱되는지 여부를 결정합니다. http://blog.dygraphs.com/2012/03/javascript-and-dates-what-mess.html을 참조하십시오. – danvk

+0

나는이 형식이'2014-10-14 03 : 37 : 56,21.50'이고'dateWindow : [Date.parse ("2014-10-14 04:53:35"), Date를 사용할 때 CSV를 가지고있다.parse ("2014-10-14 06:09:14")]'이면 그래프 선이 그려지지 않고 범위 선택기가 완전히 왼쪽 - 범위를 벗어났습니다. 'dateWindow : [Date.parse ("2014/10/14 04:53:35"), Date.parse ("2014/10/14 06:09:14")]'로 전환하면 그래프가 그려집니다 올바르게 선택하고 범위를 올바르게 선택하십시오. 나는 Firefox 32.0을 사용한다. – stacky33

0

. dygraph는 PHP 페이지에서 호출하여 (마지막 24 시간, 지난주, 지난 달 또는 모든 것) 표시 할 데이터를 선택합니다. 빅 데이터 파일의 경우 모든 것을 전송할 필요가 없으며 다이 그래프가 느리기 때문에가 아니라 속도가 느릴 수 있습니다 (실제로는 아닙니다).하지만 와이어를 통해 보낼 데이터가 적기 때문에 더 빠릅니다. 데이터 선택이로드되면 더 작은 섹션을 쉽게 선택할 수 있지만 더 큰 선택을 원할 경우 호출 페이지로 돌아 가야합니다.

+0

예, 저의 "프로젝트"가 mysql 데이터베이스 테이블에 온도를 저장하도록 변경했으며 데이터베이스에서 원하는 기간 만 가져 오는 PHP 스크립트를 만들었습니다. – stacky33

0

시간 경과 데이터를 저장하기 위해 mysql 데이터베이스를 사용하는 것은 과도한 것으로 보이지만 그 방법 중 하나입니다. 나는 일반적으로 여러 명의 동시 사용자가 개별 레코드를 액세스하고 수정해야하거나 여러 기준에 따라 데이터를 정렬해야하는 경우 데이터베이스를 예약합니다. 시간 경과 데이터의 경우 추가하는 쉼표로 분리 된 플랫 파일이 훨씬 효율적입니다. 필자의 경우, 파일에 저장하기 전에 날짜/시간 스탬프를 Unix 시간 변수 형식으로 변환합니다. 그러면 나중에 시간 프레임을 쉽게 선택할 수 있습니다. 그런 다음 시간 변수를 브라우저로 보내기 전에 PHP에서 사람이 읽을 수있는 시간/날짜 문자열 형식으로 변환하거나 다이 그래프로 보내기 전에 JavaScript에서 변환 할 수 있습니다.