CODEWITHSUNDEEP
javascriptjquery
vanquish
vanquish

Reputation: 135

flotchart xaxis show time

I'm trying to show the time on xaxis using flot charts

here's my array of data (time, value)

var time = [["13:33","0.04668"],["13:23","0.04856"],["13:12","0.05997"],["13:01","0.04679"]];

and here's the flot chart settings

 $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
            time
        ],
        {
            series: {
                lines: {
                    show: false,
                    fill: true
                },
                splines: {
                    show: true,
                    tension: 0.4,
                    lineWidth: 1,
                    fill: 0.4
                },
                points: {
                    radius: 0,
                    show: true
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#d5d5d5",
                borderWidth: 1,
                color: '#d5d5d5'
            },
            colors: ["#1ab394", "#464f88"],
            xaxis:{
                mode: "time",
                timeformat: "%H:%M"
            },
            yaxis: {
                ticks: 4
            },
            tooltip: false
        }
    );

it keeps coming up with the following error:

Uncaught TypeError: Failed to execute 'quadraticCurveTo' on 'CanvasRenderingContext2D': 4 arguments required, but only 0 present.

if I replace the : in time with a . (dot) I don't get the error anymore however the xaxis does not show at all

var time = [["13.33","0.04668"],["13.23","0.04856"],["13.12","0.05997"],["13.01","0.04679"]];

Upvotes: 0

Views: 1193

Answers (1)

dmeglio
dmeglio

Reputation: 2830

The flot time series plugin works on milliseconds since the epoch (1/1/1970) which is very similar to UNIX time, except it's in milliseconds, not seconds. You'll need to provide the timestamp in that format. The flot website provides great examples of getting this in various languages. Also note, Flot is designed to work on UTC time so things will go a lot smoother if you convert your timestamps to UTC. In your example, it looks like you only want to show time, not date/time, so you can always format the axis string to display however you'd like. You can just pick a date and set all the times to be of a particular date and then just display the time component.

Note, as you play with Flot, you'll notice it's a bit quirky. Sometimes using multiple plugins together requires them to be loaded in a specific order and such. I've been using it for about a year and I've always been able to get it to do what I needed, sometimes it's just a bit trickier than it would seem it should be!

Upvotes: 1

Related Questions