INTRODUCTION Data are generated everywhere, every seconds and at very fast pace. Facebook alone has over two billion active users worldwide. These users produce 293,000 new status updates, 510,000 comments and about 200,000 photos every minute [3]. The volume of data generated by the world population is beyond our comprehension and it is not easy to depict or understand without transforming them into visualization [13]. Data visualization in general is to present features of data with basic element of graph from various dimensions and perspectives [18]. There are quite a number of applications or software packages available for data analysis and visualization purposes. Tableau and PowerBI are desktop executable visualization applications run on the client machine and require installation. Both software allows data analyst to perform data analysis and communicate their findings visually within a dashboard through graphical representations i.e. charts, cards, matrices and plots. In 2017, Kaggle [1] conducted an industry-wide survey with over 16,000 individuals particularly on data scientists and data analysts. The survey indicated Python is the most commonly used tools in overall followed by R Programming for data analysis and visualization. While transforming data into information is important, getting this information to the audience is of equal importance, hence publishing on the Web via web application is the quickest way to reach global audience [13]. A web application or “web app” is an online software program that resides on a web server and is usually accessed through a web browser. As opposed to traditional desktop applications, web applications are accessible not only within specific operating system but various devices i.e. desktop, tablet and mobile phone [13, 19]. Data-Driven Web Application on the other hand is an online platform that is developed mainly to handle, transfer, manipulate, visualize and share data from one entity to another [2, 7, 17]. With the emerging and massive contribution from web development community, many free and open-source web development technologies (a.k.a. libraries/frameworks) arise in both JavaScript (https://www.javascripting.com/) and PHP (https://packagist.org/). These libraries and frameworks offer better ways and expedite the web development process. However, this may not be the case for young and amateur web application developers such as undergraduate students or fresh graduates as they are lacking of experience and exposure in using these libraries and frameworks. The insufficient experience in web development of these young and amateur web-app developers necessitate them to either code from scratch or spend ample time to learn the applicable web framework or libraries throughout the development process. Occasionally, these frameworks update, change and evolve in both breadth (varieties) and depth (stacks) at an exponential rate. Subsequently, these frameworks and libraries becoming very complex to adopt and having a very steep learning curve especially for amateur web-app developers [6, 8, 12]. The web development experience becomes worst when some frameworks or libraries are inappropriately documented with cumbersome and lengthy instructions [9]. Having no other choices, these amateur web-app developers have to spend extra days or even weeks to learn, unlearn, relearn and experiment the chosen framework(s) before they can start developing the prototype. This results delay for the web-app development. Apart from that, they often face challenges when dealing with complex business requirements and demands from end users, particularly on Web UI, usability and also accessibility aspect [5, 9]. To provide an alternative to amateur web-app developers, a pilot project, “ngPigeon” was initiated [16]. This project researches and develops tools, libraries, modules and nanoframework to cater typical data-driven web application development with the “web developer-centred design” principle in mind which aims to i) ease developers in web application development process, ii) enhance web application development experience, and iii) optimize web developers productivity. One possible way to simplify the web development process for web developers without having to create intermediate agent(s) or custom services is to provide them with a “blackbox” which takes an input i.e. SQL statement that will communicate with database and render the data from database into various representations such as interactive table or interactive chart. We defined this as the “turning SQL into Web Document Object” concept. The first module developed under this project is pigeontable [11]. Pigeon-table is a custom HTML element tag developed with AngularJS, Twitter Bootstraps and PHP. The HTML element tag i.e. takes a SQL query as attribute and renders an interactive table onto a webpage where the code is located.
In this paper, we introduce the second customized HTML element or module named “pigeon-chart” under ngPigeon project. Pigeon-chart allows web-app developers to embed visualization in data-driven web application easily with the same principle as pigeon-table, where a custom HTML element tag was defined to take a SQL query and render an interactive chart within a webpage where the code is located. The rest of this paper is organised as follows: In Section 2, we discuss the concept and architecture design of pigeon-chart. We also discuss the attributes for customization of pigeon-chart in this section. In Section 3, we explain and demonstrate how to set-up and show the usage of pigeon-chart with imDB dataset. Lastly, we conclude and propose future work in Section 4.