Pigeon-Chart: A Customized HTML Element for Data Visualization in Data-Driven Web Application Using AngularJS, HighCharts, UnderscoreJS and PHP

Humans rely more and more on data-driven web application to make decision for business, finance, education, government, environment, industry, and even for personal purposes. These applications are commonly developed with open-source web development technologies (a.k.a. libraries / frameworks) in either JavaScript, PHP or both. For the past few years, these technologies evolved exponentially and offered simpler ways for web application development. However, not every web developer benefit from the evolution of these web development technologies especially the young and amateur. This is primarily due to its rapid changes, complicated documentations and the steep learning curve of these technologies. In this paper, we proposed a custom defined HTML element, pigeon-chart, as a middleware to accommodate challenges experienced by these young and amateur web developers. Pigeon-chart is straightforward and allows web developers to embed visualization i.e. charts into web application with data obtained from MySQL databases in a much simpler manner.