flot.js - points don't match up with x-axis, null data set, legend overlapping

Question

Just started using flot.js for the first time and have a few problems/questions. The chart displays fine minus a few things that are bothering me.

1 - The ticks and dates don't seem to line up properly. For example, in the current chart I am working on there are only two entries for two different days. The actual data value (point) is not above the date it corresponds with for some reason. See the image here

2 - Is there any way to make the y axis larger than the dataset to prevent the lines from overlapping the legend? In this example it is fine, but I have seen others where the data overlaps the legend.

3 - How to handle no data? I plan to expand on this to allow the user to select start/end dates... so if there are no results is there a nice way to return this and/or possibly show a message in the chart? The main thing here is the script doesn't break when there is no data.

JS :

//get the data
$.ajax({
    url: "/process/chart_main.php",
    type: "POST",
    dataType: "json",
    success: onDataReceived
});

function onDataReceived(series) {

    console.log(series);
    // Load all the data in one pass; if we only got partial
    // data we could merge it with what we already have.
    data = series;

    var options = {
        series: {
            lines: {
                show: true,
                lineWidth: 2,
                fill: true,
                fillColor: {
                    colors: [{
                            opacity: 0.05
                        }, {
                            opacity: 0.01
                        }
                    ]
                }
            },
            points: {
                show: true
            },
            shadowSize: 2
        },
        grid: {
            hoverable: true,
            clickable: true,
            tickColor: "#eee",
            borderWidth: 0
        },
        //colors: ["#d12610", "#37b7f3", "#52e136"],
        xaxis: {
            tickSize: [1, "day"],
            mode: "time",
            timeformat: "%m-%d-%Y"
        },
        yaxes: [{
            position: "left"
        }],
        legend: {
            position: "ne"
        }
    };

    $.plot("#flot_chart", data, options);
}

PHP:

//actual select removed for this display
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

if($results)
{
    foreach($results as $row)
    {
        $data1[] = array( strtotime($row['date']) * 1000, $row['day_count'] );
    }

    //send our data values to $mergedData, add in your custom label and color
    $mergedData[] =  array('label' => "Events" , 'data' => $data1, 'color' => '#37b7f3');
}

// return result array to ajax
echo json_encode($mergedData);

Answer 1

1. Probably the ticks are at midnight (07-09-2014 00:00:00) while the data points are not. If you want to line them up remove the time from your datapoints or give flot the ticks with the same time as your datapoints as an array instead of the tickSize option (see here, you have to give the ticks as timestamps like in the datapoints):

   xaxis: {
       ticks: [1405942268798, 1405942368798, ...]
   }
   

2. Use the min and max properties for the axis options (see same link as above):

   xaxis: {
       min: 1405942268798,
       max: 1405942368798
   }
   

3. flot doesn't "break" when there is no data, it just shows an empty chart. If you want to show an additional message, you can check for yourself before calling $.plot():

   if (data.length == 0) {
       alert('No data');
   }