I'm a web-loving, webapp maker kinda guy. Here are a few things I have created for my employers, my freelancing projects and my own personal projects

Posts tagged ‘Charts’

Responsive Web Design for a dashboard

Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone

VIEW DEMO (source code – Responsive web design with charts in Sencha EXTJS; source code – A plot chart using HighChart javascript library)

With the increasing popularity of iPads and iPhones, I was asked me to create a web-based dashboard to provide an optimal viewing experience with all their devices – iPads, iPhones, and Macbooks using just a single-code base. I was able to achieve these requirements using responsive web design techniques with HTML5, javascript and CSS3.

The dashboard contains several distinct widgets:
1.) Multiple carousels (swiping of data) responds to both mouse and touch gestures to swipe the card to view additional sets of data.
2.) A slider to select the date and time range. The slider transforms into the standard iPhone time picker when the web-dashboard is viewed on an iPhone.
3.) Sophisticated charts embedded inside of other charts.
4.) Grids to display data
5.) Persistent Web Design techniques to retain user’s viewing settings

In addition to javascript and CSS3. I used the following technologies and plugins:

  • Bryntum Scheduler and Gantt Charts
  • Sencha EXTJS 4.0
  • jQuery
  • jQuery.ContentCarousel plugin
  • Developr theming
  • glDatePicker
  • jQRangeSlider
  • jQuery.blockUI plugin
  • mobiScroll

View the Web Dashboard

Advertisement

Category:

HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design, Sencha ExtJS

Tagged with:

A dashboard full of charts and reports.

Our new dashboard feature was presented at our annual conference, Project Flow 2011, to rave reviews! Project managers and executives who use our web-based software once had to scour through several charts and reports to see the information they need for the day. However, with the new dashboard design, most of the essential information can be seen on one screen.

The charts are generated using a 3rd Party add-on called ChartFX.Net from SoftwareFX. I used jQuery to populate the widgets with data. jQuery was also used to display enlarged widgets in a modal dialog box. All the widgets were generated with ASP.Net code.

*update: The dashboard feature was officially released to clients on Dec 13, 2012.

Category:

ASP.Net, jQuery

Tagged with:

ChartFX can’t do it? Don’t worry, I can.

The chart is an image, the data grid is html

SoftwareFX’s ChartFX component is very useful in displaying so many different charts and in so many different ways. However, the current version of ChartFX lacks the ability to display a grid of data alongside with the bars in the chart. Instead of whining and crying about it, I came up with a solution.

Using HTML, I overlayed a grid on top of a chart and I was able to display the  grid of data, coinciding with the chart’s bars. With some improvisation and hard work, this idea worked like a charm.

*update: The newer version of ChartFX, ChartFX.Net, now comes with a grid data, but doesn’t work very smoothly. I created another version of this chart data grid for the .net version with scrolling data.

Category:

ASP Classic, HTML, Javascript

Tagged with:

A web-based chart made only with HTML? No way?

This chart was made with only HTML!

What do you do when you need to make a report with bar charts, columns of data, panning dates, expandable sub-rows, and absolutely with no plugins are allowed? You do it in HTML, of course. This… was my task.

Because we have clients who are part of the US government and have very strict rules on what is allowed to be installed on government computers, I had to come up with a way to fulfilled specs without the use of any plugins. I was able to accomplish this feat with alot of DHTML and Javascript. I don’t believe there is any other report on the planet that looks like this.

Category:

ASP Classic, HTML, Javascript

Tagged with: