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.


Jun 26 2012

Pure JavaScript Charting Library

Most business applications display some amount of data in charts and graphs. If a picture is worth a thousand words, then a clean visual representation of business data is worth a lot more. Business charts can condense a lot of data points into a easy to understand graph.

Recently, I was tasked with updating the graph solution of a financial application with a HTML5 friendly charting tool or library. I looked at about half a dozen JavaScript chart libraries and eventually narrowed the selection down to two based on features and functionality: Google Charts and jQuery chart plugin jqPlot. Both Google Charts and jqPlot support a large number of chart types, from the basic bar and pie to more advance features such as multiple y-axis and and zoom. Both libraries support HTML5 graphics, the legacy chart solution I was to replace generated a pixelated image. Google Charts and jqPlot both draw the graph into div tag instead by using HTML5 graphics and don’t anti-aliasing issues.

For this particular project, we picked jqPlot over Google Charts for the following reasons. Google Charts is not open sourced and it uses a loading mechanism that requires you to be online to load the JavaScript source files from Google’s servers. This is great if you are always online, but the project owners wanted a HTML5 charting solution that works offline. jqPlot is a freely available open source JavaScript library which can be hosted alongside with the other application resources. jqPlot, like Google Charts, has a large number of chart types it supports including line, area, bubble, bar stacked, pyramid, pies, donuts, gauges, and much more.

jqPlot JavaScript Chart Library

jqPlot JavaScript Chart Library


Jun 8 2012

JavaScript StackTrace With The console Object

Error handling and debugging had been made difficult in JavaScript because the lack of tools and the language itself. Unlike Java, that has a strong type and hierarchy of exception classes, JavaScript didn’t even have a direct approach to print the execution stack trace. For years I used a workaround to navigate around stack trace of a method call in JavaScript by using the Function arguments property. In JavaScript, all functions have an arguments property defined. The arguments property is available even if the function is defined with no explicit function parameters. The function arguments property behaves like an array and you can iterate through the argument parameters used to call the function but it also has a reference to the caller via the arguments.callee property. The arguments.callee property references the currently executing function itself, which has a caller property to that of the previous function call in the execution stack.

function basicFunction() {
   var isTrue = arguments.callee == basicFunction; // true
   var callingFunction = arguments.callee.caller; 
}

In the above code, the callingFunction variable holds a reference to the Function object that called the basicFunction.

The caller property returns a Function object or null, so you can chain these until you get to the root of the call stack. You can iterate through a call stack in JavaScript with code similar to the following.

function basicFuction() {
   var caller = arguments.callee.caller;
   while(caller != null) {
      console.log(caller);
      caller = caller.caller;
   }
}

Unfortunately, there is no clean way to get the function name out of the Function object returned by the caller property. This is made slightly more difficult because somethings functions don’t have names if they are created anonymously. If you print or log a Function object, it displays the function definition in its entirety.

Fortunately, the JavaScript console object provides a trace function that will log to the web console the JavaScript stack trace.

function basicFunction() {
   console.trace();
}

If the above function is invoked from an on click event, the whole JavaScript track trace from the on click to the basicFunction function is logged out in the web console. In addition to the function names, the web console in Safari, Chrome, and Firefox have a link to navigate to the exact location your web application where the functions were called.


Jun 4 2012

JavaScript Debugging With The console Object

In the early days of JavaScript there were few options for debugging large web applications. You could have used the multiple alert notifications or possibly even calling document.write to write messages into the document. Firebug changed web developers lives, and I think how we view JavaScript, by making it incredibly easy to debug HTML, CSS, and JavaScript. Since Firebug, most current versions of web browsers include powerful debugging tools. In addition to the debugging tools browsers have made available a JavaScript console object to help write debug statements. With console, there is no need to pop up alerts to inspect the state of an object. To write a log message intended for the console, just write the following JavaScript statement in the right place.

console.log("This is a log message");
console.log("Message one", "Message two", "Message three");

To open the console, you can find it in Safari by looking for the the Web Inspector, in Chrome it’s called Developer Tools, and in Firefox you’ll find it under the Tools menu as Web Console.

The console object has a lot of useful debugging messages for errors with different severity, such as log, debug, info, warn, and error.

console.info("I'm here.");
console.warn("Do I smell smoke?");
console.error("The roof, the roof, the roof is on fire.");

In addition to logging String messages, you can log whole JavaScript objects. It may be useful to inspect a complete object and it’s state. To write out the state of an object to the console use the dir method as in the following example.

console.dir({fname:"Bill", lname:"Gates"});
console.dir(document.getElementById('SomeElementId'));

In Chrome and Safari, you can also use dirxml to display the a HTML element object in the console as HTML. In my version of Firefox, this method did not work.

console.dirxml(document.getElementById('SomeElementId'));

You can also group related log messages, no matter their severity. To group console messages surround them with a group and groupEnd. You can even nest groups inside of groups.

console.group("Server update");
console.log("calling server...");
// ... any number of console log messages.
console.groupEnd();

You can also test the performance of your JavaScript code with time and timeEnd. Both of these methods accept a String label and it needs it needs to be the same value for both methods.

console.time("Process Data");
// ... some time consuming code
console.timeEnd("Process Data");

When the timeEnd method is executed it will generate a message in the log console with the amount of time it took to run the code between the time and timeEnd method.

Chrome Developer Tools Web Console

Chrome Developer Tools Web Console


Nov 14 2011

jQuery Mobile + PhoneGap = Awesome Mobile Development Platform

I’m currently prototyping an iPad application and I’ve just found working with jQuery Mobile and PhoneGap to be a breeze for mobile application development. I’ve used iOS SDK before and I’ve experimented on test applications with Android and I’ve always found issues with both the iOS and Android development frameworks. I’ve also looked into cross platform mobile development toolkits such as Appcelerator Titanium and Sencha Touch but I found these were not of me at the time. Any of the aforementioned platforms and frameworks can be used to create a great looking and functional mobile application but I found that they each ask the developer to make a trade off.

With jQuery Mobile, you develop your mobile application with HTML5 and JavaScript/jQuery. With jQuery Mobile, all of your UI is written in pure HTML5 tags with the correct CSS classes and attributes. jQuery Mobile is built on top of jQuery so many web developers can immediately start being productive with jQuery Mobile.

Everybody has an idea for the next great iPhone application. The top reasons I’ve heard from people, including from developers, as an excuse for not getting started is that they don’t have a Apple computer, they don’t want to learn another programming language, they don’t have time, etc. jQuery Mobile invalidates all of these excuses. You can use Firefox or Chrome to test your jQuery Mobile application, you develop using plain HTML5 and JavaScript, and most it’s easy to pick up.

Because a jQuery Mobile application is just a HTML5-based web application, if your an run it on your iPhone or other mobile device using the native web browser. On the iPhone, when you run a jQuery Mobile application the browser will take up a small portion on the screen for the navigation buttons, bookmarks, and other controls of the browser. One way to claim all of the screen real-estate is to create a native application, that is where PhoneGap comes in. PhoneGap is a native shell around a web application, such as those developed in jQuery Mobile. With PhoneGap, you can turn your jQuery Mobile application into a full fledged native application.


Nov 23 2010

The Learning Library

I’ve always been a book lover. I have a private collection of Ruby, Perl, and Java books, amongst other topics, that would make a public library jealous. In fact, I recently moved and was surprised that that the bulk of the items boxed up where books. I’ve been making the trend of moving my library to ebooks. I was an early adopter of the Amazon Kindle, I still use my first generation Kindle. Here are some books in my collection, which I’ve use as reference.

I’ve even dedicated a blog post to a few of my favorite books, such as the following.