Jquery Flot Chart timeseries option in reverse chronological

Question

Does anybody know how to use the Flot timeseries in a reverse chronological way, to show the latest dates first? I've been ting to search for an option but couldn't find one in the API. Here is my code

var plot = $.plot("#placeholder1", [data], {
        series: {
                lines: { 
                    show: true, 
                    fill: 0.1
                },
                points: { show: true, 
                    fill: 0.05 }
        },
        xaxis: 
        {    
            mode: "time",
            minTickSize: [1, "day"],
            ticks:7 
        },
        grid: {             
            backgroundColor: { colors: [ "#fff", "#fff" ] },
            borderColor: "#ccc",
            borderWidth: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            hoverable: true,
            clickable: true,
            markings: weekendAreas
        },
        legend: {
            labelBoxBorderColor: "#fff",
            position: "ne",
            margin: [0, 0]              
        }
    });

Answer 1

You can do this with an xaxis transform function:

    xaxis: {    
        mode: "time",
        minTickSize: [1, "day"],
        ticks: 7,
        transform: function (v) { return -v; }, // run it backwards
        inverseTransform: function (v) { return -v; }
    },

Here's a fiddle.

Running code:

var data = [
    [1384436902000, Math.random() * 100],
    [1384523302000, Math.random() * 100],
    [1384609702000, Math.random() * 100],
    [1384696102000, Math.random() * 100],
    [1384782502000, Math.random() * 100],
    [1384868902000, Math.random() * 100],
    [1384955302000, Math.random() * 100]
    ];


var plot = $.plot("#placeholder1", [data], {
        series: {
                lines: { 
                    show: true, 
                    fill: 0.1
                },
                points: { show: true, 
                    fill: 0.05 }
        },
        xaxis: 
        {    
            mode: "time",
            minTickSize: [1, "day"],
            ticks: 7,
            transform: function (v) { return -v; },
            inverseTransform: function (v) { return -v; }
        },
        grid: {             
            backgroundColor: { colors: [ "#fff", "#fff" ] },
            borderColor: "#ccc",
            borderWidth: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            hoverable: true,
            clickable: true
        },
        legend: {
            labelBoxBorderColor: "#fff",
            position: "ne",
            margin: [0, 0]              
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="https://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<div id="placeholder1" style="width:600px; height:300px"></div>