How to Build a Simple Ionic App for ES & Zabbix Metrics with Chart.js
This tutorial walks through creating a lightweight Ionic mobile app that visualizes Elasticsearch and Zabbix performance data using Chart.js, covering environment setup, a Flask proxy, page structure, data fetching with AngularJS, and common pitfalls, all illustrated with code snippets and screenshots.
Project Overview
The author, currently unemployed, built a reference Ionic app to display Elasticsearch (ES) and Zabbix performance metrics. The source code is available at https://github.com/youerning/MyApp .
Effect screenshots are shown throughout the article.
Table of Contents
Preparation
Proxy
Page Framework
Data Retrieval
Charting
Self Q&A
Page Logic Summary
Three tabs: home , es , zabbix .
The home tab shows ES and Zabbix performance indicators.
The es tab visualizes search data with charts.
The zabbix tab would do the same, but no data is available.
Environment Setup
1. Reference the first article for environment preparation: http://youerning.blog.51cto.com/10513771/1735450
2. ES server – because a local ES instance is unavailable, a publicly exposed ES server was found via Shodan.
3. Create a new Ionic app: ionic start myops blank 4. Open the project in Sublime Text.
Proxy Setup
Although Ionic apps typically avoid cross‑origin issues, a simple Flask proxy was added to handle potential CORS problems during debugging.
The proxy code (shown as an image) forwards requests to the public ES server.
Page Framework
The UI consists of three tabs and corresponding templates (home.html, es.html, zabbix.html). A tpls directory under www stores these templates.
Routing logic and view files are created accordingly.
Data Retrieval
AngularJS’s $http service is used to call ES APIs. The perf.html template displays current metric values (time‑series data is omitted due to lack of environment).
Charting with Chart.js
Chart.js is installed via npm and included in index.html:
Data fields such as clientip , agent , and response are aggregated using ES’s API via POST requests (tested with Postman).
Results are fetched in the app with $http and rendered by Chart.js.
Self Q&A
Q: Why not use the latest Ionic? A: No immediate need for TypeScript support.
Q: Can other charts be drawn? A: See angular-chart.js .
Q: Why no Zabbix data? A: No Zabbix environment available.
Limitations
Some duplicated code.
Visual appearance could be improved.
URL control is not delegated to the app.
Author: youerning Source: http://youerning.blog.51cto.com/10513771/1939987
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.