CODEWITHSUNDEEP
phpjavascripthighcharts
user837306
user837306

Reputation: 877

High chart date time conversion showing wrong values

Below is my simple graph on high charts. Everything appears fine but only problem I have now my data is just two 2012-05-26 01:00:00, 200 and 2012-05-26 02:00:00,300. The y-axis appears fine. But on the x-axis it appear the time as start at 17:00 and ends at 18:00 and it does not even show the date even. What could be the problem?

<?php
    define('DB_HOST', '*******');
    define('DB_USER', 'user1');
    define('DB_PASSWORD', 'test1');
    define('DB_DATABASE', 'db1');

 $dbcnx = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
 mysql_select_db('db1');

$sql = "select unix_timestamp(datetime1) as datetime1, value1 from data";
$result = mysql_query($sql,$dbcnx);
$data = array();
while ($row = mysql_fetch_array($result)) {
   //extract $row;
   //$datetime1 = $row['dateTime1']*1000;
   $datetime = $row['datetime1']*1000; 
   //echo $datetime;
   echo $row['value1'];
   $val  = $row['value1'];
   // convert from Unix timestamp to JavaScript time
   $data[] = "[$datetime, $val]";
}
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
    $(document).ready(function() {
      //alert("TS");
      var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25

      },

      series: 
        [{
         data: [<?php echo join($data, ',') ?>]
      }],
      xAxis: { type: 'datetime'}

   });
  });

});
        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

Upvotes: 2

Views: 1955

Answers (1)

Linger
Linger

Reputation: 15058

I have no idea what data you are passing the highchart. By the sounds of it you are only passing it two data points. Did you verify that the query is pulling the data you want? If so, can you post here the data that should be in the highchart? Also, can you post here the highcharts that is generated in the view source of the webpage?

As far as the xaxis labels, since they are of datetime format, then the chart will render them the best way it sees fit. If you don't like the way they are rendered, you can control the datetime formats of the chart using dateTimeLabelFormats. You can also control the interval of the dates shown using tickInterval.

Upvotes: 3

Related Questions