CODEWITHSUNDEEP
javascriptjquerychartsflot
Patrick McCarthy
Patrick McCarthy

Reputation: 57

Flot Graph time not formatting

I am trying to plot a flot graph, but the date won't show. I do have flot.time loading and the time stamps are correct as I validated them. Can anyone see anything wrong with the code. The graph plots perfectly, but it shows the time stamp instead of the date. 

if ($("#site-stats").length) {
        var companies = [[1534892400000,4], [1534978800000,1], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,3], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,1], [1536361200000,0], [1536447600000,0], [1536534000000,4], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
        var users = [[1534892400000,6], [1534978800000,8], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,4], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,2], [1536361200000,0], [1536447600000,0], [1536534000000,5], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];

    var plot = $.plot($("#site-stats"), [{
            data : companies,
            label : "Company Registrations"
        }, {
            data : users,
            label : "User Registrations"
        }], {
            series : {
                lines : {
                    show : true,
                    lineWidth : 1,
                    fill : true,
                    fillColor : {colors : [{ opacity : 0.1}, {opacity : 0.15}]}
                },
                points : {show : true},
                shadowSize : 0
            },
            xaxis : {
                mode : "time",
                dateFormat : "%y-%0m-%0d"

            },

            yaxes : [{
                min : 0,
                tickLength : 2
            }],
            grid : {
                hoverable : true,
                clickable : true,
                tickColor : $chrt_border_color,
                borderWidth : 0,
                borderColor : $chrt_border_color,
            },
            tooltip : true,
            tooltipOpts : {
                content : "Your sales for <b>%x</b> was <b>%y</b>",
                dateFormat : "%y-%0m-%0d",
                defaultTheme : false
            },
            colors : [$chrt_main, $chrt_second],
            xaxis : {
                ticks : 10,
                tickDecimals : 0
            },
            yaxis : {
                ticks : 20,
                tickDecimals : 0
            },
        });

    }
});

Upvotes: 1

Views: 47

Answers (1)

Raidri
Raidri

Reputation: 17550

You have two xaxis properties in your options object:

    xaxis : {
        mode : "time",
        dateFormat : "%y-%0m-%0d"
    },

and

    xaxis : {
        ticks : 10,
        tickDecimals : 0
    },

The second overwrites the first one with the time format. Put them together and it works fine (see this fiddle):

    xaxis: {
        mode: "time",
        dateFormat: "%y-%0m-%0d",
        ticks: 10,
        tickDecimals: 0
    },

Upvotes: 1

Related Questions