Say I have a simple graph like that:
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
The code produces the following graph:
If I click on one of the two labels "SF" or "Montréal", this particular label is greyed out and removed from the graph. Is there a way to grey out labels by default? I would like to plot a graph with a lot of labels, but it looks like a mess. But I also do not want to exclude any data. A nice way to achieve a clean look but also retain the completeness of the data would be to hide these labels per default. Thanks in advance
Thats quite easy to achieve in plotly.
You have to add 'visible': 'legendonly' to your trace.
Example:
'data': [
{'x': [1, 2, 3],
'y': [4, 1, 2],
'type': 'bar',
'name': 'SF',
'visible': 'legendonly'
},
{'x': [1, 2, 3],
'y': [2, 4, 5],
'type': 'bar',
'name': u'Montréal'
},
],
Related
For older versions of plotly, for example in Jupyterlab, you could simply run figure to inspect the basics of your figure like this:
Ouput:
{'data': [{'marker': {'color': 'red', 'size': '10', 'symbol': 104},
'mode': 'markers+lines',
'name': '1st Trace',
'text': ['one', 'two', 'three'],
'type': 'scatter',
'x': [1, 2, 3],
'y': [4, 5, 6]}],
'layout': {'title': 'First Plot',
'xaxis': {'title': 'x1'},
'yaxis': {'title': 'x2'}}}
Code for versions prior to V4:
import plotly.plotly as py
import plotly.graph_objs as go
trace1 = go.Scatter(x=[1,2,3], y=[4,5,6], marker={'color': 'red', 'symbol': 104, 'size': "10"},
mode="markers+lines", text=["one","two","three"], name='1st Trace')
data=go.Data([trace1])
layout=go.Layout(title="First Plot", xaxis={'title':'x1'}, yaxis={'title':'x2'})
figure=go.Figure(data=data,layout=layout)
#py.iplot(figure, filename='pyguide_1')
figure
If you do the same thing now with a similar setup, the same approach will not produce the figure basics, but rather plot the figure itself:
Code:
import pandas as pd
import plotly.graph_objects as go
trace1 = go.Scatter(x=[1,2,3], y=[4,5,6], marker={'color': 'red', 'symbol': 104},
mode="markers+lines", text=["one","two","three"], name='1st Trace')
figure = go.Figure(data=trace1)
figure
Output:
In many ways this is similar to how you for example would build and plot a figure with ggplot in R. And since plotly is available for both R and Python I thinks this makes sense after all. But I'd really like to know how to access that basic setup.
What I've tried:
I think this change is due to the fact that figure is now a plotly.graph_objs._figure.Figure and used to be a dictionary(?). So figure['data'] and figure['layout'] are still dicts with necessary and interesting content:
Output from figure['data']
(Scatter({
'marker': {'color': 'red', 'symbol': 104},
'mode': 'markers+lines',
'name': '1st Trace',
'text': [one, two, three],
'x': [1, 2, 3],
'y': [4, 5, 6]
}),)
Output from figure['layout']
Layout({
'template': '...'
})
And of course options such as help(figure) and dir(figure) are helpful, but produces a very different output.
I just found out that 'forgetting' the brackets for figure.show() will give me exactly what I'm looking for. So with a setup similar to the code in the question and with plotly V4, simply running figure.show will give you this:
Output:
<bound method BaseFigure.show of Figure({
'data': [{'marker': {'color': 'red', 'symbol': 104},
'mode': 'markers+lines',
'name': '1st Trace',
'text': [one, two, three],
'type': 'scatter',
'x': [1, 2, 3],
'y': [4, 5, 6]}],
'layout': {'template': '...'}
})>
Code:
import pandas as pd
import plotly.graph_objects as go
trace1 = go.Scatter(x=[1,2,3], y=[4,5,6], marker={'color': 'red', 'symbol': 104},
mode="markers+lines", text=["one","two","three"], name='1st Trace')
figure = go.Figure(data=trace1)
figure.show
I am trying to plot 3 pie charts side by side. I don't understand why the following code is making the pie charts go across the page diagonally left to write rather than horizontally left to write in one line.
Here's my code:
app.layout = html.Div([
html.Div([
dcc.Graph(id='TPiePlot',
figure={
'data': [go.Pie(labels=labels1,
values=values1,
marker=dict(colors=colors, line=dict(color='#fff', width=1)),
hoverinfo='label+value+percent', textinfo='value',
domain={'x': [0, .25], 'y': [0, 1]}
)
],
'layout': go.Layout(title='T',
autosize=True
)
}
),
dcc.Graph(id='RPiePlot',
figure={
'data': [go.Pie(labels=labels2,
values=values2,
marker=dict(colors=colors, line=dict(color='#fff', width=1)),
hoverinfo='label+value+percent', textinfo='value',
domain={'x': [0.30, .55], 'y': [0, 1]}
)
],
'layout': go.Layout(title='R',
autosize=True
)
}
),
dcc.Graph(id='RoPiePlot',
figure={
'data': [go.Pie(labels=labels3,
values=values3,
marker=dict(colors=colors, line=dict(color='#fff', width=1)),
hoverinfo='label+value+percent', textinfo='value',
domain={'x': [0.60, 0.85], 'y': [0, 1]}
)
],
'layout': go.Layout(title='Ro',
autosize=True
)
}
)
])
])
Here is what's happening with option 1 from accepted answer (which is the one I need to go with). I'm getting three different sizes plus legend covering some of the pie chart:
I'm struggling to understand how to re-size dash graphs using CSS because the whole container increases in size rather than the actual graph and I don't know how to target just the graphs themself to make size bigger. Is there a way around this?
Plotly's domain is used for subplots. In your case you are plotting three individual plots one after the other and for each you are setting the domain separately.
You have at least two options:
Use the approach you are using now, i.e. 3 individual plots, and use CSS to define their position
Create one plot with three figures and use domain to adjust their position.
Option 1
import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc
server = flask.Flask('app')
app = dash.Dash('app', server=server,
external_stylesheets=['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'])
labels = [['monkeys', 'elephants'],
['birds', 'dinosaurs'],
['unicorns', 'giraffes']]
values = [[50, 40],
[100, 10],
[100, 20]]
data = []
for label, value in zip(labels, values):
data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
values=value,
hoverinfo='label+value+percent', textinfo='value'
)]})
], className='col-sm-4'))
app.layout = html.Div(data, className='row')
app.run_server()
Option 2
import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc
server = flask.Flask('app')
app = dash.Dash('app', server=server)
labels = [['monkeys', 'elephants'],
['birds', 'dinosaurs'],
['unicorns', 'giraffes']]
values = [[50, 40],
[100, 10],
[100, 20]]
data = []
x1 = 0
x2 = 0.25
for label, value in zip(labels, values):
data.append(go.Pie(labels=label,
values=value,
hoverinfo='label+value+percent', textinfo='value',
domain={'x': [x1, x2], 'y': [0, 1]}
)
)
x1 = x1 + 0.30
x2 = x1 + 0.25
app.layout = html.Div([
html.Div([dcc.Graph(figure={'data': data})])
])
app.run_server()
As for now I see Bokeh supports HoverTool for multi_line glyph.
But the problem is that if I want to display particular value for point - it shows all the list of values instead of it.
Please, see example below:
from bokeh.plotting import show, figure
from bokeh.models import ColumnDataSource, HoverTool
df = {'X_value': [[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]],
'model': ['m1', 'm1', 'm2', 'm2'],
'color': ['red', 'red', 'blue', 'blue'],
'Y_value': [[0.50, 0.66, 0.70, 0.67], [0.65, 0.68, 0.71, 0.66], [0.80, 0.79, 0.84, 0.80], [0.80, 0.83, 0.76, 0.64]]}
source = ColumnDataSource(df)
p = figure(plot_height=400)
p.multi_line(xs='X_value', ys='Y_value', legend="model", color='color',
line_width=5, line_alpha=0.6, hover_line_alpha=1.0,
source=source)
p.add_tools(HoverTool(show_arrow=False, line_policy='next', tooltips=[
('X_value', '#X_value'),
('Y_value', '#Y_value')
]))
show(p)
I know about $x, $y ability, but that shows coordinated under the mouse, and they are changing as you move a mouse, that is not desired behaviour.
It there a way to display exact value for hover point in multi_line glyph?
p.s. creating invisible line is not a solution, as I have more advanced plot with filtering and linked plots and so on.
Thanks!
If you update to the bokeh version 0.12.16 you can use the new class CustomJSHover like this:
from bokeh.plotting import show, figure
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.models.tools import CustomJSHover
df = {'X_value': [[1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4], [1, 2, 3, 4]],
'model': ['m1', 'm1', 'm2', 'm2'],
'color': ['red', 'red', 'blue', 'blue'],
'Y_value': [[0.50, 0.66, 0.70, 0.67], [0.65, 0.68, 0.71, 0.66], [0.80, 0.79, 0.84, 0.80], [0.80, 0.83, 0.76, 0.64]]}
source = ColumnDataSource(df)
p = figure(plot_height=400)
p.multi_line(xs='X_value', ys='Y_value', legend="model", color='color',
line_width=5, line_alpha=0.6, hover_line_alpha=1.0,
source=source)
x_custom = CustomJSHover(code="""
return '' + special_vars.data_x
""")
y_custom = CustomJSHover(code="""
return '' + special_vars.data_y
""")
p.add_tools(
HoverTool(
show_arrow=False,
line_policy='next',
tooltips=[
('X_value', '#X_value{custom}'), # or just ('X_value', '$data_x')
('Y_value', '#Y_value{custom}')
],
formatters=dict(
X_value=x_custom,
Y_value=y_custom
)
)
)
show(p)
Following on from Dmitriy's comment in the above answer as he said data_x and data_y are now exposed so you just need to change your code to:
p.add_tools(HoverTool(show_arrow=False, line_policy='next', tooltips=[
('X_value', '$data_x'),
('Y_value', '$data_y')
]))
But what's nice about this is you can use the Bokeh formatters. e.g. this is one I used for values on a date time axis e.g:
plot.add_tools(HoverTool(tooltips=
[
('Date', '$data_x{%F}'),
('Level', '$data_y{0,0.000000}'),
('Ticket', '#ticket')
],
formatters={
'$data_x': 'datetime',
}
))
i used this example to get started with pandas:
http://pandas-xlsxwriter-charts.readthedocs.io/chart_grouped_column.html#chart-grouped-column
i also want to save the chart in excel just like in the example
i would like to know how e.g. in the example above i can add a description or a table under the graph chart
the only thing related i found was this :
Add graph description under graph in pylab
but this is done with pylab, is the same possible with pandas and an excel chart?
In Excel you could add a text box and insert some text but that isn't possible with XlsxWriter.
You could use the chart title property but in Excel the title is generally at the top and not the bottom.
You can reposition it, manually, in Excel. This is also possible with XlsxWriter using the layout options of the different chart objects.
Here is an example:
import xlsxwriter
workbook = xlsxwriter.Workbook('chart.xlsx')
worksheet = workbook.add_worksheet()
# Create a new Chart object.
chart = workbook.add_chart({'type': 'column'})
# Write some data to add to plot on the chart.
data = [
[1, 2, 3, 4, 5],
[2, 4, 6, 8, 10],
[3, 6, 9, 12, 15],
]
worksheet.write_column('A1', data[0])
worksheet.write_column('B1', data[1])
worksheet.write_column('C1', data[2])
# Configure the charts. In simplest case we just add some data series.
chart.add_series({'values': '=Sheet1!$A$1:$A$5'})
chart.add_series({'values': '=Sheet1!$B$1:$B$5'})
chart.add_series({'values': '=Sheet1!$C$1:$C$5'})
chart.set_x_axis({'name': 'X axis title'})
chart.set_y_axis({'name': 'Y axis title'})
chart.set_title({
'name': 'Here is some text to describe the chart',
'name_font': {'bold': False, 'size': 10},
'layout': {
'x': 0.25,
'y': 0.90,
}
})
chart.set_plotarea({
'layout': {
'x': 0.11,
'y': 0.10,
'width': 0.75,
'height': 0.60,
}
})
#Insert the chart into the worksheet.
worksheet.insert_chart('A7', chart)
workbook.close()
Note, you will need to do some trial and error with the layout property to get the layout that you want.
Output:
I have a chart that I'm rendering using Plot.ly from a Pandas DataFrame:
import pandas as pd
import numpy as np
import string
df1 = pd.DataFrame({'x':np.random.rand(10), 'y':np.random.rand(10),
'd':list(range(10)), 'e':list(string.ascii_lowercase[:10])})
df2 = pd.DataFrame({'x':np.random.rand(10), 'y':np.random.rand(10),
'd':list(range(10)), 'e':list(string.ascii_lowercase[:10])})
fig = {
'data': [
{'x': df1.x,
'y': df1.y,
'text': df1.d,
'mode': 'markers',
'name': 'Example 1',
},
{'x': df2.x,
'y': df2.y,
'text': df2.d,
'mode': 'markers',
'name': 'Example 2',
}
]
}
py.iplot(fig, filename='couldbeanything')
And this draws a nice chart with the dataframe's column 'd' used for the data labels.
But actually I want to use a composite of two columns for the data labels (let's say d and e). Is this possible? I've tried passing a list or a dict and neither appear to work.