Flot Chart (Array 3 значения)

Question

Я хотел бы знать, если это возможно сделать с Flot графика, потому что я не уверен ...

У меня есть таблица на базе данных с 3-мя строками: дата начала, дата окончания, Медикаменты

Mi PHP код:

$sql = "SELECT * FROM medications ORDER BY DateStart"; 
$stmt = $PDO -> query($sql); 
$result=$stmt -> fetchAll(PDO::FETCH_ASSOC); 

foreach ($result as $row){ 
$dateini= $row['DateStart']; 
$datend= $row['DateEnd']; 
$medic= $row['Medication']; 

$data1 = array(strtotime($dateini)*1000,$medic); 
$data2 = array(strtotime($datend)*1000,$medic); 

$data3[] = array($data1,$data2); 

} 

Если я:

echo json_encode($data3); 

Я получаю массив: [[[1456531200000, «12»], [145653120000, «12»]], [1456531200000, «16»], [14566704000000, «16»]], [[1456617600000, 13 "], [1456790400000," 13 "]], [[1456704000000," 14 "], [1457049600000," 14 "]]]

<script> 
var data3 = <?php echo json_encode($data3)?>; 

$(function() { 
var datasets = [ 
{ 
    label: "Medication", 
    data: data3, 
    yaxis: 1, 
    color: "Yellow", 
    points: { symbol: "diamond", fillColor: "Yellow",show: true, radius: 6} 

} 
]; 

$.plot($("#flot-placeholder"), datasets ,options); 
</script> 

Это: $ .plot ($ (" # Flot -placeholder "), наборы данных, опционы) ничего не построить, но если я делаю:

$.plot($("#flot-placeholder"), data3,options); 

Я получаю

Можно было бы получить графические наборы данных (в $ .plot) вместо data3?

Answer 1

Два вопроса с вашей datasets массива:

1. Ваш data3 массив имеет несколько серий данных, но вы пытаетесь поставить все это в один набор данных объекта в datasets массиве. Поместите каждый ряд данных в отдельный объект (с его собственными опциями, где это необходимо). не

   var datasets = [{ 
       label: "Medication", 
       data: data3[0], 
       yaxis: 1, 
       color: "Yellow", 
       points: { 
        symbol: diamond, 
        fillColor: "Yellow", 
        show: true, 
        radius: 6 
       } 
   }, { 
       label: "Medication", 
       data: data3[1], 
       yaxis: 1, 
       color: "red", 
       points: { 
        symbol: diamond, 
        fillColor: "red", 
        show: true, 
        radius: 6 
       } 
   }, ... ] 
   

2. Flot не имеет встроенного diamond символ, вы должны предоставить функцию, которая рисует ромб.

   function diamond(ctx, x, y, radius, shadow) { 
       var size = radius * Math.sqrt(Math.PI)/2; 
       ctx.moveTo(x - size, y); 
       ctx.lineTo(x, y + size); 
       ctx.lineTo(x + size, y); 
       ctx.lineTo(x, y - size); 
       ctx.lineTo(x - size, y); 
   } 
   

Смотрите эту fiddle для полного рабочего примера.