0

Multiple lines on line plot
Moderators: adafruit_support_bill, adafruit

Please be positive and constructive with your questions and comments.

Multiple lines on line plot

by wsquared58 on Thu Aug 15, 2019 2:31 pm

I recently saw something that said you can plot more than one data point on a line graph so confirmed that but was wondering how you can either toggle between different Y axis values or put one on right side of graph, or both?

Along that same line, is there any info on more advanced IO dashboard presentation via html or anything like that? While I am far from proficient, at this point I probably know more about html & css than I do about python.

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by wsquared58 on Mon Aug 19, 2019 2:42 pm

Here is what I am trying to do and I have not seen anything addresses what is shown in the attached jpg.

The example I posted appears to be all the same datab ut from different locations so there is not a scaling issue but I'm also looking to plot lines of different units so am trying to understand how I would get the axis to change
Attachments
ADAFRUIT IO Multi-Line.jpg
ADAFRUIT IO Multi-Line.jpg (51.1 KiB) Viewed 161 times

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by brubell on Tue Aug 20, 2019 11:26 am

I recently saw something that said you can plot more than one data point on a line graph so confirmed that but was wondering how you can either toggle between different Y axis values or put one on right side of graph, or both?


We don't currently support switching left/right y-axes, but you can pick up to 5 feeds for a line chart.


Along that same line, is there any info on more advanced IO dashboard presentation via html or anything like that? While I am far from proficient, at this point I probably know more about html & css than I do about python.

We don't support i-framing dashboards or embedding dashboards.

brubell
 
Posts: 491
Joined: Fri Jul 17, 2015 10:33 pm

Re: Multiple lines on line plot

by wsquared58 on Tue Aug 20, 2019 1:47 pm

I'll try and approach this one item at a time using the JPG I posted. I will use the upper left temperature trend and grab sections as needed
On this first example, how do you get the descriptive text to be the color of the trend line. How do you get immediately prior to that description to be a line vs a box.
Line color and description.JPG
Line color and description.JPG (12.86 KiB) Viewed 137 times

First pic is from example I found.


Second picture is from my dashboard
My Dashboard.jpg
My Dashboard.jpg (8.36 KiB) Viewed 137 times


As an aside to this, I worked in a power plant for a long time and we had a system that went by a few different names but was all the same company. We captured over 30k points per 2 seconds 24/7/365 just in my area of responsibility.

We refered to it as ParcView but it was a product from CapstoneTechnology.com http://www.dataparc.com/parcview/ It was a damn good data visualization tool.
If you clicked on a line in the trend in would toggle the left axis to reflect that line while keeping all the other lines in view.

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by wsquared58 on Fri Aug 23, 2019 10:18 am

Has anyone got any thoughts on how on the example screen grabs the IO plot developer was able to change the font color of the description to match the trend line color and also how I would get to trend lines with dissimilar units to both be visible within a single plot?

Even answers along the lines of "I have no idea how they did that" would be welcome or if you don't understand what I am asking I can try and better explain.

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by brubell on Fri Aug 23, 2019 10:30 am

how do you get the descriptive text to be the color of the trend line

Colors are assigned randomly to the feeds selected, you can select up to 5 feeds to display on the line plot...
forum_1.png
forum_1.png (54.81 KiB) Viewed 115 times



Once data is sent to each of the feeds, they'll display below the chart in different colors.
forum_2.png
forum_2.png (20.4 KiB) Viewed 115 times


Is this what you meant?

brubell
 
Posts: 491
Joined: Fri Jul 17, 2015 10:33 pm

Re: Multiple lines on line plot

by wsquared58 on Fri Aug 23, 2019 11:07 am

InkedLine color and description circledresized2.jpg
InkedLine color and description circledresized2.jpg (5.76 KiB) Viewed 107 times
This picture is what I am trying to make happen.

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by brubell on Fri Aug 23, 2019 11:09 am

wsquared58 wrote:
InkedLine color and description circledresized2.jpg
This picture is what I am trying to make happen.


Those may be feed names which are descriptive.

brubell
 
Posts: 491
Joined: Fri Jul 17, 2015 10:33 pm

Re: Multiple lines on line plot

by wsquared58 on Fri Aug 23, 2019 3:22 pm

There is the Feed Key and the Feed Name. That is the descriptive part. How did they get that feed name to be colored. Look at what I circled. Those descriptive names, the font color is the same color as the line.
Almost like

<font color="red">Bathroom Temperature</font>

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by jwcooper on Fri Aug 23, 2019 3:43 pm

The examples you are providing are from a previous iteration of our dashboard that we no longer support. We have updated our charting functionality quite a bit since we originally launched Adafruit IO.

Some of our guides/tutorials may have examples of the older dashboards. That being said, the majority of the functionality should continue to function if you are working through one of the examples from learn.adafruit.com or elsewhere.

Also, if you have any suggestions for adding more functionality to the dashboard blocks that you or others would find useful, we have the following thread that we track closely: viewtopic.php?f=56&t=130408

jwcooper
 
Posts: 670
Joined: Tue May 01, 2012 9:08 pm

Re: Multiple lines on line plot

by wsquared58 on Fri Aug 23, 2019 4:18 pm

Do you have something that tells, in detail, the functionality of the different IO blocks?
For example the gauge block. I was messing with it a while back with the BME280 and wanted to have a low warning and a high warning.
BME280 is reading ambient outside temperature. I wanted a low say below 35F and a high above 105 F.
I am used to monitoring instruments galore and they would indicate red below a lower limit and red above the high alarm.
They all typically had a deviation alarm that was used to flag that you were deviating from desired value but were not out of limit yet.

The system we used was http://www.dataparc.com/parcview/ this link. Was a Cadillac system but I'm sure crazy expensive

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Re: Multiple lines on line plot

by jwcooper on Fri Aug 23, 2019 4:25 pm

This is about the best that I know of:
https://learn.adafruit.com/adafruit-io- ... ing-blocks

Really, the best thing you can do is try each block. The options available on the setup is fairly descriptive. If you think of more useful features for existing blocks, we're always open to suggestions in that forum post. :)

Dataparc looks interesting, but Adafruit IO is more at the hobbyist level, and not industrial level. Those systems are filled with a lot of features, but those features add complexity (usually involving consultants to help set things up, etc). Our goal is to be the easiest system to get data from a sensor to a dashboard that easily displays it in a variety of ways.

Also, another idea is to import your IO data to something like the open source Grafana, which would offer quite advanced charting functionality (at the added cost of setup complexity).

jwcooper
 
Posts: 670
Joined: Tue May 01, 2012 9:08 pm

Re: Multiple lines on line plot

by wsquared58 on Fri Aug 23, 2019 5:08 pm

As far as DataParc, I was an end user. Virtually all drag and drop and right mouse click configuration dialogs.

I'll put these in the forum link also but here are a few obeservations.

1) No matter what a point is set to, as far as scale (0psi - 10 psi), the X axis minimum and maximum represent 0% - 100% of the configured scale, so dissimilar points should show up even if they are completely dissimilar such as temperature and pressure. For example, BME280 Temp indicates 70F, I set scale to 40F min & 100F max and Barometric Pressure indicates 29.5"Hg (I've done unit conversions in the python code) and I set 27" Hg Min and 32"Hg Max and I put them on same line chart block they should both be visible. They are both inside of their respective min and max scales.

2) Clicking on the temperature line puts temperature X-axis in focus and presents those units. Clicking on pressure line changes focus and X-axis scale changes to pressure units.

wsquared58
 
Posts: 119
Joined: Sun Jun 09, 2019 9:13 pm

Please be positive and constructive with your questions and comments.