Displaying Flot Bar chart with data from php script

Question

I'm having a bit of trouble correctly displaying this flot Bar chart and the flot documentation has not been able to help me so far. I will first provide the context and then explain what my issues are:

• Below is the php script that provides the data (I only provided the essential lines of code):

  $sql = "select unix_timestamp(date(Date_Found))*1000 as day, count(Virus_Name) as nb from machine_virus_info where Virus_name!='NULL' group by unix_timestamp(date(Date_Found))*1000;";
  $result = mysql_query($sql);
  
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC))               
  {
          $array[] = array ($row['day'], $row['nb']);
  
  
          #when echoed the array data looks like this using just date  date():
          #[["20130226000","2"],["20130227000","1"]]
  }
  
  echo json_encode( $array );
  

• Below is the JS in my html:

<script  id="virus_scan" language="javascript" type="text/javascript">
$(function()
    {
        var options = {
            series:
            {
                lines:  { show: false },
                points: { show: false }, 
                bars:
                {
                    show: true,
                    lineWidth: 1,
                    fill: 1,
                    fillColor: null,
                    align: "left",
                    barWidth: 24 * 60 * 60 * 1000,
                    horizontal: false
                }
            },
            xaxis:  { mode: "time" ,timeformat: "%y/%m/%d" },
            legend: { position:"nw" }
        };

        $.getJSON("php_scripts/virus_scan.php",
            function(data)
                {
                    $.plot($("#virus_scan"),data,options);
                }
            );
    }
);
</script>

• Given the info above this is the bar chart that i get, using unix_timestamp(date()):

NOTE: When we echo the json_encode($array) while using unix_timestamp(date(date)) the array is printed as follows:

[["1361833200000","2"],["1361919600000","1"]]

• This is the bar chart that i get when using only date() instead of unix_timestamp(date()):

NOTE: When we echo the json_encode($array) while using only date(date) the array is printed as follows:

[["20130226000","2"],["20130227000","1"]]

The Idea:

• I would like to correctly display the date on the x-axis

• i would like on the y-axis to display the max value of nb

• Example below:

• I based my code on the code of this bar chart, but evidently the results are not the same.

If anybody could share some light on anything that might help me better understand and maybe identify the issue, because i am not sure if the problem is coming from the way php is manipulating the data or if it's the bar chart configurations.

Thank you, sSmacKk

Answer 1

Instead of providing an array of points, use an array of series objects, like this:

[{
    data: [[timestamp, value], ...]
    label: "A"
}, {
    data: [[timestamp, value], ...]
    label: "B"
]

See the Data Format section of the docs, a couple of paragraphs down.

You also need to make sure your timestamps and values are integers, not strings as they appear to be in your examples.

Finally, your timestamps must be JavaScript (UNIX * 1000) timestamps; your attempts with just 'date' definitely won't work.