Jul 4 2012

Rounded Corners with CSS border-radius Property

Modern browsers have come a lone way since 2006. Back in 2006, Web 2.0 and AJAX was the hottest technologies for web developers (just like HTML5 and CSS3 is now) and rounded corners was one the coolest things you could do to a web page. Unfortunately, in 2006 the easiest way to have rounded corners in a HTML tag such as a div was to use JavaScript and images and all other sorts of hacks. Thankfully, most modern browsers (all but IE) support the CSS border-radius style which can be used to curve and round a corner.

Using border-radius
For the following examples, I’ll using the following CSS classes, which I hope are self explanatory.

.box {
    width: 100px;
    height: 100px;
    float:left;
}

.red {
    background: red;
}

.orange {
    background: orange;
}

.green {
    background: green;
}

.purple{
    background: purple;
}

The easiest use of border-radius is where all four corners have the same border curve radius. If all corners have the same curve radius all you need to supply is one px radius value.

<div class='box orange' style='border-radius: 20px;'></div>

In the examples provided in this tutorial, we fixed the width and height of the box div to be 100px. If we increase the border radius to 50px we can have a perfect circle.

<div class='box orange' style='border-radius: 50px;'></div>

What makes the border-radius property powerful is that you can set a different radius for each corner. Just enter four values, the first one will set the radius for the top-left corner, the second sets the top-right, then the bottom-right, and the bottom-left corner. If the value 0px is used, that corner will not have any curvature. The following HTML examples sets different border radius values for each corner generating a leaf looking shape.

<div class='box green' style='border-radius: 0px 60px 40px 60px;'></div>

Placing four similar div tags in place, you can create a four leaf clover shape or a circle.

<!-- four leaf clover -->
<div class='box red' style='border-radius: 50px 75px 0px 75px;'></div>
<div class='box orange' style='border-radius: 75px 50px 75px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 75px 0px 75px 50px;'></div>
<div class='box purple' style='border-radius: 0px 75px 50px 75px;'></div>

<br style='clear:both' />

<!-- circle -->
<div class='box red' style='border-radius: 100px 0px 0px 0px;'></div>
<div class='box orange' style='border-radius: 0px 100px 0px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 0px 0px 0px 100px;'></div>
<div class='box purple' style='border-radius: 0px 0px 100px 0px;'></div>

You can even nested rounded div tags to create a bullseye image.

Fun with CSS border-radius

Fun with CSS border-radius

As of this time, Chrome, Safari, and Firefox support border-radius.


Jun 29 2012

Pie Charts with jqPlot JavaScript Charting Library

It’s incredibly easy to generate great looking pie charts with jqPlot. jqPlot is a jQuery plugin that can be use to generate pure HTML5 charts. Create pie charts in jqPlot is as easy as it is to create bar charts, the only difference is how we pack the data.

Getting Started
The code snippets for this example assume you have already downloaded jqPlot and have included the following JavaScript and CSS source files from the distribution.

<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
<script src="jqplot/jquery.min.js" ></script>
<script src="jqplot/jquery.jqplot.min.js" ></script>    
<script src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>

The jqPlot graphs are drawn on a div tag and this example will require the following HTML snippet.

<body onload='drawChart()'>
   <div id="chartDivId" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
</body>

Pie Chart Data
A single slice of a pie chart is stored in a two element array where the first elemnt contains the string label and the second element stores the slice data value. A single pie series is made up of one ore more slices, and a pie chart may have one or more series. The typical pie chart is made up of one series, but there are some charts that can allow for multiple pie series.

function drawChart() {
  var slice_1 = ['North America', 150];
  var slice_2 = ['Europe', 50];
  var series = [slice_1, slice_2];
  var data = [series];

  var options = {
    title: 'Sales by Region',
    seriesDefaults: {
      renderer: jQuery.jqplot.PieRenderer
    },
    legend: { show:true, location: 'e' }
  };
  
  $.jqplot('chartDivId', data, options);
}

jqPlot will all compute the percent for each slice based on it’s value, so the slice for North America will be 75%, and Europe will be 25% for the the values 150 and 50, respectively. The pie chart generated from the above code will be simple and undecorated.

jqPlot Pie Chart

jqPlot Pie Chart

We can add additional options, for example, maybe we want to display the percent amount for each slice. To do so, we can update the options object with the showDataLabels property such as the in the following JavaScript code snippet.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true
    }
  },
  legend: { show:true, location: 'e' }
};

By default, the showDataLabels property shows the percent of the slice. To show the slice data value, rather than the percent, set the dataLabels property to ‘value’ such as the following code.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value'
    }
  },
  legend: { show:true, location: 'e' }
};

You can further change how the pie chart is rendered by setting the fill, sliceMargin, and lineWith rendererOptions object properties. The fill property accepts a boolean value, and you can specify the sliceMargin and lineWith with an interger value. You can also specify the angle from which to start with the startAngle property. Putting all this together, you can create a pie chart like the following.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value',
      fill: false,
      sliceMargin: 5,
      lineWidth: 5,
      startAngle: 45
    }
  },
  legend: { show:true, location: 'e' }
};
jqPlot_Pie_Chart with No Fill

jqPlot_Pie_Chart with No Fill

Donut Chart
Using the same data and same options object, you can render a pie chart as a donut. To display a donut chart you will need to load int the jqPlot donut renderer.

<script src="jqplot/plugins/jqplot.donutRenderer.min.js"></script>

Once you have loaded the donut renderer, just update the render property in the options object.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.DonutRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value',
      fill: false,
      sliceMargin: 5,
      startAngle: 45
    }
  },
  legend: { show:true, location: 'e' }
};
jqPlot Donut Chart

jqPlot Donut Chart


Jun 27 2012

Using JavaScript Charting Library jqPlot with Bar Charts

jqPlot is a plugin for the jQuery JavaScript framework used to generate awesome looking charts and graphs. Even though it has a lot of features and supports many chart types it is incredibly easy to use. To create a simple chart you will use will use something like the following template.

$.jqplot(divId, dataArray, optionsObject);

In the above example, divId is the String object containing the name of the div on which to draw the chart. The dataArray variable will hold the data for the chart and the optionsObject will have configuration properties used to display the chart.

Getting Started
To get started with jqPlot, you will need to download the latest release. Because jqPlot offers a wide selection of chart types, it is broken down into different JavaScript files. You’ll only need to load the JavaScript files for the chart type you will be working with. For example, to display a bar chart you will need to include the following JavaScript source files.

<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
<script src="jqplot/jquery.min.js" ></script>
<script src="jqplot/jquery.jqplot.min.js" ></script>    
<script src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>

For the purpose of this tutorial, assume that I have a div tag that will be used to draw the chart when the the page loads. On the page load event, a JavaScript function will fire which has the jqPlot code to draw the chart. Here is an example of the what the div tag looks.

<body onload='drawChart()'>
   <div id="chartDivId" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
</body>

The following code for drawChart will hard code the values for a bar chart with three series for Jan, Feb, and Mar. This could be used to track the sales of three different items over that month or other similar data. Here is the jqPlot JavaScript code to draw a bar chart inside the chartDivId div.

function drawChart() {
  var s1 = [2, 6, 7];
  var s2 = [7, 5, 3];
  var s3 = [2, 3, 5];
  var s4 = [1, 7, 2];
  
  // chart data
  var dataArray = [s1, s2, s3, 24];
  
  // x-axis ticks
  var ticks = ['Jan', 'Feb', 'Mar'];
  
  // chart rendering options
  var options = {
    seriesDefaults: {
      renderer:$.jqplot.BarRenderer
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      }
    }
  };

  // draw the chart
  $.jqplot('chartDivId', dataArray, options);
}

For a bar chart, the chart data is an array of nested arrays holding the values each tick along the x-axis. In the above example, we are tracking three points along the x-axis so our we have three data points for each series. The options object is used to configure how the rendering of the chart, it specifies that this should be a bar chart and sets the x-axis.

jqPlot Bar Graph

jqPlot Bar Graph

jqPlot Bar Chart Options
We can easily change this from a bar chart to a bar stacking chart by adding one property to the the options object (stackSeries: true). By adding one line of code we can drastically change the chart we generate. Another options you may want to set is the title, to add a title to your graph setht the title poperty.

// chart rendering options
var options = {
  stackSeries: true,
  title: 'Q1 Sales',
  seriesDefaults: {
    renderer:$.jqplot.BarRenderer
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer,
      ticks: ticks
    }
  }
};

Another quick options you might consider enabling is the legend. You can position the location of the legend by using the following compass directions: nw, n, ne, e, se, s, sw, w

// chart rendering options
var options = {
  stackSeries: true,
  title: 'Q1 Sales',
  legend: {
    show: true,
    location: 'ne'
  },
  seriesDefaults: {
    renderer:$.jqplot.BarRenderer
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer,
      ticks: ticks
    }
  }
};

You can further customize the label for each of your series by adding the series option object.

// chart rendering options
var options = {
  stackSeries: true,
  title: 'Q1 Sales',
  legend: {
    show: true,
    location: 'ne'
  },
  series: [
    {label: 'Memberships'},
    {label: 'eBooks'},
    {label: 'Conference Tickets'},
    {label: 'Support'}
  ],
  seriesDefaults: {
    renderer:$.jqplot.BarRenderer
  },
  axes: {
    xaxis: {
      renderer: $.jqplot.CategoryAxisRenderer,
      ticks: ticks
    }
  }
};
jqPlot Stacking Bar Graph

jqPlot Stacking Bar Graph

There is a lot more that can be done with jqPlot. As a jQuery plugin, jqPlot will easily fit into any web developer’s toolbox as the go to JavaScript charting library.


May 21 2012

What To Do When iPad Home Button Stops Working

I’m still using my first generation iPad. I’ve had no issues with my iPad except that a little over a month ago the home button would occasionally stop working. The home button would work intermittently and I would have to push it multiple times for it to register. After a while, the home button would work one time five or ten. The home button on the iPad or iPhone is important because it is what you use to exit out of an app. No matter how I pressed the home button on my iPad or how long I held it down it would not exit out of the app I would be using. I grew frustrated and even considered trading in my otherwise functioning iPad.

The way I worked around the home button not working is to use Multitasking Gestures. As soon as you detect any issue with your home button on you iPad go and open the Settings app. In the Settings app, click on General and then enable the Multitasking Gestures. Once you have the Multitasking Gestures enabled, you don’t need the home button to exit an app but can instead exit an app by pinching your five fingers together. Place the tips of your five fingers in the screen and bring your fingers together to the center of the screen in a pinch gesture and it will close the currently opened app.

If you find that the home button on you iPad stops functioning correctly then turn on the Multitasking Gestures from the Settings app. The five finger pinch will act as if you pressed the home button. You can also do a five finger swipe to move from different apps or you can swipe up with five fingers to reveal the multitasking bar and navigate between apps this way.

iPad Multitask Gesture

iPad Multitask Gestures setting


Jun 28 2011

I Will Not Do Your Homework

I love to share solutions to issues I’ve encountered and explaining programming concepts in layman terms. I do it because that is how I learn. As a side effect of the tutorials and blog posts I write, I occasionally get a nice comment from someone that found some article I posted a while back found useful. I love to get those kinds of comments. Off course, I even appreciate the comments that correct my grammar, spelling, or misconception in a post I wrote 2 or 3 years ago. The one comment I usually don’t react well to is the one from some poor developer that sends me his requirements and asks for me to “provide proper solution.” Recently I got one such request via a comments. It stated…

I need to create a single page spreadsheet web application in RAILS which should be exactly like google doc(should not use google docs API). It should have the following features…

The comment went on and on that it should be a multi-user collaborate real time application with authentication, authorization, and hot keys support to boot.

I can relate with programmer stuck with a daunting problem. More than once have I been tasked with problem outside my domain expertise, and even application. I’ve had to walk through end users with problems that are peripheral to the application I was involved with. For example, I’ve had to track problems down due to network issues and security settings on shared drives in client sites because the some server could read files from that location. Like most developers, I’ve posted comments asking for help to blog articles on issues I’ve been stuck on, such as when using a particular version of a web service library with a particular web application server. That said, I’ve never asked someone to provide me a proper solution to a homework or other project.


Dec 31 2009

TechKnow Year In Review 2009

It is that time of year where we reflect on the accomplishments of the passing year and look forward to the one to come. Here is a window into the past year in technology through this year’s popular posts on TechKnow Juixe.

Top Favorites

Fav Tutorial

Memorable Quotes

Twitter

Twitter Conversations

Year in Review