I have made a dashboard in Plotly Dash. Everything looks perfect, however the main problem I am facing is that of localization(translating the elements in Dashboard to other language). Without translating, the dashboard will be worthless. I have tried following method for translating the elements:
#app.callback(
Output('1', 'children' ),
Output('2', 'children' ),
Input("lang-dropdown", "value"))
def update_card(value):
if value=='Ar':
return 'مقارنة المبيعات', 'ضبط المبيعات'
else:
return 'Sales Comparison', 'Sales Tuning'
However, there are lot of elements and I want it to translate it more efficiently like that used in other language(like in json format). I have looked into other methods like Flask Babel translating as well, but I am a beginner and it is difficult for me to do it at this stage. Can someone please guide me how can I localize my dashboard? Will be grateful.
Related
I'm making a dashboard for a BI/DS project.
So far I've managed to make all ETL pipelines and even built some endpoints in flask_RESTful to present single graphs generated using plotly.
However, since I use Flask_RESTful, my code returns all graphs in div format.
Now I want to use them in dash without having to duplicate or change my code (I want to keep the raw html backends so the client can embed it in his own website if wanted).
This is what I return in my back-end:
return plotly.offline.plot(fig, filename='plot', include_plotlyjs=False, auto_open=False,
config={"displayModeBar": False, "showTips": False}, output_type='div')
How do I insert that into my dash layout?
If I do
dash_app.layout = html.Div(children=[
html.H1(children=my_plot_function())
])
All I get is raw html (string)
Is there some way to revert the "plot as div" function in plotly to use them in dash?
(Using Dash is much simpler for me than trying to learn React or anything like that)
I have an interactive graph generated by Plotly in Python that I saved to an html file using plotly.offline.plot(fig, filename='/tmp/interactiveGraph.html')
I am now trying to embed this interactive graph into some kind of webpage, using either Dash or Django. I'm leaning toward Django at the moment, given that I have an html version of the graph. Which would be better?
My code for the webpage is in a separate file from the code where I am creating the graph.
A lot of the tutorials I've found online just say to add a few lines to the template, but I don't know how to get those lines that they've described.
tl;dr: I'm looking for guidance as how to integrate an html file-for a Plotly interactive graph-with a web python script using Django or Dash
Side Question:
what is the difference between
plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
and what I have above?
Reference:
https://github.com/ricleal/DjangoPlotLy
https://www.pythonsetup.com/how-implement-data-visualization-django-and-plotly/
I would highly reccomend Django, its a great framework. As for this, the best option is to generate the data via JavaScript and Plotly has a great library for this. If you must use python, then Django can be used. Assuming you are familiar with Django, inside of your view you can collect your data and build your graph ( I would reccomend a celery task for something long running like this unless they are small graphs), and you can then collect the return from creating the graph in div format. This will return a string that holds all the needed html and css for the graphs. Put this inside of you get_context_data() method in your view and place it into the dictionary. You can the use that object inside of a template. I have done this before, if you are having a hard time feel free to DM me. Hope this helps some!
In regards to your side question, I believe having False for including JS will make the graph a bit smaller assuming you have an include for the plotly JS library. They might have done this in a newer release to make the graphs faster as they were significantly slower in the browser from python that the JS rendered one.
I recently started working on my very first dashboard application using dash.
The tutorials are comprehensible, however, I have a hard time handling the front end details because I cannot find an API reference. Specifically, each element accepts a style argument that let's us modify some CSS details, like text alignment, fonts etc. I have seen some examples in the tutorials but I would love to have an exhaustive list of everything I can pass there.
As an example, I want to create a table but the columns are too close together. I need to control the spacing between them and I imagine there should be an argument like padding, spacing, borderSize... you get the point. Where can I find these details?
It could be possible to edit some styling by passing some keywords to the Dash component. It depends on the component itself.
For example, if you are using DataTable from dash-table-experiment:
import dash_table_experiments as dt
help(dt.DataTable)
you can see that the API of this component allows you to set things like column_widths (list; optional) and min_width (number; optional).
If you need some more complex styling (e.g. a yellow background with linear gradient for all even table cells) I'm afraid you'll have to know some CSS.
A few additional resources:
Currently the Dash styleguide is based on the Skeleton CSS framework
Each dcc.Graph is composed by a figure and a layout. Here is the plotly.js figure reference
For things like showing/hiding legends, traces, etc, have a look at the plotly.js configuration options
For HTML: https://github.com/plotly/dash-html-components
For component: https://github.com/plotly/dash-core-components
Seems the dash project didn't create the user-friendly API document (I guess it was related to their business strategy).
The only way to get the help is the dash community and git-code project.
if you want help with python objects in dash then just use:
help(html.Div)
to get a list of argument parameters.
If you want to know what can be placed in the style parameter the answer is any and all css can be generated. You can customize the look anyway you want here is the syntax...
style={
'border':'1px solid #333',
'margin':'10px',
'padding':'10px',
'background-color':'#888',
'position':'absolute',
},
The style parameter excepts a dictionary object. In order for your CSS to be rendered it needs to be in the syntax above, which will create a python dictionary object.
I am a front-end web developer learning Python and decided to try to create a website for a friend. The website contains an astrology calculator that will generate a chart image and reading based on a person's birth date, birth time, and birthplace. I can use either Python CGI or Django to build this. Which one is appropriate for this project?
The chart calculator will:
1. generate an image of a chart with the correct houses and signs lined up.
2. plot the planets in the correct houses in the chart
3. show the connections between the stars, like a trine, square, or conjuction.
To render images, I think HTML5 can probably work. For the server-side scripting I am leaning towards CGI because it seems like you can write real Python programs with it and just output the results with something like print "sun conjunct jupiter". Django seems to limit you to that weird syntax that forces you to write every Python expression in these <% ... %> brackets and it doesn't seem like you can import Python modules easily.
I am not extremely familiar with Django, but these seem to be some of the limitations I noticed in the Django tutorial.
What do others in the community think? Should I use CGI or Django to create this website?
I checked out other questions, but not sure if a Python mini-framework is appropriate here.
Not really sure what you're hoping to glean from this (or what the question is exactly), but you seem to be misinterpreting what the Python CGI functions and Django are.
Django is a web framework meant to expedite the process of developing a website, so you can focus on specific issues (like the chart problem you described) rather than have to tend to the infrastructure of a site. It's meant to abstract away CGI (to oversimplify it a bit). If you're looking for something less heavy than Django, perhaps try Flask or Bottle.
PS: A quick Google search showed a similar question from a few years back: My first web app (Python): use CGI, or a framework like Django?
So this is somewhat similar to
What's easiest way to get Python script output on the web?
and
Matplotlib: interactive plot on a web server
but none of those used d3.js and I don't think they achieve the same level of interactive-ness.
So I am a newcomer to d3.js and frankly have no clue where I should start in this instance.
Project Flow:
Ask user name on the front end. Send this to backend python
get graph data (object + edges) for a depth of x where x is distance away from a starting node by Python calls to 3rd party website API
run some machine learning on the data (python)
display the graph + some numbers (maybe in the bottom right corner) in d3.js
loop:
Have an interactive d3.js graph so that if I click a node, it will redo the calculation with that as the starting node
have it so that d3.js shows part of the text (first 10 chars?) of each node and then shows the full text once you mouse over.
(7) Bonus updating embeddable picture? Like those profile signatures?
Questions:
How would I achieve this bidirectional communication?
Where should I start?
Is there a better way I can do this?
Sidenote: I'm planning to do this project using Google App Engine, I don't know if that lets you use it as a 'vm' though.
Thanks!
Edit: This looks a lot like Python at backend JS at frontend integration, but I don't know where to even start and I think they suggest more art-oriented tools as a result of his project.
It sounds like you need to write a web service in Python that consumes and returns JSON. I'm not sure if the data is originating on the client or the server, so for this example, I'm assuming it comes from the client.
POST your graph data in JSON format to your webservice
Do processing server-side
return JSON representing the results of the processing to the client
Render it with d3.js
User interaction on the client creates a new or modified data structure
Go back to step 1
Maybe your server-side web service method looks like this (this is pseudo-code based on web.py):
import simplejson
class ml(object):
def POST(self,data=None):
# turn the JSON string into a Python data structure
d = simplejson.loads(data)
# do stuff
results = alter_data(d)
web.header('Content-Type','application/json')
# send JSON back to the client
return simplejson.dumps(results)
And your client-side code might look something like this (again, just a rough sketch). This example assumes that you're using jQuery to do your AJAX stuff.
function render(data,textStatus) {
d3
.select('svg')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.on('click',function() {
$.getJSON(
'your_webservice_url',
// POST an updated data structure to your service
{ 'data' : alter_data(data) },
// Call the render method again when new data is received
render);
});
}
d3.js' enter and exit methods make updating the visual representation of your data very easy. I recommend reading the documentation for those.
This example might give you some ideas about how to represent your graph data with JSON, and how to render it.
Check out the on method for an idea about how to trigger a POST to your web service when a node is clicked.
I'm going to skip the really specific stuff, like displaying text with d3.js. I'm sure you can figure out how to do that by perusing the d3.js documentation.
This is a late answer and I've just stumbled across this python package: Bokeh
To cover points 1-6 of your requirements it seems you pretty much only have to write python code which will be a plus for someone not used to writing java script.
But then this package is still quite new and might have some limitations I'm not yet aware of at the moment.