Teach you how to build a Web-based data visualization platform

Original link: http://www.jianshu.com/p/ad1a49375da4, source code please visit the original

PS. Interested students who want to get all the source code or questions they don't understand, please visit the original text ~

First, the project display

The effect of this Web data visualization platform is as follows (no style, main focus on functionality)

Effect Demo

This data visualization demo enables the following functions:

1.csv file Upload (other format files can also)

2. Customize the data you want to display

2.nodejs build server, parse CSV file data

3. Using Highcharts for data visualization

4. Calculation and presentation of key parameters

Second, the realization of ideas and processes

1. Implement CSV file upload

(1) Reception section

In this demo, Formdata and Ajax are used to upload the front-end files. Formdata is a way of component forms, and the following example initializes a form for submitting a file with Formdata.

HTML code
JS Code

With the code above, we can initialize a form that contains two fields, which are the files to be uploaded and the properties to be parsed. This uses formdata () to construct a Formdata object, passing in a form initialization. In this case, the generated Formdata object contains the fields to be uploaded. Also note that the Enctype property of the specified form label is Multipart/form-data, and the form can handle fields of the file type.

(2) server-side processing upload file

The server side uses the Nodejs build, where a Nodejs module called Multer is used for file processing. Multer can handle file uploads, it gets the file uploaded by the front end, and saves the file to the server-side specified directory. The following is a code example that uses Multer to process files.

Multer Processing Data Code

In the above code, upload uses Multer to specify the path to save after uploading the file, where all uploaded files are saved in the uploads directory. Multer adds the file property to the Req object, which includes various information about the files, including the upload path, filename, file type, and so on. While the other fields in the form are reported to exist in Req.body (using Bodyparser).

2.csv File parsing

for CSV file parsing, we use the Csvtojson module in Nodejs, which is very easy to use. If you want to parse a spreadsheet-type file, you can also use the xlsx module in Nodejs. Call the method in the Csvtojson module, the uploaded file Req.file.path to parse (Req.file.path, is through the Multer uploaded file path, can directly access to the uploaded file).

In addition, we want to display the data for the specified attribute (that is, the specific column in the CSV file). This feature allows you to get the corresponding field of the foreground through req.body and then use the method in the Csvtojson module. In my demo, the corresponding attribute of the acquisition principle is that the user can enter multiple column names, separated by commas; the server side uses the JS split method to parse the incoming content, form an array of target column names, and then use the Csvtojson module to read the corresponding array.

3. Display data using Highcharts

Highcharts is a very useful web data visualization framework. When we finish parsing the file, we get the corresponding data, and we can use Highcharts to draw the icon. A basic Highcharts icon drawing code is as follows.

Highcharts Basic Configuration

The above code allows you to understand the basic use of the highcharts framework. This initializes an icon using the Highcharts.chart () method, which requires passing in some configuration items. Configuration item configurations include render targets, headings, and many more, such as axes, legends, cue boxes, and so on, which is a highcharts flexibility.

Where the series configures the data content, which is an array of objects, each of which corresponds to a data column. As in the above example, a data column named Test is defined and the data content is specified.

In this demo, we can get the returned data in the success callback function in Ajax, and then dynamically inject the data for the Highcharts chart by modifying the series property in the configuration item.

4. Data analysis

You can add some data analysis functions to our demo, such as dynamically displaying the variance, average, and so on for each data column.

Teach you how to build a Web-based data visualization platform