Flot Chart (Array 3 values)

Question

I'd like to know if is possible to do that with Flot chart, because I'm not sure...

I have a table on a database with 3 rows: Date Start, Date End, Medication

Mi PHP code:

$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);

}

If I do:

echo json_encode($data3);

I get the array: [[[1456531200000,"12"],[1456704000000,"12"]],[[1456531200000,"16"],[1456704000000,"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>

This: $.plot($("#flot-placeholder"), datasets ,options) don't plot anything, but if I do:

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

I get

It would be possible to get the graphic writing datasets (in $.plot) instead data3?

Answer 1

Two issues with your datasets array:

1. Your data3 array has multiple data series but you try to put it all into one data set object in the datasets array. Put each data series in a separate object (with its own options where neccessary).

   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 has no build-in diamond symbol, you have to provide a function which draws a 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);
   }
   

See this fiddle for a full working example.