How to Build a Mobile Monitoring App with Ionic, Elasticsearch, and Chart.js
This tutorial walks through creating a demo mobile app using Ionic that fetches performance data from a public Elasticsearch server via a Flask proxy, visualizes it with Chart.js, and outlines the project structure, code snippets, and known limitations.
Project Overview
Because the author is currently unemployed, they set up a public network environment and created a demo app (not a complete product) whose source code is available at https://github.com/youerning/MyApp. The app displays performance metrics from Elasticsearch and Zabbix.
Effect screenshots:
Table of Contents
Preparation
Proxy
Page Framework
Data Retrieval
Charting
Self Q&A
1. Environment Setup
Reference the first article at http://youerning.blog.51cto.com/10513771/1735450 for environment preparation.
2. Public Elasticsearch Server
Since no private ES instance is available, a publicly exposed ES server was found via Shodan.
3. Create the Ionic App
Run the following command:
ionic start myops blank4. Open Project in Sublime
5. Proxy Setup
Although Ionic apps usually bypass CORS, a simple Flask proxy was written to avoid cross‑origin issues during debugging. The proxy forwards requests to the public ES server.
Proxy page preview:
6. Page Framework
The app contains three tabs: home , es , and zabbix . The home tab shows performance metrics; the ES tab visualizes search data; the Zabbix tab is left empty due to lack of environment.
Template files such as home.html, es.html, and zabbix.html are placed under a tpls directory.
7. Data Retrieval
AngularJS $http is used to call ES APIs. Since real time metrics are unavailable, current values are displayed.
Sample perf.html content is shown below:
8. Chart.js Integration
Install Chart.js in the project directory: npm install chart.js --save Then include the script in index.html and use it to draw charts for the selected ES fields (e.g., clientip, agent, response).
Mapping query result preview:
9. Self Q&A
Q: Why not use the latest Ionic? A: No opinion on TypeScript yet.
Q: Can other charts be drawn? A: See http://jtblin.github.io/angular-chart.js/
Q: Why no Zabbix data? A: No environment, not set up.
10. Known Limitations
Some code duplication.
Visual appearance could be improved.
URL control is not delegated to the app.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
MaGe Linux Operations
Founded in 2009, MaGe Education is a top Chinese high‑end IT training brand. Its graduates earn 12K+ RMB salaries, and the school has trained tens of thousands of students. It offers high‑pay courses in Linux cloud operations, Python full‑stack, automation, data analysis, AI, and Go high‑concurrency architecture. Thanks to quality courses and a solid reputation, it has talent partnerships with numerous internet firms.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.