Archive - August, 2009

jQuery Date Picker Series

Choosing a date can be a very important function of any web application. However, there are not a lot of good ways to choose a date, or a series of dates for that manner.

Some people have chosen to create a series of select input blocks in order to choose a date or series of dates. However, these are less than user friendly since it requires a lot of use of the mouse.

jQuery gives us a number of tools that can give your application increased usability as well as polish. This week I will examine a few of the best options that will not only increase your sites usability, but are also incredibly easy to implement. So make sure you check back tomorrow for the beginning of the series.

iPhone Style Checkboxes with jQuery

With the popularity of the iPhone, many plugins exist to replicate the functionality of the iPhone operating system.

Today I will talk about a plugin I stumbled upon. It replaces all checkboxes with a checkbox that is styled to match the iPhone.

I have put together a very basic demo of this plugin. You may view it here.

You can download this plugin from http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

Flot Tutorial Series: Creating Different Types of Graphs

Today we will discuss how by using Flot, you can display your data in a number of different ways. In Flot you can have a line graph (the default display for Flot), a bar graph, and a point graph.
Continue Reading…

Flot Tutorial Series: Placing a Chart On Your Website

Now that we know how to create a Flot data set, we can now go over how you actually place a data set into a chart. Thankfully, this is very easy to do.
Continue Reading…

Flot Tutorial Series: Creating A Flot Dataset

The most basic thing that one must know in order to use Flot is to understand how to create a data set. The data set is the actual raw data that Flot uses to construct your chart.

While some other libraries make this difficult to accomplish, Flot actually makes it very simple. In the most basic form, a Flot data set is actually just a multi-dimensional array.

The following is an example of constructing a very basic data set.
var data_set = [[2, 1], [3, 8], [4, 5], [5, 13]];

When this data set is placed on the chart, a line will be created that starts at (2, 1), goes to (3, 8), and so on through the entire data set.

If you want to create a break in your line, you are able to do that as well. Take this for example:
var data_set = [[2, 1], [3, 8], null, [4, 5], [5, 13]];

By placing the null value, we have essentially split the line in half.

Now with a little math, you can create mathematical charts.

var sine_wave = [];
for (var i = 0; i < 14; i += 0.5)
   sine_wave.push([i, Math.sin(i)]);

This data set will create a sine wave.

Now that you have the basic idea how to create a data set, we can continue on to actually creating a chart and placing it on a web page.

Page 2 of 5«12345»