멀티 그래프를 그리는 방법 jquery flot에서 mysql에서 동적으로 가져온 x 축 레이블을 추가하는 방법

Question

ajax를 사용하여 sql에서 동적으로 보여주는 작업 플롯 그래프가 있습니다. 내 문제는 그저 하나의 시리즈 만 그릴 수 있다는 것입니다. 내 다른 문제는 x 축 레이블입니다. X 축 레이블을 SQL 날짜 필드에서 동적으로 가져 오길 원했습니다. 이

//run query  
    $sql = "SELECT date, bread, flower FROM `job` WHERE month(date) = 12 ORDER BY date"; 

    $result = mysql_query($sql); 

    while($row = mysql_fetch_array($result)) { 
     $dd = date('d', strtotime($row['date'])); 
     $graphdata[] = array((int)$dd, (int)$row['bread']); 
    } 


    print json_encode($graphdata); //HOW CAN I ADD THE FLOWER FIELD TO INCLUDE IN THE GRAPH AS WELL? 

Answer 1

두 번째 데이터 세트를 얻으려면, 당신은 X, Y 값의 또 다른 배열을 제작 한 다음에 추가하는 데 필요한 PHP에게 있습니다

function getPlot() { 
     $.ajax({ 
      url: "ajax/ajax-totalplot.php", 
      dataType: "json", 
      async: false, 
      success: function(result) { 
       d = result; 
       //console.log(d); 
      } 
     }); 
     var data = d; // HOW CAN I ADD THE DATE FOR X-AXIS LABEL? 
     var datasets = [ { 
      "data" : data, lines: { show: true }, points: {show: true} 
     }]; 
     $.plot('#Plot', datasets); 
    } 

:

이

내 아약스이다 datasets :

while($row = mysql_fetch_array($result)) { 
     $dd = date('d', strtotime($row['date'])); 
     $graphdata[] = array((int)$dd, (int)$row['bread']); 
     $graphdata2[] = array((int)$dd, (int)$row['flower']); 
    } 

    print json_encode(array($graphdata,$graphdata2)); //maybe 

,617 : PHP에서

JS에서 다음

:

var datasets = [ 
{ 
     "data" : data[0], lines: { show: true }, points: {show: true} 
}, 
{ 
     "data" : data[1], lines: { show: true }, points: {show: true} 
} //second set of data is just another object in the datasets array 
]; 
$.plot('#Plot', datasets); 

처음 this example을 확인, 날짜를 처리합니다. 기본 거래는 xaxis 모드를 "time"으로 설정 한 다음 PHP의 날짜를 Javascript 타임 스탬프로 피드하는 것입니다.

그래서 당신은 PHP에서 $dd 변수의 당신의 생성을 변경해야합니다, 당신은 $.plot를 호출 할 때 다음 몇 가지 옵션이 추가

//Change your SQL: 
$sql = "SELECT unix_timestamp(date)*1000, bread, flower FROM `job` WHERE month(date) = 12 ORDER BY date"; 

//change how you receive the date field: 
$dd = $row['date'] 

//change how you call plot in JS: 
$.plot('#Plot',dataset,{ 
    xaxis: { 
    mode: "datetime" 
    } 
}); 

을