A while back I had to work on a browser based app for MySQL Database Query, and later I further expanded it and displayed results Google Charts. For this basic query app, I used a simple html template and made it responsive and developed the UI with jQuery and PHP API calls connecting and fetching results form MySQL database tables. Here is the demo app.
Following are the key features and goals that have been added in the app.
Database Connectivity:
- A front-end interface via which users can enter access data to a database.
- Support for different database types and structures.
Data Retrieval and Processing:
- A query interface for reading database tables.
- Automatic recognition and handling of different table structures, in particular the localisation of numerical values.
Backend:
- A server backend that establishes the database connection and executes the request.
- Retransmission of the queried data to the front end.
Data Visualisation:
- Integration of a graph library (e.g. Google Graph) to visualise the data in diagram form.
- Adaptable visualisation that supports various data structures.
Table Structure:
- Not bound to a specific table structure.
- Ability to work with any table schema.
Google Charts:
- Charts Customisation
- Option to select different type of Google charts
Following mockup was designed with Balsamiq as per planned features.
The app connects to the MySQL Database using PHP backend via AJAX call, returns table and then fetches the table columns to build the UI with jQuery to build MySQL query and display in the text area below the drop down. The query can also manually be updated, and after clicking ‘Search’, results are shown with Google Charts. App allows to choose type of Line, Area, Column and Bar Google charts.
