Graph many lines in PLOT.LY

Hi,

I learn this tutorial, " https://plot.ly/electric-imp/tmp36-temperature-tutorial/ ", but can’t graph many lines.
Any idea ?

Thanks

Wanted to bump this. I am having the same difficulty. Here is my code that I tried to send 2 data points. Does not work, what is required to send 2 sets of data and get 2 lines on one graph?

I know the Device data is getting to the Agent, so I will skip that routine.

Agent:
`device.on(“new_readings” function(msg) {

//Plotly Data Object
local data = [{
    x = msg.time_stamp, // Time Stamp from Device
    y = msg.TempReading, // Sensor Reading from Device
    x1 = msg.time_stamp, // Time Stamp from Device
    y1 = msg.HumReading // Sensor Reading from Device
}];

// Plotly Layout Object
local layout = {
    fileopt = "extend",
    filename = "TempHumImpPlot",
};

// Setting up Data to be POSTed
local payload = {
un = "xx",
key = "yyyyy",
origin = "plot",
platform = "electricimp",
args = http.jsonencode(data),
kwargs = http.jsonencode(layout),
version = "0.0.1"
};`

try something like this - should give you multiple independent axes, though I don’t have a device with me to test right now:

`
//Plotly Data Object
local data = [
{
x = msg.time_stamp, // Time Stamp from Device
y = msg.TempReading,// Sensor Reading from Device
name = “Temperature”
},
{
x = msg.time_stamp, // Time Stamp from Device
y = msg.HumReading, // Sensor Reading from Device
name = “Humidity”,
yaxis = y2
}
];

// Plotly Layout Object
local layout = {
fileopt = “extend”,
filename = “TempHumImpPlot”,
layout={
yaxis={
title=“Temperature”,
side=“left”,
}
yaxis2={
title=“Humidity”,
side=“right”,
overlaying=“y”,
}
}
};
`

you can find other “magic” (sparsely documented) plotly features scattered throughout this example:

http://electricimp.com/docs/hardware/imp003evb/logging/

that code has some hacky timestamp stuff in it which prevents use of http.jsonencode(data), so ignore that part :wink:

Thanks gino, I will get that a try…

Thanks Gino for the useful advice!
I’m working on a multiple-sensor data logging device with electric imp and plot.ly so this stuff is essential in my project.
Your code is almost right: you just forgot a “,” after the “}” of the first Ploty Data Object :wink:

local data = [ { x = msg.time_stamp, // Time Stamp from Device y = msg.TempReading,// Sensor Reading from Device name = "Temperature" } , { x = msg.time_stamp, // Time Stamp from Device y = msg.HumReading, // Sensor Reading from Device name = "Humidity", yaxis = y2 } ];

ah yes. I’ve fixed it. thanks!

Thanks for the good info! It works but my data shows all the timestamps twice!

I think Plotly may have changed the data format, as all of my graphs have stopped working in the past couple of weeks. We actually have a new library for Plotly here: https://github.com/electricimp/Plotly/tree/v1.0.0 but I suspect it might suffer from the same issue. Could you try it out?

thanks for the hint :D. I replace my old code with the one from the sample. It works but my timestamps are saved multiple again (for each y-value). Please see my picture. I get the timestamps from the device.

With this error my grid fills up very fast and plotly automatically creates a new one.

Any solutions for this problem?

We’re looking at it and may reach out to Plotly for clarification on the API. Hopefully we’ll have something to report next week.

If you are just trying to log and plot data, you may want to try pushing your data to data.sparkfun.com and then you can plot it using analog.io.

Let’s hope analog.io charts are better than their website!

To help evaluate reasons for multiplicity of dates, it may help if you can explain what type of chart are you trying to create and what “Innen” is in the first column of your data (reference your image of date table), as this is a unique value in each case.

Regarding alternatives for those interested in the more scientific / statistical charting capability you could consider https://datadrop.wolframcloud.com/ to upload your data as they have analytical and visualisation options. There is an imp library for it.

I only want to plot few temperatures from my house and the heater. I will check the method posted by imp-guru :wink:

Look at thingspeak.com. It is quick to set up and simple to use.

Not everyone is really tech savvy at PHP scripting or website stuff, but in some cases it might be best to get a shared webhost account and use your own website (and domain name) to collect your data. You are in total control of everything. Data can be used however you want including Google Charting for visual graphs. Some webhosts are only about $40-$50 per year. You can of course use the website for other things as well, perhaps your own cloud storage. It doesn’t have to be web pages.

This is such a great forum with talented people from all aspects of the industry. Any questions about PHP, MySQL, etc, just ask. You’ll get good answers.

Everyone would be surprised if I didn’t put in a plug for my friends at GroveStreams. Storing data there is simple and graphing many lines (or other forms of graphs) is simple as well. I have some very complex dashboards with multiple graphs, each with multiple data streams graphed.

They have an Electric Imp example in Support->Developer Center->Feed Examples->Electric Imp - Quick Start.

See: https://grovestreams.com/developers/getting_started_elec_imp_quick.html

I tried to take the 2 line graph example (that was working fine btw) and tried to make it a 4 line graph but Plot.ly still only sees 2 lines
`
local frm = @"[{"“x”": %i000, ““y””: %f, ““name””: “”%s""},{"“x”": %i000, ““y””: %f, ““name””: “”%s""},{"“x”": %i000, ““y””: %f, ““name””: “”%s""},{"“x”": %i000, ““y””: %f, ““name””: “”%s""}]“
frm = format(frm, timestamp, T1CurrTemp, T1SafeName, timestamp, T2CurrTemp, T2SafeName, timestamp, T3CurrTemp, T3SafeName, timestamp, T4CurrTemp, T4SafeName) // Formatting options
local query = {
un=PLOTLY_USER,
key=PLOTLY_KEY,
origin=“plot”,
platform= SiteSafeName,
// Data
args=frm, // Formatting options
kwargs=http.jsonencode({
filename=PLOTLY_FILENAME
fileopt=“extend"
world_readable=“true"
layout={
title=SiteSafeName
xaxis={
title=“Date"
type=“date”
// Set autorange to false to use GRAPH_WINDOW setting
autorange=true
range=[format(”%i000”, timestamp - (GRAPH_WINDOW * 3600)), format(”%i000”, timestamp)]
}
yaxis={
title=“Temperature (°F)”,
side=“left”,
autorange=true,
}
}
})
}
server.log(frm)
local query_encoded = http.urlencode(query);
local request = http.post(“https://plot.ly/clientresp”, {}, query_encoded);
local response = request.sendsync();
local reply = http.jsondecode(response.body);
// Display any responses we get from Plotly
if (reply[“message”] != “”) {
server.log(reply[“message”]);
}
if (reply[“warning”] != “”) {
server.log(reply[“warning”]);
}
if (reply[“error”] != “”) {
server.log(reply[“error”]);
}
server.log("Graph available at " + reply.url);

`

@Gerrikoio
Thanks alot for the hint. It works very well BUT I cant include all my readings into one multi diagram. I will give GroveStreams a try.