Creating Interactive Charts in AngularJS

Data in the form of rows and columns is boring, and it’s difficult to derive insights from it in that form. Add interactive charts to it, and you make it easier for everybody to make sense of it. You start seeing patterns that were impossible to spot by looking at raw data alone. But how do you add interactive charts to your website?

Well, that’s what this tutorial will teach you. In this post I will walk you through the process of creating interactive charts in one of the most popular JavaScript frameworks – AngularJS. We will be implementing charts via FusionCharts’ JavaScript charts package. And to make our job easier, we will make use of its AngularJS charts plugin.
(more…)

Read More

Display line and area charts in PHP and MySQL

Most data in any web application is usually sourced from a database. Usually some data transformation is required before we can visualize the required data. Most programmers however wanting to display visualizations or charts shy away from the task as there are a number of intermediate steps required to display the visualization. Morris charts however makes the task easier. We only need to directly pass the MySQL queried rows to the Morris charts javascript and we are done. Morris Charts is one of my favorite tools to display dashboard visualization on the web.
(more…)

Read More

Auto website wireframes

Creating wireframes is one of the essential tasks of any web designer or information architect, and with a plethora of tools available it has become an easy task. Wireframes give you a birds eye view of the site before you actually commit to a design. It is also instructional to see the designs of other site, but then you have go to the drawing board and create one yourself. Wirify makes the job easier for you.

Wirify is a small bookmarklet that lets you quickly see the wire-frame of any website with a single click. For example below is a wireframe of the current site.
(more…)

Read More

PHP built in functions map

Wordle is a online Java Applet for generating word clouds. The application is simple. You enter a bunch of text and Wordle does the rest. The applet provides options to change color, font and layout. Just for fun I created a Wordle cloud to display php’s built in functions. Two samples are shown below. The size of the font in the cloud is proportional to the number of functions starting with the particular name.
(more…)

Read More

Adding HeatMaps to your website

ClickHeat is a wonderful PHP software that lets you add Heatmaps for your webpages. Heatmaps are visual representation of clicks on a HTML page, showing hot and cold click zones. It can be useful to see at a glance which webpage areas are getting the most clicks as this areas get redder in color while the areas receiving less clicks are white. The software has many options to tweak, and the heatmaps can be added on a per page basis.

A sample heatmap image is shown below. You can also use the clickheat class in your own PHP applications. The software doesn’t require any database, only GD graphics library must be enabled on the server, which in most cases already is.

You can view a heatmap for the index page for this site here. I’ve presently only added click log for the index page, so try clicking on the index page links to update the heatmap.

username : visitor
password: visitor

If you don’t see any changes in the heatmap, click on the “log my clicks” link in the right corner or try logging out and then logging in again.

heatmap

Read More