flot dynamically defining multiple data with labels

Question

I've read at least half a dozen other questions about doing this, and I can't figure out how mine is different: http://jsfiddle.net/jshado1/Z5UFg/1/

I added a function LoadGraph.check_data which I run from the console. The data that it output after running load_data(1,"199 Water St",7); is:

#mine
[ { label:"coffee",  data:[ [1659] ] },
  { label:"cocoa",  data:[ [717] ] },
  { label:"tea",  data:[ [206] ] }
]

That looks exactly the same to me as the example in the doc (just above Plot Options):

#doc example
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
  { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] }
]

I also tried modelling my structure after SO answer 5661134, but that didn't fly either (exact same outcome as seen in the fiddle).

The 2nd graph in the fiddle should either have 3 bars next to each other or (better yet) have the 3 bars stacked on top of each other.

UPDATE: I added an x-value to get the following (but it still doesn't work, fiddle):

#http://jsfiddle.net/jshado1/Z5UFg/3/
[ { label:"coffee",  data:[ [7, 1659] ] },
  { label:"cocoa",  data:[ [7, 717] ] },
  { label:"tea",  data:[ [7, 206] ] }
]
#http://jsfiddle.net/jshado1/Z5UFg/2/
[ { label:"coffee",  data:[ [0, 1659] ] },
  { label:"cocoa",  data:[ [1, 717] ] },
  { label:"tea",  data:[ [2, 206] ] }
]

If I take out the object-ness (eg, the labelling), it works (but I'll need to figure out why f_opts.series.stack=true doesn't work—I think, since all 3 bars are blue, it's treating all three as the same series): v4

UPDATE 2 Are these supposed to be in 2 different places? By that I mean should that label+data array-object be in the options object and the data also be in the data array? The documentation is kind of difficult to figure out because it never says what the parent object is.

Answer 1

I believe this version of the fiddle might be what you're trying to do.

The problem was in your treatment of f_data as a single object {} instead of an array of objects, specifically series objects. (You got around this by forcing it into an array in the plot call with [f_data], but this limits you to a single series.). What you want to do instead of setting f_data = tmp is instead push a complete series object into f_data with tmp as its data array:

f_data.push({label:cat, stack:true, data:tmp});

Each series object (each element in your f_data array) has its own data and label, as you can see in my example.

There were two reasons why you weren't seeing any stacking working:

1. You need to include the jquery.flot.stack.js file to get stacking functionality. (I've added the linked resource in the fiddle.)
2. Stacking only makes sense with multiple series. Your "depth" view was adding 3 overlapping data points to a single series, rather than creating 3 individual series with 1 data point each.

I believe my example achieves the result you were aiming for. Let me know if I am mistaken. I've tagged new lines I added with //NEW to highlight the changes.

Answer 2

The difference is that your datapoints consist of only one value, while Flot requires [x, y] pairs. Check out the Data Format section of the docs for more info.

Edit: It also looks like your call to $.plot uses [f_data] even though f_data is already an array of series. It looks like that's the current cause of your problems.

If you run into further problems you should really try to cut down your code to a simpler example and work up from there. This has turned from a question into a debugging session.