Getting wrong X-axis using flot

Question

I'm fetching data from database using php and storing data into an array

In database, 1st one is date-with-time(timestamp) and next one is value.

echo json_encode($arr);

I'm getting following output

[[1424803440,15.739993],[1424804580,13.698263],[1424805780,13.214383],[1424806980,15.393282],[1424808180,14.356073],...........]

Now

<script type="text/javascript">
var updateinterval=1000;
var data=[];
function getdata(){
data=<?php echo json_encode($arr); ?>;
}
var options={
                series: {
                        lines: {
                                show: true,
                                //lineWidth: 2,
                                fill: true
                                },
                        points:{
                                show: "triangle"
                                }
                        },
xaxis: {
    mode: "time",
    TickSize: [1, "minute"],
    //timeformat: '%d/%m %H:%M:%S',     
    tickFormatter:function (v, axis) {
    var date = new Date(v);
    if (date.getMinutes() % 1 == 0) {
    var years= date.getYear() <70 ? "0" +date.getYear() :date.getYear();
    var dates=date.getDate() <10 ? "0" +date.getDate() : date.getDate();
    var months=date.getMonth()< 10 ? "0" +(date.getMonth()+2) :date.getMonth();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                return dates+ "-"+ months+ "-"+ years +" "+hours + ":" + minutes + ":" + seconds;
    } 
                else {
                return "";
                }
                },
                        
                axisLabel: "Time",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
                },
                    yaxis: {
                            
                            axisLabel: "Data loading",
                            axisLabelUseCanvas: true,
                            axisLabelFontSizePixels: 12,
                            axisLabelFontFamily: 'Verdana, Arial',
                            axisLabelPadding: 6
                        },
               legend: {        
                            labelBoxBorderColor: "#B0D5FF"
                        },
                    grid: {
                            hoverable: true, 
                            clickable: true,
                            //backgroundColor: { 
                                                //colors: ["#B0D5FF", "#5CA8FF"] 
                                            //}
                            }
};
   $(document).ready(function () {
            getdata();
            var dataset=[
              { 
                label: "Data", 
                data: data, 
                points: { 
                            symbol: "triangle"
                        } 

             }
            ];
        $.plot($("#flot-container"), [dataset], options);

function update() {
                getdata();
                if(data.length>15){
                    data.shift();   
                }
                $.plot($("#flot-container"), dataset, options);
                setInterval(update, updateinterval);
                }
 
    update();
});

</script>

I'm getting following output=>

But I want it to show 24th feb 2015 18:44, .........etc Why am I getting wrong x-axis? Where did I make wrong?How can I fix it? Please help.

score 0 · Accepted Answer · answered Sep 25 '15 at 15:04

Your timestamps are in seconds since epoch. This is the format in UNIX and PHP. In JavaScript you need milliseconds since epoch. Multiply your timestamps with 1000. This is described here in the Flot documentation.

You can see this by comparing this two lines in your browsers console:

new Date(142480344)
new Date(1424803440000)

Getting wrong X-axis using flot

1 Answers1