Dash - Cant get Markdown to appear above Graphs - plotly-dash

I am in the finishing stages of my first real Plotly Dash dashboard. I have run into a problem where I can't add dcc.Markdown to any dcc.Graph elements.
It works fine with the dash.DataTable, as shown in the image below.
I am using Python v3.10, Dash v 2.6.2 & Plotly 5.10.
I tried to then use the same methodology to add markdown to the chart next to it, but this throws an error
TypeError: The dash_bootstrap_components.Col component (version
1.2.1) with the ID "Graph(id='sun_burst1', figure={}, style={'height': '45vh'})" detected a Component for a prop other than children Prop
id has value Graph(id='sun_burst1', figure={}, style={'height':
'45vh'})
The DataTable is inside a Row and Col. The code is as follows. I haven't closed it below as it runs on for quite some time
dbc.Row(
# Dash Data Table
[dbc.Col(
[dcc.Markdown('### Top Risks ###'),
dash_table.DataTable(
id='table1',
columns=[
{'name': 'Risk ID', 'id': 'risk_id', 'type': 'text', 'editable': False},
Here is my erroneous code, Am I barking up the wrong Tree, does Markdown even work with dcc.Graph.
dbc.Col(
[dcc.Markdown('### Risk Breakdown ###'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '45vh'}),
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
]),
I really am quite stumped.
My page is made up of 2 rows, top row with 3 columns of width 4, Bottom Row 2 x 6 columns.

The answer was simple in the end. I had not taken into consideration where the 'children' ended.
I had the following which did not work. Note the terminating square bracket after the complete definition.
dbc.Col(
[dcc.Markdown('#### Breakdown of Risk by Risk Type - 2021 ####'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '40vh'})],
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
]),
Ther solution is as follows. encase the 'children in square brackets and leave the other column definitions outside.
Solution:
dbc.Col(
[dcc.Markdown('#### Breakdown of Risk by Risk Type - 2021 ####'),
dcc.Graph(id='sun_burst1', figure={}, style={'height': '40vh'})],
width=4, lg={'size': 5, "offset": 0, 'order': 'second'}
),
With this in place, I can now mark up my charts as I wish.
A big thank you to jinnynor at Plotly community for provoking my thoughts

Related

Setting a fixed amount of y Axis Lines to display on Apache ECharts

I'm trying to show only a certain amount of yAxis Lines in my Apache ECharts Chart.
I tried the following:
yAxis: [
{
type: 'value',
min:0,
max:6000
}
],
yAxis: [
{
type: 'value',
scale:true,
splitNumber:4,
}
],
I need to dislpay it like this:
For your information: I need this to work on every Chart-Type, Line Chart, Bar Chart etc.
Thanks in advance :)
So, as I have not got any answer. I wanted to share with anyone who might need it in the future, how I solved it.
I looked and got the highest number of the data for the current Chart and looked if it is near 1000 I rounded it up to 1000, if it is over 1000 I rounded it up to the nearest 200.
For example a number 1059 becomes => 1200 or the number 1215 becomes 1400.
Than simply get this Number and divide it by 4(to have 4 Lines).
And give this number to the yAxis max. For the min set 0.

amchart separate bullets individually

I am creating a simple time-based data plot using amcharts with has 5 values, its working great but every time there is 2 or more readings with the same value it stack up and only 1 bullet is visible, i tried to create a custom bullet but still no luck.
Is there a way to separate the bullets individually just to make it presentable.
Below is my code.
{
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#2980b9",
"bulletSize": 19,
"customBulletField": "bullet",
"id": "reading_4",
"lineThickness": 0,
"title": "reading_4",
"showHandOnHover": true,
"valueField": "column-8",
"balloonText": "<div style='margin:5px; font-size:12px;'>Reading 4: <b>[[value]]</b></div>",
"visibleInLegend": false,
},
Is there away to make it like below

Correct xpath for table data Scrapy

I'm trying to scrape data from a table with the following html:
Sorry for loading as an image, when I try to paste the code it does not display correctly, but I am only interested in the text associated with the highlighted classes.
I have tried to work down the tree using, for example, response.xpath('//table/tbody/td').extract() which returns nothing. I have also tried accessing the classes like, for example, response.xpath('//div/div/div/div/div/div/table/tbody/tr/td[class="pricePweek"]').extract() but again this is returning nothing. Is it the line breaks which are casuing the problem here?
I haven't had this issues when using Scrapy before, but have not tried to scrape from a table structure like this.
Your issue is that your are using Browser to validate your Xpath and then using them on Scrapy. Which may not give you a true picture. Consider the below html page
<html>
<body>
<table>
<tr>
<td class="name">Tarun</td>
</tr>
</table>
</body>
</html>
If you save the HTML in a file and open in browser
Can you see tbody added by the browser? This is not there in our source code. Which scrapy would see. So your xpath should not have tbody in it. If you use below it should work
price = response.xpath('//td[class="pricePweek"]').extract()
I am not certain what kind of output you prefer. Assuming that your expected output is one item per row of the data table, and here is a sample code (you may need to remove the ipython console promptions):
In [10]: for tr in response.xpath('//table/tbody/tr'):
...: item = dict()
...: item['title'] = tr.xpath('./td[#class="title"]/text()').extract_first().strip()
...: item['description'] = ','.join(x.strip() for x in tr.xpath('./td[#class="description"]//text()').extract())
...: item['pricePweek'] = tr.xpath('./td[#class="pricePweek"]//text()').extract_first().strip()
...: item['weeks'] = tr.xpath('./td[#class="weeks"]/text()').extract_first().strip()
...: item['bookFees'] = tr.xpath('./td[#class="bookFees"]/text()').extract_first().strip()
...: item['total'] = tr.xpath('./td[#class="total"]/text()').extract_first().strip()
...: item['sDate'] = tr.xpath('./td[#class="sDate"]/text()').extract_first().strip()
...: item['bookLink'] = tr.xpath('./td[#class="bookLink"]/a/#href').extract_first().strip()
...: print(item)
And here is the print:
{'title': 'En-Suite (Ground Floor)', 'description': '10.5sqm,3/4 bed,En-suite Bathroom (WC, Basin and Bath),Use of ground floor communal kitchen', 'pricePweek': '£163.00', 'weeks': '50', 'bookFees': '£250.00', 'total': '£8,150.00', 'sDate': '23 Sep 2017', 'bookLink': 'https://www.crm-students.com/crm-accommodation/application-form/?tx_wistcas_booknow%5BroomType%5D=2917&tx_wistcas_booknow%5Bwait%5D=1&tx_wistcas_booknow%5BbookingPeriod%5D=5386&tx_wistcas_booknow%5Baction%5D=book0&tx_wistcas_booknow%5Bcontroller%5D=RoomType&cHash=3dd0f1b377330cfbad6327b728678cbd'}
{'title': 'En-Suite (Ground Floor)', 'description': '10.5sqm,3/4 bed,En-suite Bathroom (WC, Basin and Bath),Use of ground floor communal kitchen', 'pricePweek': '£163.00', 'weeks': '49', 'bookFees': '£250.00', 'total': '£7,987.00', 'sDate': '30 Sep 2017', 'bookLink': 'https://www.crm-students.com/crm-accommodation/application-form/?tx_wistcas_booknow%5BroomType%5D=2917&tx_wistcas_booknow%5Bwait%5D=1&tx_wistcas_booknow%5BbookingPeriod%5D=6075&tx_wistcas_booknow%5Baction%5D=book0&tx_wistcas_booknow%5Bcontroller%5D=RoomType&cHash=db85ff90cacb487ee98942d955141b09'}
{'title': 'Large Studio (Courtyard)', 'description': '22-23m,2,3/4 bed,Generous studio with same features as "Standard" but slightly larger,Dual Occupancy is available for an additional 20% of the advertised rate per week', 'pricePweek': '£223.00', 'weeks': '51', 'bookFees': '£250.00', 'total': '£11,373.00', 'sDate': '16 Sep 2017', 'bookLink': 'https://www.crm-students.com/crm-accommodation/application-form/?tx_wistcas_booknow%5BroomType%5D=718&tx_wistcas_booknow%5Bwait%5D=1&tx_wistcas_booknow%5BbookingPeriod%5D=5652&tx_wistcas_booknow%5Baction%5D=book0&tx_wistcas_booknow%5Bcontroller%5D=RoomType&cHash=e959ccd71b62be9211eb1dd3ad5b362c'}
{'title': 'Large Studio (Courtyard)', 'description': '22-23m,2,3/4 bed,Generous studio with same features as "Standard" but slightly larger,Dual Occupancy is available for an additional 20% of the advertised rate per week', 'pricePweek': '£223.00', 'weeks': '49', 'bookFees': '£250.00', 'total': '£10,927.00', 'sDate': '30 Sep 2017', 'bookLink': 'https://www.crm-students.com/crm-accommodation/application-form/?tx_wistcas_booknow%5BroomType%5D=718&tx_wistcas_booknow%5Bwait%5D=1&tx_wistcas_booknow%5BbookingPeriod%5D=6075&tx_wistcas_booknow%5Baction%5D=book0&tx_wistcas_booknow%5Bcontroller%5D=RoomType&cHash=5f798c129cfe56dead110ed5d80efa75'}
Note that since some cells contain other elements, you need handle them properly. For example, the description cell contains a unorder list, here I concatenate them by the seperation ,.
Hope this would be helpful.
Thanks

More than four panels Sublime Text?

does any know any packages for Sublime Text that will allow more than 4 panels at once? You can change between different layouts "Grid: 4" or "Columns: 4" but I'm looking for something along the lines of an 8 panel grid or possibly another combination with 6-8 panels at once.
For more details on creating a new menu item, see Custom layouts, Sublime text 2.
I prefer to just hook up a keyboard shortcut to change the layout by editing the Preferences → Key Bindings - User file. Here is a 6 panel layout keyboard shortcut, which is working for me in Sublime Text 3.
[
{
"keys": ["alt+shift+6"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.25, 0.5, 1.0],
"rows": [0.0, 0.5, 1.0],
"cells":
[
[0, 0, 1, 1], [1, 0, 2, 1], [2, 0, 3, 1],
[0, 1, 1, 2], [1, 1, 2, 2], [2, 1, 3, 2]
]
}
}
]
Check out the Origami plugin, available through Package Control or on [GitHub}(https://github.com/SublimeText/Origami). It basically allows you to split your window however you want - you can create new panes, delete panes, move and clone views from pane to pane - you don't need to manually edit .sublime-keymap files. Somebody mentioned it a month or two back, and I really like it. If you look at my answer to that question, it details how to save an Origami layout with a custom key binding.
EDIT: I just noticed somebody beat me to the recommendation in the comments. It's still a good answer, though...

Mathematica - CSV to Multidimensional Charts

I have a CSV file with 5 columns and about 2*104 rows that I need to visualise.
I've imported the file like so:
data = Import["res.csv", "CSV"];`
Now, I'm going to want to generate a lot of visuals from this - all 5 dimensions on a single plot as well as various cross sections.
My questions:
If I want to select, say columns 1, 4 and 5 from my data and feed them to ListPlot3D how would I do that?
And, values in columns can be grouped. So if I wanted to ListPlot3D colums 1, 2, 4 and 5, but I want to group columns 1 and 2 on the same axis, how would I tell Mathematica to do that?
Thanks.
I hate to disagree with a fellow poster especially after it has been accepted, but the Transpose is unnecessary. Almost everything you're asking for can be done within the context of Part:
ListPlot3D[ data[[All, {1, 4, 5}]] ]
Since matrices are stored row-wise within Mathematica, [[All, {1, 4, 5}]] can be read [[rows, columns]]. More specifically, All indicates here that you want all rows, but you can specify specific rows as well. Another construct that may be of interest is Span which is used to specify groups of indices, and if your CSV file contains a header row, you can strip it from your data using
ListPlot3D[ data[[ 2 ;; , {1, 4, 5}]] ]
As to your second requirement, to use both columns 1 and 2 as the x coordinate, then it is simply
ListPlot3D[ {data[[All, {2, 4, 5}]], data[[All, {1, 4, 5}]]} ]
and you change All to 2;; if you wish to strip off the header row.
If I understand you correctly that would be
ListPlot3D[Transpose[{data[[All, 1]], data[[All, 4]], data[[All, 5]]}]]
and for the multiple sets:
ListPlot3D[
{
Transpose[{data[[All, 1]], data[[All, 3]], data[[All, 4]]}],
Transpose[{data[[All, 2]], data[[All, 3]], data[[All, 5]]}]
}
]