tecywiz121 / freeboard-flot

A charting plugin for freeboard that uses flot
0 stars 1 forks source link

Getting started #1

Closed CmdLnInt closed 9 years ago

CmdLnInt commented 9 years ago

I cannot get this plugin to plot anything. I dont think I understand what this plugin expects. Do you perhaps have some sample data to look at?

tecywiz121 commented 9 years ago

Couple quick questions: are you running over 'http(s)://' or 'file://'? Do you get the graph to display any axis, or does it stay blank?

Here's what the data might look like:

[
    [<x-axis>, <y-axis>], // One entry per line on the graph,
    [<x-axis>, <y-axis>]  // where <x-axis> and <y-axis> are replaced with the values from your data source
]
CmdLnInt commented 9 years ago

I am using http and I do see the axis. Simplified my data looks something like this

{ "timestamp" : 1436175391176, "response": 0.049 }, { "timestamp" : 1436184205885, "response": 0.057 }

My datasource is JSON

[datasources["JSON"][0]["payload"]["timestamp"]["value"],datasources["JSON"][0]["payload"]["response"]["value"]], [datasources["JSON"][1]["payload"]["timestamp"]["value"],datasources["JSON"][1]["payload"]["response"]["value"]], [datasources["JSON"][2]["payload"]["timestamp"]["value"],datasources["JSON"][2]["payload"]["response"]["value"]]

On 6 July 2015 at 20:39, tecywiz121 notifications@github.com wrote:

Couple quick questions: are you running over 'http(s)://' or 'file://'? Do you get the graph to display any axis, or does it stay blank?

Here's what the data might look like:

[ [, ], // One entry per line on the graph, [, ] // where and are replaced with the values from your data source ]

— Reply to this email directly or view it on GitHub https://github.com/tecywiz121/freeboard-flot/issues/1#issuecomment-118952769 .

tecywiz121 commented 9 years ago

You'll need to wrap your data in an array:

[
    [datasources["JSON"][0]["payload"]["timestamp"]["value"],datasources["JSON"][0]["payload"]["response"]["value"]],
    [datasources["JSON"][1]["payload"]["timestamp"]["value"],datasources["JSON"][1]["payload"]["response"]["value"]],
    [datasources["JSON"][2]["payload"]["timestamp"]["value"],datasources["JSON"][2]["payload"]["response"]["value"]]
]

If you're still having trouble, dump your data to JSON, and I'll take a closer look.

Hope that helps :)

CmdLnInt commented 9 years ago

Thanks, but I still get nothing.

Here is my JSON

[ { "payload": { "timestamp": { "value": 1436175331152, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "2a8f0d12.d570f2", "_id": "559a4be33694a8e27fd3ad2c" }, { "payload": { "timestamp": { "value": 1436175361166, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "186b94c4.e7946b", "_id": "559a4c013694a8e27fd3ad2d" }, { "payload": { "timestamp": { "value": 1436175391176, "type": "integer" }, "response": { "value": 0.059, "type": "integer" } }, "topic": "localhost", "_msgid": "1d1b93f8.e2e46c", "_id": "559a4c1f3694a8e27fd3ad2e" }, { "payload": { "timestamp": { "value": 1436175421184, "type": "integer" }, "response": { "value": 0.048, "type": "integer" } }, "topic": "localhost", "_msgid": "d89b3c6f.2764c", "_id": "559a4c3d3694a8e27fd3ad2f" }, { "payload": { "timestamp": { "value": 1436175451194, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "5e0804ca.a1f7fc", "_id": "559a4c5b3694a8e27fd3ad30" }, { "payload": { "timestamp": { "value": 1436175481209, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "943a4125.6bc5c", "_id": "559a4c793694a8e27fd3ad31" }, { "payload": { "timestamp": { "value": 1436175511223, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "15e6772f.ea1989", "_id": "559a4c973694a8e27fd3ad32" }, { "payload": { "timestamp": { "value": 1436175541235, "type": "integer" }, "response": { "value": 0.059, "type": "integer" } }, "topic": "localhost", "_msgid": "1bccbf3b.e43341", "_id": "559a4cb53694a8e27fd3ad33" }, { "payload": { "timestamp": { "value": 1436175571250, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "4c47e26e.b3b81c", "_id": "559a4cd33694a8e27fd3ad34" }, { "payload": { "timestamp": { "value": 1436175601267, "type": "integer" }, "response": { "value": 0.052, "type": "integer" } }, "topic": "localhost", "_msgid": "89866afd.767998", "_id": "559a4cf13694a8e27fd3ad35" }, { "payload": { "timestamp": { "value": 1436175631279, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "4e73180.fb18ce8", "_id": "559a4d0f3694a8e27fd3ad36" }, { "payload": { "timestamp": { "value": 1436175661295, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "dd5865c0.22a798", "_id": "559a4d2d3694a8e27fd3ad37" }, { "payload": { "timestamp": { "value": 1436175691308, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "e71bbbc6.18e448", "_id": "559a4d4b3694a8e27fd3ad38" }, { "payload": { "timestamp": { "value": 1436175721320, "type": "integer" }, "response": { "value": 0.058, "type": "integer" } }, "topic": "localhost", "_msgid": "7a1981b6.85e68", "_id": "559a4d693694a8e27fd3ad39" }, { "payload": { "timestamp": { "value": 1436175751333, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "f39f55e.f0c60a8", "_id": "559a4d873694a8e27fd3ad3a" }, { "payload": { "timestamp": { "value": 1436175781348, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "801ca89f.7fe358", "_id": "559a4da53694a8e27fd3ad3b" }, { "payload": { "timestamp": { "value": 1436175811359, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "af2c5b6c.50d3a8", "_id": "559a4dc33694a8e27fd3ad3c" }, { "payload": { "timestamp": { "value": 1436175841367, "type": "integer" }, "response": { "value": 0.078, "type": "integer" } }, "topic": "localhost", "_msgid": "84f3d636.7b0c28", "_id": "559a4de13694a8e27fd3ad3d" }, { "payload": { "timestamp": { "value": 1436175871381, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "e729efb8.18d61", "_id": "559a4dff3694a8e27fd3ad3e" }, { "payload": { "timestamp": { "value": 1436175901397, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "ef8ac319.10754", "_id": "559a4e1d3694a8e27fd3ad3f" }, { "payload": { "timestamp": { "value": 1436175931411, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "faff5c7b.0500a", "_id": "559a4e3b3694a8e27fd3ad40" }, { "payload": { "timestamp": { "value": 1436175961429, "type": "integer" }, "response": { "value": 0.062, "type": "integer" } }, "topic": "localhost", "_msgid": "270fe032.d8f02", "_id": "559a4e593694a8e27fd3ad41" }, { "payload": { "timestamp": { "value": 1436175991441, "type": "integer" }, "response": { "value": 0.054, "type": "integer" } }, "topic": "localhost", "_msgid": "41d890e1.be277", "_id": "559a4e773694a8e27fd3ad42" }, { "payload": { "timestamp": { "value": 1436176021463, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "28d196a7.d72e6a", "_id": "559a4e953694a8e27fd3ad43" } ]

Davin Menhinick 082 874 4391

On 7 July 2015 at 16:12, tecywiz121 notifications@github.com wrote:

You'll need to wrap your data in an array:

[ [datasources["JSON"][0]["payload"]["timestamp"]["value"],datasources["JSON"][0]["payload"]["response"]["value"]], [datasources["JSON"][1]["payload"]["timestamp"]["value"],datasources["JSON"][1]["payload"]["response"]["value"]], [datasources["JSON"][2]["payload"]["timestamp"]["value"],datasources["JSON"][2]["payload"]["response"]["value"]] ]

If you're still having trouble, dump your data to JSON, and I'll take a closer look.

Hope that helps :)

— Reply to this email directly or view it on GitHub https://github.com/tecywiz121/freeboard-flot/issues/1#issuecomment-119216799 .

CmdLnInt commented 9 years ago

My mistake, the double wrapping seems to fix the issue. Thanks for the help.

Davin Menhinick 082 874 4391

On 7 July 2015 at 18:52, Davin Menhinick davin@menhinick.co.za wrote:

Thanks, but I still get nothing.

Here is my JSON

[ { "payload": { "timestamp": { "value": 1436175331152, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "2a8f0d12.d570f2", "_id": "559a4be33694a8e27fd3ad2c" }, { "payload": { "timestamp": { "value": 1436175361166, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "186b94c4.e7946b", "_id": "559a4c013694a8e27fd3ad2d" }, { "payload": { "timestamp": { "value": 1436175391176, "type": "integer" }, "response": { "value": 0.059, "type": "integer" } }, "topic": "localhost", "_msgid": "1d1b93f8.e2e46c", "_id": "559a4c1f3694a8e27fd3ad2e" }, { "payload": { "timestamp": { "value": 1436175421184, "type": "integer" }, "response": { "value": 0.048, "type": "integer" } }, "topic": "localhost", "_msgid": "d89b3c6f.2764c", "_id": "559a4c3d3694a8e27fd3ad2f" }, { "payload": { "timestamp": { "value": 1436175451194, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "5e0804ca.a1f7fc", "_id": "559a4c5b3694a8e27fd3ad30" }, { "payload": { "timestamp": { "value": 1436175481209, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "943a4125.6bc5c", "_id": "559a4c793694a8e27fd3ad31" }, { "payload": { "timestamp": { "value": 1436175511223, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "15e6772f.ea1989", "_id": "559a4c973694a8e27fd3ad32" }, { "payload": { "timestamp": { "value": 1436175541235, "type": "integer" }, "response": { "value": 0.059, "type": "integer" } }, "topic": "localhost", "_msgid": "1bccbf3b.e43341", "_id": "559a4cb53694a8e27fd3ad33" }, { "payload": { "timestamp": { "value": 1436175571250, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "4c47e26e.b3b81c", "_id": "559a4cd33694a8e27fd3ad34" }, { "payload": { "timestamp": { "value": 1436175601267, "type": "integer" }, "response": { "value": 0.052, "type": "integer" } }, "topic": "localhost", "_msgid": "89866afd.767998", "_id": "559a4cf13694a8e27fd3ad35" }, { "payload": { "timestamp": { "value": 1436175631279, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "4e73180.fb18ce8", "_id": "559a4d0f3694a8e27fd3ad36" }, { "payload": { "timestamp": { "value": 1436175661295, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "dd5865c0.22a798", "_id": "559a4d2d3694a8e27fd3ad37" }, { "payload": { "timestamp": { "value": 1436175691308, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "e71bbbc6.18e448", "_id": "559a4d4b3694a8e27fd3ad38" }, { "payload": { "timestamp": { "value": 1436175721320, "type": "integer" }, "response": { "value": 0.058, "type": "integer" } }, "topic": "localhost", "_msgid": "7a1981b6.85e68", "_id": "559a4d693694a8e27fd3ad39" }, { "payload": { "timestamp": { "value": 1436175751333, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "f39f55e.f0c60a8", "_id": "559a4d873694a8e27fd3ad3a" }, { "payload": { "timestamp": { "value": 1436175781348, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "801ca89f.7fe358", "_id": "559a4da53694a8e27fd3ad3b" }, { "payload": { "timestamp": { "value": 1436175811359, "type": "integer" }, "response": { "value": 0.057, "type": "integer" } }, "topic": "localhost", "_msgid": "af2c5b6c.50d3a8", "_id": "559a4dc33694a8e27fd3ad3c" }, { "payload": { "timestamp": { "value": 1436175841367, "type": "integer" }, "response": { "value": 0.078, "type": "integer" } }, "topic": "localhost", "_msgid": "84f3d636.7b0c28", "_id": "559a4de13694a8e27fd3ad3d" }, { "payload": { "timestamp": { "value": 1436175871381, "type": "integer" }, "response": { "value": 0.049, "type": "integer" } }, "topic": "localhost", "_msgid": "e729efb8.18d61", "_id": "559a4dff3694a8e27fd3ad3e" }, { "payload": { "timestamp": { "value": 1436175901397, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "ef8ac319.10754", "_id": "559a4e1d3694a8e27fd3ad3f" }, { "payload": { "timestamp": { "value": 1436175931411, "type": "integer" }, "response": { "value": 0.053, "type": "integer" } }, "topic": "localhost", "_msgid": "faff5c7b.0500a", "_id": "559a4e3b3694a8e27fd3ad40" }, { "payload": { "timestamp": { "value": 1436175961429, "type": "integer" }, "response": { "value": 0.062, "type": "integer" } }, "topic": "localhost", "_msgid": "270fe032.d8f02", "_id": "559a4e593694a8e27fd3ad41" }, { "payload": { "timestamp": { "value": 1436175991441, "type": "integer" }, "response": { "value": 0.054, "type": "integer" } }, "topic": "localhost", "_msgid": "41d890e1.be277", "_id": "559a4e773694a8e27fd3ad42" }, { "payload": { "timestamp": { "value": 1436176021463, "type": "integer" }, "response": { "value": 0.05, "type": "integer" } }, "topic": "localhost", "_msgid": "28d196a7.d72e6a", "_id": "559a4e953694a8e27fd3ad43" } ]

Davin Menhinick 082 874 4391

On 7 July 2015 at 16:12, tecywiz121 notifications@github.com wrote:

You'll need to wrap your data in an array:

[ [datasources["JSON"][0]["payload"]["timestamp"]["value"],datasources["JSON"][0]["payload"]["response"]["value"]], [datasources["JSON"][1]["payload"]["timestamp"]["value"],datasources["JSON"][1]["payload"]["response"]["value"]], [datasources["JSON"][2]["payload"]["timestamp"]["value"],datasources["JSON"][2]["payload"]["response"]["value"]] ]

If you're still having trouble, dump your data to JSON, and I'll take a closer look.

Hope that helps :)

— Reply to this email directly or view it on GitHub https://github.com/tecywiz121/freeboard-flot/issues/1#issuecomment-119216799 .

tecywiz121 commented 9 years ago

My pleasure :-)

CmdLnInt commented 9 years ago

I am still missing something here. Can you explain why when I enter [[1,1]],[[2,2]],[[3,3]] as a datasource nothing is plotted. However If I go and add each point individually the line is plotted?

To explain better I end up with exactly the same series as above and the line is plotted. I start with [[1,1]] save the widget options then go back and add ,[[2,2]] then save etc.

tecywiz121 commented 9 years ago

I'm not sure if you made a typo, but entering [[1,1]],[[2,2]],[[3,3]] shouldn't work at all since I don't believe it's valid javascript.

Entering [[1,1],[2,2],[3,3]] means something very different than entering [[1,1]] followed by [[2,2]], followed by [[3,3]].

The first case means "I want to draw three separate lines", and the second case means "I want to draw one line, with these three points."

CmdLnInt commented 9 years ago

Sorry that is a typo. Does [[1,1],[2,2],[3,3]] work for you because it doesn't for me. No line plotted and if I show the points every point is a different colour?

tecywiz121 commented 9 years ago

That's working as expected. [[1,1],[2,2],[3,3]] means make three different lines, of different colors.

CmdLnInt commented 9 years ago

In the basic example on the Flot Basic Example they have the data for d2 (blue line) as var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; Based on this I tried this as a datasource var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; return (d2); This does not work in freeboard-flot. How do I plot this line with freeboard-flot?

tecywiz121 commented 9 years ago

To plot that line with freeboard-flot, you'd have to have a data source that generates those specific points.