pyecharts updates the dashboard in real time

pyecharts updates the dashboard in real time

Preface

Some time ago, the editor released a tutorial for making pyecharts visual dashboard:

" Good-looking BI big screen Pyecharts can also be done "

However, there are several problems. The data cannot be updated in real time. The static dashboard is produced. The code must be adjusted every time the dashboard is generated, and the visual dashboard cannot be directly generated as soon as it runs.

In response to the above problems, this time the editor will take you to create a real-time updated visual dashboard.

Visual dashboards are generally better displayed in the form of web. The source data is stored in a database similar to MySQL. However, in order to simplify the problem, I am afraid that the reader will spend a lot of time installing MySQL and do not understand the web, so the data source uses csv. Use the web.

Straight to the point

Visual dashboard updated in real time

Data generation

We assume that the target background is that a western restaurant wants to monitor the status of the restaurant in real time through a visual dashboard, so as to make the corresponding resource allocation such as manpower and material resources.

Create a data folder specifically to save data, and you need to write a script that updates and inserts new data in real time to achieve the effect of real-time data update.

insert.py is a script created by the editor. This script first creates 3 tables:

food_sale.csv dish sales table, fields: dish name, unit price, sales (the initial value of sales is 0);

people.csv Number of people status table, fields: number of people dining, number of people in line, number of seats;

comment.csv comment form, field: rating, comment content (comment content is randomly selected from comment.txt each time as a comment, comment.txt is a comment copied by the editor)

Create three tables and insert initial data:

After creating it, start to insert data. The data is always inserted. The editor set to insert once every 1.5 seconds. Here we use an infinite loop, so that the script is always running to insert new data.

1. insert the sales volume of the dish sales table. The initial sales volume is 0. numpy randomly generates an array of the same length as the number of dishes, ranging from 0 to 3, and the last sales volume plus the generated array becomes the new sales volume. Update the data:

Then insert the number of people status table, the total number of seats is set to 50, the number of diners is randomly generated between 0-100, more than 50, then the number of people at dinner is 50, and the number of people in line is randomly generated an integer between 10-30, such as less than 50 , The number of people in line is 0, insert data:

Finally, the comment form is randomly generated with a score of 1-5 points. The comments are randomly selected from the txt prepared by the editor, and data is inserted:

OK, running this script will generate data in the data folder, and the script has been running and the data has been updated.

Visual dashboard

Let's first take a look at what diagrams the visual dashboard is composed of, and the implemented code to get the source code view, these diagrams are all set with id.

Bar graph of dish sales ranking:

Sales completion dashboard:

Water polo chart of the proportion of diners to the total number of seats:

Rose chart of score percentage:

Comment word cloud:

Number of seats distribution:

These generated codes are all encapsulated into functions, and page objects are created to call them. The generated visualization is all in page.html, layout and typesetting, save json files, if you don’t understand, read the article linked at the beginning of the article.

Open the json file and you can see that there is a cid field, which is the id of each chart. After we have laid out a chart, select a chart and right-click [Check] to view its id. This id is found in the corresponding place in the json. Reset the id. If the id is 123 after right-clicking at this time, find the value of uid as 123 in the json, modify the uid to 1, find the code of this figure in the code, set chart_id to 1, and then turn all the charts Are modified:

After all the id are modified, call to generate the dashboard, page.html is the generated initial visualization chart, chart_config.json layout file, and my_charts.html is the final visualization dashboard.

Finally, you need to realize the real-time refresh function. Add a line of refresh function html code to the html file in the final visualization dashboard, and finally read, generate, and refresh in an endless loop:

Finally, run insert.py first, then visual.py, open my_charts.html and you can see that it is automatically refreshed every 3 seconds, as shown in "Getting started".

Source code acquisition

Follow the WeChat public account " Musia Learning Python ", reply " pyecharts real-time update " to get

END

Reference: https://cloud.tencent.com/developer/article/1690592 pyecharts Real-time update dashboard-Cloud + Community-Tencent Cloud