I need to add a heading above an image but have not found a way to get the heading above the image so far. Does anybody have a hint how to get the heading above the image? You see that I tried with an added html.Br line but that raised an error message.
To be precise: the heading should be above the image (it´s a heading), not overlapping.
The code is:
#https://dash.plotly.com/annotations
ddk.Row(
style={'height': 'calc(20vh - 80px)'},
children=[html.H5("I want to be above this Img"),
#html.Br(),
html.Img(
src='data:image/png;base64,{}'.format(encoded_image.decode()),
)
]
),
You are placing your heading and image in a Row component which is used when you want to have inline children. Replace your Row component with a Block component.
ddk.Block(children=[
html.H5("I want to be above this Img"),
html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
])
Related
I am trying to update Span using ColumnDataSource, but the information is not being passed onto the source. Span unfortunately does not have a paremeter "source", so is there a better way?
I have defined my sources, figure and line like so:
m1_source = ColumnDataSource(data=dict(x1=[], y1=[]))
m1_spans = ColumnDataSource(data=dict(x1=[]))
p = figure(x_axis_type="datetime", title="", sizing_mode="fixed", height = 500, width = 1400)
p.line(x ="x1", y="y1", color = 'blue', source=m1_source)
Then I have a for loop that should ideally plot multiple spans, each 'i' will be a separate timestamp:
for i in m1_spans.data['x1']:
p.add_layout(Span(location=i, dimension='height', line_color='red', line_dash='solid', line_width=1))
This is taken from my update() function:
m1_source.data = dict(
x1=machine_1_vals['mpTimestamp'],
y1=machine_1_vals['Value'])
m1_spans.data = dict( x1=ToolsDF.loc[ToolsDF['Value'] == float(vals['Tool_val'])]['Timestamp'])
I have checked this, and m1_spans does successfully return multiple timestamps, so the error shouldn't be here.
The reason I am confused, is because my p.line will successfully update with no issues, but it does have a source parameter, while span does not.
I would be really appreciative for any advice about how to solve this issue.
If I should have supplied more information, I apologize and can update as needed, I just tried to keep it brief for you.
Thanks.
Span objects do not currently have an ability to be "powered" by a ColumnDataSource. Each Span only draws one span, specified by its own location property.
You will need to update the location property individually on each Span object in order to update it. Alternatively, if you absolutely want to be able to drive updates through a CDS, you could look at using a multi_line, segment, or ray glyph instead. Those all have different ways to configure their coordinates, so you'd have to see which is most convenient to your use-case. But they all come with one trade-off, which is that none of them have the full "infinite extent" that a Span supports.
I am trying to make my dash datatable interactive with my Mapbox. So when I click on “A” highlighted as the image shown below, it should show me the latitude/longitude of the point on mapbox. Correct me if I am wrong but I need to use the callback function - clickData. But I tried a few times using clickData but it did not work. Was wondering if there is any code I can refer to or any website out there that talks about dash datatable interactive with clickData . Thank you!
This is my table:
This is my coding for mapbox:
fig = px.scatter_mapbox(df4_1.to_dict('records'), lat="Latitude", lon="Longitude", hover_name="Name", hover_data=["Id"],color_discrete_sequence=["purple"], zoom=9, height=450)
fig.update_layout(mapbox_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
clickData is not a property of a dash datatable, what you have, is an active_cell property. There are examples on how to use the active cell to update plots. The caveat is that you don't get the value inside of the selected cell, but the row, and column id. This active_cell is not reliable if you have sorting enabled, or editing.
They give an example on how to get the value if you have a static datasource(df), but If you don't have a static datasource then you need to use a sort of data sharing solution between callbacks like a dcc.Store. https://dash.plotly.com/datatable/interactivity
Anyway at this point the problem just increased in complexity so I would suggest a different simpler model:
In that case I would say to separate the mapbox and the datatable entirely and just have a text input that generates the plot and have a simple callback:
#put this before your mapbox
dcc.Input(
id="text_input_id",
type="text,
placeholder="input name of mapbox")
#app.callback(
Output("out-all-types", "children"),
Input("text_input_id", "value"),
)
def render_mapbox(val):
data=get_data(val) #do your stuff, get the data, make the plot
fig= ....
return fig
I have a pre-existing document that I need to add a picture to. The picture needs to be inside a frame in the upper right corner of the document. The frame it needs to go in is already part of the document. All I need to do as far as I understand is add a run to the paragraph inside the frame (which is a v:shape element) and then add a picture to that and the position of the picture should assume the position of the surrounding element. The only issue is I can only get a paragraph, run or picture to get added to the end of the document but not to a specific element farther down the document. Also I whereas I can set a size to the image there is no option to set the position of it on the page. Is there anyway to do this? Again what I'm wanting to do is add a picture to a document at a specific x, y position on the page.
edit:
Here's my latest attempt. I don't know any other way than to drill down deep into the document to get the element I want to add a picture to:
for r in doc.paragraphs[0].runs:
for r2 in r._r.iterchildren():
if r2.tag == '{http://schemas.openxmlformats.org/wordprocessingml/2006/main}pict':
for r3 in r2.iterchildren():
if r3.tag == '{urn:schemas-microsoft-com:vml}shape':
for r4 in r3.iterchildren():
if r4.tag == '{urn:schemas-microsoft-com:vml}textbox':
for r5 in r4.iterchildren():
if r5.tag == '{http://schemas.openxmlformats.org/wordprocessingml/2006/main}txbxContent':
for r6 in r5.iterchildren():
if r6.tag == '{http://schemas.openxmlformats.org/wordprocessingml/2006/main}p':
#pic = doc.add_picture('image.jpg', width=1508760, height=1905000)
#pic_xml = pic._inline.xml
#r6.append(pic._inline)
pr = r6.add_run()
pr.add_picture('image.jpg', width=1508760, height=1905000)
I've read examples that say to add a run to a paragraph and then add a picture to that run. This is what I'm trying but all I get is an error like this: "'CT_P' object has no attribute 'add_run'"
The fact is though is that you actually can add a run to a paragraph but this is saying that the element I'm drilling down to is a different object type than a regular paragraph object. Does that make sense? Do I have to covert this element somehow?
In the below image, observe the border around a map generated from Chart.save() to either HTML or JSON canvas (the border is inside the canvas, not CSS styled).
For any other type of mark, one would expect to be able to use Chart.configure_view() to set strokeWidth=0 to remove the border, but this does not appear to affect this geoshape chart.
The vegaEmbed embed options do not appear to document what creates this border.
Is it possible to style or remove the border?
The way to remove the border is using configure_view(strokeWidth=0).
Here is an example, using the most recent version of Altair and the most recent version of Vega-Lite:
import altair as alt
from vega_datasets import data
counties = alt.topo_feature(data.us_10m.url, 'counties')
source = data.unemployment.url
alt.Chart(counties).mark_geoshape().encode(
color='rate:Q'
).transform_lookup(
lookup='id',
from_=alt.LookupData(source, 'id', ['rate'])
).project(
type='albersUsa'
).configure_view(
strokeWidth=0
)
If you see different results, it might be that your frontend renderer is out of date, and you should make certain you're using the most recent version of Vega-Lite to render your chart.
In the first image, I have a map when I enter a certain range of numbers. As you can see on the second map, it maps out blank. I tried out different range and some of them crashes and outputs a blank map. For example, 300th address does not work even if I put the range from 299 to 301 and 450 does not work either. There are certain addresses block me from mapping it out. I already set the data limit to max through terminal as well.
I've found the answer to my own question. As for the popup, I added parse_html=True on popup which fixed my problem. Also I have just put the popup and icon function separately for clarity
map2 = folium.Map(location=[43.7, -79.4], tiles='cartodbpositron',
zoom_start=11) # set default location on the map
marker_cluster = folium.plugins.MarkerCluster().add_to(map2) # add the
location to the marker cluster
for point in range(len(locationlist)): # loop through the plots
# include popup
popup1 = folium.Popup(df['Condo Address'][point], parse_html=True)
# include icon
icon1 = folium.Icon(color=df['color'][point])
# mark every addresses in the map from the data
folium.Marker(locationlist[point],popup=popup1,icon =
icon1).add_to(marker_cluster)