Web Development Project (Continued)

Continuation of Web Development Project post.

The Perl script was created to post to the PHP page. I created and it enters the data into the MySQL database beautifully. BTW – a better DB GUI/query tool: Sequel Pro.

Next project my friend requested was a graph of the data. I used Google Charts, and added a drop down which pulls IP addresses from the database.
Google Chart Select IP

[Figure 1 – Drop down pulling IP addresses from DB]

Once you chose the IP address, it passes the IP address via Ajax to another page, which processes it and then sends a response back and then displays the graph and a data table for that IP.
Google Charts

[Figure 2 – Google Charts, dynamically pulling from DB]

After using Google Charts to create an initial page (quick and dirty), I moved onto using Google’s Annotated Time Line (Visualization API) for the next set of graphs. Google Annotated Time Line will allow for zooming into the data and a more dynamic feel to the graph as opposed to the static Google Charts graph above.

The project grew and it was necessary to pull from multiple MySQL databases and tables, including a wordpress database which is populated with data via email. Realized it was necessary to add 15 hours (so time matches up with China time) so our wordpress posts matched our data. I looked into how to do it with PHP – maybe pulling the whole date from the DB and then doing work on it in PHP, but thought there has to be a simpler way, and ended up using DATE_FORMAT and DATE_ADD in the SQL statement to pull correct time. I love SQL.

The purpose of this graph is to create a visual representation of what has been said in emails, in the office and to the higher ups for the past weeks/month. It will show, on into the future, the health of the project my friend is a part of and if the problem is getting better or worse. Unfortunately over the days we worked on this, the graph continued to show that the project was not going well. My friend will have a lot on his hands when he goes into the next meeting, but now perhaps they will see the seriousness of the problem he’s trying to illustrate.

Annotated Time Line Version 1

[Figure 3 – Graph from version 1 code with test data]

Turns out my friend and I made a great team. I set up the database and page framework for the graphs, then we worked hand in hand to display the information necessary. Then he did some pretty sexy design enhancements to make the graphs easier to read at a quick glance, which is what most managers and CXO’s desire.

Annotated Time Line Version 2
[Figure 4 – Graph from version 2 code with test data]

Code can be found here: https://github.com/kathy-ems/iosdevicedashboard

One thought on “Web Development Project (Continued)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s