Flot Chart from PHP

Question

I'm trying to have a flot chart with values from a database. How I have it now, the chart only plots 1 datapoint. How can I get it to plot the rest of the data from the array? I'm trying to plot the total count of agents that were entered on each date. var data2 will be for agents lost

<?php

      foreach($mysqli->query('SELECT COUNT(*), agent_date_entered, agent_id 
      FROM agents GROUP BY agent_date_entered 
      ORDER BY agent_date_entered') as $row) {

        $count[] = $row['COUNT(*)'];
        $agent[] = $row['agent_id'];
        $date[] = $row['agent_date_entered'];

      }
?>

<script>
    var data, data1, options, chart;
    var data1 = [ <?php echo json_encode($count); ? > , < ? php echo json_encode($date); ?> ];
    var data2 = [];

    data = [{
        data: data1,
        label: "Agents Gained",
        lines: {
            show: true
        },
        points: {
            show: true
        }
    }, {
        data: data2,
        label: "Agents Lost",
        lines: {
            show: true
        },
        points: {
            show: true
        }
    }];
    options = {
        legend: {
            position: "nw"
        }
    };
    $(document).ready(function () {
        chart = $.plot($("#placeholder"), data, options);
    });
</script>

Answer 1

Your data format is not what Flot requires. You need something like

[[1, 1533081600000], [1, 1535932800000]]

(or [[1533081600000, 1], [1535932800000, 1]] if you want the dates on the x axis).
The numbers likes 1535932800000 are JavaScript timestamps. You also need the option mode: 'time' on the axis with the date/time values.

For more info see the documentation under Data format and Time series data .

Answer 2

With the help of the links in one of the comments to Data format and Time series data , I found the answer I was looking for.

Just in case anyone else is having this issue, here is how I got it to work. First, I changed the date in the sql statement to read: (UNIX_TIMESTAMP(agent_date_depart)*1000) AS date . Then I encoded it when I set the variable $depart = json_encode(floatval($row['date'])); . To make it so it's not a huge number on the x-axis and displays as a date, I set the x-axis like this: xaxis: {mode: "time", timeformat: "%Y/%m/%d"}, . You can even set the date format in the tooltip by using tooltipOpts like this:

    tooltipOpts: {
        content: function (label, x, y) {
            var date = new Date(+x);
            var tooltip = '<h4>' + label + '</h4><ul>';
            tooltip += '<li>Date ' + date.toLocaleDateString() + '</li>';
            tooltip += '<li>Total Count: ' + y + '</li></ul>';
            return tooltip;
        },

The easiest way I found to get the data to display inside the chart, I put the sql statement inside the data variable like this:

        var d2 = [

<?php

         $sql = "SELECT COUNT(agent_id), (UNIX_TIMESTAMP(agent_date_depart)*1000) AS date FROM agents
          WHERE agent_date_depart BETWEEN '$bdatecy' AND '$edatecy'
          GROUP BY agent_date_depart ";
          $result = mysqli_query($mysqli, $sql);
           while ($row = mysqli_fetch_assoc($result)) {

    $agent = $row['COUNT(agent_id)'];
    $depart = json_encode(floatval($row['date']));

    echo "[".$depart.", ".$agent."],";
  }

?>

  ];

Hope this helps and I wanted to say thank you again for those links.