Comments (15)
Here it is
#215
from lovelace-plotly-graph-card.
Again, more than great. And surprisingly I understand, what you are doing. So the best starting point for further ideas and adoptions on my side! 👍
from lovelace-plotly-graph-card.
Very interesting idea. I'll modify the lambdas so they can return z values to enable this.
For standard cases, it would probably be better to control it through purely through yaml: would you post yaml examples of how you imagine the config could look like? I'm not sure of what to do with duplicated entries (e.g this Tuesday at 12 it was 20° and last Tuesday at 12 it was 15°)
from lovelace-plotly-graph-card.
I think the user should be able to set at least
a colorscale: https://plotly.com/javascript/colorscales/#custom-colorscale for z values
and then to start with days on x and hours on y. Later an improvement could be a yaml to define y (1-6, 6-12, 13-18, 18-0) to have only four blocks, etc.
The question for me is only, how you would get the z values. I looked for bar-charts in plotly-graph-card, but didn't find an example. Thought, that you are combining data as well.
Anyway, Great would be, if the user could set the aggregation: min, max, average, median or whatever for the z values of the coresponding y-frames.
I don't understand question around duplicated entries. Last Tuesday would be e.g. x2y12z15. This tuesday x9y12z15, if the chart would show starting with monday (x1).
from lovelace-plotly-graph-card.
Hey @emufan
I'm working on a new feature that allows adding lambdas in any property of the entity. This will allow for what you are requesting.
For the heat map, would you post a yaml of what you wish you could do so I can test this? (the yaml will obviously not work yet, but I'll fix it and test if it works in my unpublished version)
from lovelace-plotly-graph-card.
👍
I thought about something like this.
type: custom:plotly-graph
chart-type: heatmap
entity: sensor.processor_percent
days_to_show: 5d
hours_to_show: 0-24 # or 8-20, 12-20, ...
layout:
xaxis-column: 1d # perhaps first fixed, because most intuitive
yaxis-row: 4h # would give 6 rows, 4 roww, 2 rows in examples above
# days and hours to show together with the ticks, will draw a grid with 5 columns and 6/4/2 rowws
colorscale:
'0.0', 'rgb(165,0,38)'
'0.555555555556', 'rgb(224,243,248)'
'1.0', 'rgb(49,54,149)'
in this case, z have have to be the (lamda) average of the grid cells, so. e.h. today, 0-4h, 4-8 h, etc.,
from lovelace-plotly-graph-card.
When possible I try to avoid diverging from plotly's API, it's simpler for me and gives you more flexibility.
How would you do this with plotly.ja directly?
from lovelace-plotly-graph-card.
Either I didn't get it or I don't know. 😥
My thought on the example is, that with these settings, the card would combine/calculate the values, which are then passed to plotly. Here from 5d,8-20,1d,4h example above. z is calclulated then from the values in x y timeframes
z: [[0,1, null, 0.5, 0, 1], [0.3, 1, 0.3, 0.7, 0.9], [0, 0, 1, 0.5, null]],
x: ['11.05.', '12.05.', '13.05.', '14.05.', '15.05.'],
y: ['8-12', '12-16', '16-20'],
according to https://plotly.com/javascript/heatmaps/#heatmap-with-categorical-axis-labels
from lovelace-plotly-graph-card.
It took me a year, but you can do it!
Closed by the release of v3.0.0
from lovelace-plotly-graph-card.
It took me a year, but you can do it! Closed by the release of v3.0.0
This is sooo great.
I wonder if you have a simple example for such kind of heatmap?
With e.g. average temperature of time-frames in each block?
Paerhaps I have overseen is, but didn't fine it until now.
from lovelace-plotly-graph-card.
I don't. You'll need a bit of JavaScript. Can you code?
Here's a different example you can use as a base.
type: custom:plotly-graph-dev
title: 2D Histogram - Last 10 days
entities:
- entity: sensor.openweathermap_pressure
period: hour
internal: true
fn: $fn ({ xs, ys, vars }) => { vars.pressure = ys; vars.xs = xs; }
- entity: sensor.openweathermap_temperature
period: hour
internal: true
fn: $fn ({ ys, vars }) => vars.temperature = ys
- entity: ''
x: $fn ({ vars }) => vars.temperature
'y': $fn ({ vars }) => vars.pressure
type: histogram2d
mode: lines+markers
line:
color: null
hours_to_show: 240
raw_plotly_config: true
ha_theme: true
layout:
margin:
t: 10
l: 70
r: 0
b: 70
height: 500
zaxis:
title:
text: Humidity
yaxis:
title:
text: Pressure
xaxis:
title:
text: Temperature
autorange: true
from lovelace-plotly-graph-card.
Partly. Most of the time I'm able to search, adopt, afjust, ... - but need mostly a starting point. And for this, I only found examples for heatmaps with different entities on the axis and then a count on the z. As in your example.
But I would like to have only one entity, but different scales on x and y and then e.g. mean on z. Of for this, I don't have a fitting starting point, how to get the values, etc. Like in example above.
But of course, I will stay searching for examples. If you have a good one, I would really appreciate.
from lovelace-plotly-graph-card.
You can use the same entity in different rows and do the same as above :)
from lovelace-plotly-graph-card.
I know. But I have no starting point or idea how to calculate the mean for such z field, e.g. mean of temperature, Monday, 0-8h, Tuesday, 9-16h accordingly. or to set a scale of 7 entries on x and 3 on y as in example above. I will keep searching and trying to understand how it works. So either I get it working via try and error or someday, someone has a simple example to extend. We'll see. Until now, I understand the examples, but they are mostly from the same type and not fitting to my goto idea above. Thanks for your help anyway.
from lovelace-plotly-graph-card.
Ok, I'll give it a try
from lovelace-plotly-graph-card.
Related Issues (20)
- Error if HA port is changed from 8123 HOT 14
- reset_every filter does not consider start of [day|week|month] HOT 3
- Color Threshold or Color Scale in chart HOT 1
- Data not being updated on real time HOT 16
- Display times with HA selected timezone?
- Gaps in data when scrolling HOT 16
- Non null flat line joining when no data HOT 23
- Pie chart not working HOT 3
- URL duplicated in the `no_default_layout` deprecation message HOT 3
- Add a "year" grouping option in period
- Edition window moves under Safari
- Add notation points along realtime graph.
- Range of data not updating when zooming out HOT 4
- "resample" does not allign traces iwth different initial starting points HOT 1
- Show value missing when using filter HOT 2
- Resample is not timezone aware HOT 2
- To be able to detect whether a trace is displayed (enabled or disabled in the legend) HOT 3
- Statistic data is not renewed within graphs's live time HOT 1
- Fillgradient in scatter graphs HOT 1
- FR: Using Plotly.Fx.hover in callbacks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lovelace-plotly-graph-card.