Willy Mularto
Willy Mularto

Reputation: 1441

how to customize time format with flotchart

I have a flot chart with data called via ajax and returned as json array this is my flot

var option = { lines: { show: true }, points: { show: true }, xaxis: { tickDecimals: 0, tickSize: 1, mode: "time", timeformat: "%H:%M:%S" } }; var data = []; var placeholder = $("#realtime");

    $.plot(placeholder, data, option);

    var alreadyFetched = {};

    $(document).ready(function () {
        data = [];
        alreadyFetched = {};

        $.plot(placeholder, data, option);

        function fetchData() {

            function onDataReceived(series) {
                data = [ series ];

                $.plot($("#realtime"), data, option);
            }

            $.ajax({
                url: "../data.php",
                method: 'GET',
                dataType: 'json',
                success: onDataReceived
            });
            function update() {
                plot.setData([ getRandomData() ]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                plot.draw();

                setTimeout(update, 1000);
            }
            update();
        }

        setTimeout(fetchData, 1000);
    });

this is my returned json

{"label":"Activation","data":[
                               ["08:53:14","10"],["08:53:15","9"],["08:53:16","9"],
                               ["08:53:17","20"],["08:53:18","6"],["08:53:23","16"],
                               ["08:53:24","12"],["08:53:25","14"],["08:53:26","22"],
                               ["08:53:27","20"],["08:53:28","10"],["08:53:29","19"],
                               ["08:53:30","13"],["08:53:31","9"],["08:53:32","12"],
                               ["08:53:34","12"],["08:53:35","17"],["08:53:36","6"],
                               ["08:53:37","14"],["08:53:38","22"],["08:53:39","43"],
                               ["08:53:40","34"],["08:53:41","27"],["08:53:42","31"],
                               ["08:53:43","2"],["08:53:44","1"],["08:53:45","86"],
                               ["08:53:46","82"],["08:53:47","4"],["08:53:48","7"],
                               ["08:53:49","6"],["08:53:50","18"],["08:53:51","17"],
                               ["08:53:52","15"],["08:53:53","3"],["08:53:54","14"],
                               ["08:53:55","2"],["08:53:56","8"],["08:53:57","14"],
                               ["08:53:58","9"],["08:53:59","5"]
                          ]
 }

The chart is empty. I think something is wrong with my time format. Can somebody help? Thanks

Upvotes: 0

Views: 642

Answers (1)

Raidri
Raidri

Reputation: 17550

If you want to use mode: 'time' you have to put timestamps in your data like explained in the documentation.

Upvotes: 2

Related Questions