CODEWITHSUNDEEP
javascriptflot
Sailing Judo
Sailing Judo

Reputation: 11243

How to stop Flot Charts from re-ordering my data?

I am using a line chart. I feed the data the following:

 var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
 var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];

In the above the first number of each set is the week of the year and I am trying to show the last 4 months of data.

However, when the chart is drawn Flot charts re-sorts the data by the first value (lowest to highest) which creates all kinds of issues. Instead of 4 columns in the series there are now 52, and the lines are quite out of whack.

I don't see anything in the documentation that says this is supposed to happen, nor do I see anything that says I can prevent it. However, for the data to be meaningful, the data must not be re-ordered.

Is there a setting I'm unaware of that can stop this behavior?

Edit : Adding plot code

var plot = $.plot('#scheduled-actual-flot-line', [
    {
        label: 'Scheduled Hours',
        data: scheduled,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    },
    {
        label: 'Actual Hours',
        data: actual,
        lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
        points: { show: true, radius: 4 }
    }],
    {
        series: {
            lines: { show: true },
            points: { show: true },
            shadowSize: 0   // Drawing is faster without shadows
        },
        colors: ['#afd2f0', '#177bbb'],
        legend: {
            show: true,
            position: 'nw',
            margin: [15, 0]
        },
        grid: {
            borderWidth: 0,
            hoverable: true,
            clickable: true
        },
        yaxis: { ticks: 4, tickColor: '#eeeeee' },
        xaxis: { ticks: 12, tickColor: '#ffffff' }
    }
);

Upvotes: 1

Views: 1131

Answers (3)

Raidri
Raidri

Reputation: 17550

Flot takes the x values as numbers and displays / sorts them accordingly. If you don't want that, you can use the category mode (see this example and this fiddle with your data).

 xaxis: {
     //ticks: 12,
     tickColor: '#ffffff',
     mode: 'categories'
 }

PS: 12 ticks are not possibly with your data, as there are only 4 datapoints defined.

That flot reads all data as numbers by default is described here in the documentation.

Upvotes: 3

Stephen Thomas
Stephen Thomas

Reputation: 14053

Flot is doing exactly what it should do for a line chart (or any type of x-y graph). It's showing the last two points of your dataset on the left because 1 and 2 are indeed less than 51 and 52. I'm guessing that you're trying to show data that crosses a year boundary. You need to make the first two weeks of the second year later than the last two of the first. You could use actual dates instead of week numbers, in which case Flot would handle it fine. That would also give you more flexibility in labeling the x-axis. But as a quick fix, just add 52 to the second year's data, e.g.:

var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];

Upvotes: 0

Data
Data

Reputation: 1357

Flotr examples use a for loop to create random data, so the first index will always be sequential.

[[51,1700],[52, 1750],[1,1600],[2,1675]];

Your arrays show that flotr must be doing a sort on the array before painting the data sets as lines, bar-graphs or whatever.

I can only suggest you create a timestamp from the months and there's a time setting you can in flotr settings to format the dates as you want.

The other way is replace your anomalous data (months) with sequential indices:

var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;

Upvotes: 0

Related Questions