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.


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


Dec 2 2011

Retweet November 2011

From time to time I just blast tweets about software development, project planning, team dynamics, or whatever else comes to mind. Here is a synopsis of recent tweets and rants. If you want to follow the conversation follow me at techknow and/or juixe.

Software Development

  • Making good UI means making ugly choices.
  • There was a time when having a computer made you a nerd. Today, people being “good on Facebook” does not make you a nerd.
  • Love working with jQuery Mobile.

Thought Leadership

  • Everyone has a vision, the difference is the scope, lens, and filter around the vision.
  • Tomorrow is a fresh opportunity to be amazing and amazed.
  • You ask stupid questions, you get stupid answers.
  • I’m not on StackOverflow, so when people ask for my SO reputation I instead give them the the monthly referrals I get from SO.

Product Placement

  • Sweet. Amazon just sent me a $5 credit because of a “technical issue on the Amazon.com website” that I am not even aware I encountered.
  • Found my first handheld device… An HP iPaq RX3715 running Pocket PC 2003 Pro w/ Outlook 2002. It’s still in great condition!
  • David Pogue wrote his review of the Kindle Fire, sounds like he wrote it from his iPad.

Overheard

  • OH: Don’t they have Cliff Notes for the DMV driving manual?
  • OH: Your brain cells are sexy!
  • OH: Sometimes when you put things in the closet it doesn’t mean you have a clean house.
  • OH: don’t do it but it you gonna do it make sure you get paid for doing it.

Thanksgiving

  • I’m turkeyed-out. I had all major food groups and at least four different meat groups.
  • McDonalds should have a McTurkey with McStuffing.
  • Thanksgiving is the time to eat food you don’t like, I mean why do you only have it only for Thanksgiving?
  • The holidays forces families to come together because everyone else is with their families.
  • I dislike food holidays. Especially when everything is so good.
  • Instead of counting sheep, I’ll be counting turkeys tonight.
  • Gobble gobble gone.

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.


Mar 10 2011

Retweet February 2011

From time to time I just blast tweets about software development, project planning, team dynamics, or whatever else comes to mind. Here is a synopsis of recent tweets and rants. If you want to follow the conversation follow me at techknow and/or juixe and I’ll be sure to follow back.

Software Development

  • If some feature looks funky to your development team it looks twice as funky to your users.
  • Is it FAB? Is it a feature, application, or business?
  • Spiderman had his spidey sense and I have my buggy sense and it is tingling.
  • The flow of time feels like it’s relative to the number of breakpoints you have turned on.
  • Every time the build is broken an angel does not get his wings.
  • Trust no code.

Team Leadership

  • Some people think shrimp an others think prawn.
  • There is no greater ambition that being the best possible you at every opportunity.
  • 1 paid customer is greater than 100 users.
  • 90% done is not done.
  • Don’t reinvent the wheel but put some blinged out rims with a flashing spinner.
  • There is no failure if everything is a learning opportunity.
  • Most people let others define their success, but the most successful define their success themselves.
  • People truly don’t know know what they have until it’s impounded.
  • Wanting to do things doesn’t give you the experience of actually doing those things.
  • If you are not a leader, and not a follower then what are you? A drifter?
  • Offload your mental tasks to your subconscious, it’s just like having a graphic chip in your brain.
  • Say it. Do it. Own it. Be it. True dat.
  • The more you worry about a thing the more probability you have of making it worse.

Product Placement

  • Instead of having IBM Watson go head to head with Ken and Brad, I would have liked to see Watson against Zuckerberg and Brin.
  • DeviantArt needs an iPad app.
  • Amazon should have a EC2 image for designers with a copy of Photoshop, Illustrator, Flash, etc.
  • DropBox is a duplicate to my Box.net account, which is a copy of my Scribd acount, which is backup to my blog, which is also archived on …
  • What Google giveth, Google taketh away with one change in their algorithm.
  • This iPad is like a gadget version of vampire, it doesn’t work in direct sunlight.
  • It’s official, Tumblr is the new GeoCities.
  • If the phone company ran Twitter, they charge 10 cents per tweet, 20 cents when roaming, and try to sell you a plan of 500 tweets for $15.
  • One of my favorite iPad app is Collections, a photo album app. I just don’t understand why it requires access to my location!
  • I want my iPad to be an input device to all my others screens, desktops, laptops, etc.
  • Google sees you when you’re sleeping / knows when you’re awake / knows if you’ve been bad or good / So be good for goodness sake!
  • Honestly AT&T, remind me why I pay you every month?
  • Here’s a prediction: Apple is working on a VM so that they can run iOS apps on Windows. Apple App Store for Windows will be huge!

Quotes

  • Computers in the future may…perhaps only weigh 1.5 tons. – Popular Mechanics, 1949.
  • There is no reason for any individual to have a computer in their home. – Kenneth Olsen, president and founder of DEC, 1977.
  • Good front-end engineers list JavaScript on their resume, not jQuery. – Chris Zacharias
  • People should better think of their computing devices as facilities lended by the DHS. – wipe man page
  • What lies behind us and what lies before us are tiny matters compared to what lies within us. – Ralph Waldo Emerson
  • Life is too short to be in a hurry. – Thoreau
  • If you throw gasoline on a log, all you get is a wet log. But if you throw gasoline on a small flame, you get an inferno. – Gil Penchina

Questions

  • if Washington is a Hollywood for ugly people,then what is Silicon Valley?
  • Is there foods that give off positive energy?
  • How many chickens go into making a one McChicken nugget?
  • Are you a mercenary or missionary?
  • Why is it that hardware makers make the worst software?
  • How can a woman carry a huge ass bag and not gave her phone or her keys?
  • Do you want cheese with that?
  • Forget Scientology, what Hollywood religion is Charlie Sheen practicing where he is a warlock and lives with goddesses?
  • If William of Occam worked at Gillette how many blades would Occam’s razor have?
  • Did Papa Murphy’s patent the heart shape pizza?
  • Why is big such a small word?
  • How LOL can you go?
  • What happens if Neo forgets to take the red pill for one day?
  • Why is Howie Long using baseball analogies to describe a football game?

Random

  • It’s siesta time somewhere in the world.
  • I am a robot but I can’t be shut down!
  • There is no free in money.
  • Money spends itself.
  • If age is nothing but a number, then love is nothing but a feeling.
  • (two cents)^2
  • Someone should build a museum of brilliant ideas.
  • Dating is a contact sport.
  • The end is eh.
  • Absence makes the heart grow wonder.
  • Four is a four letter word.
  • I om nom nom therefore I am.
  • I meme therefore I am.
  • Champagne in the membrane.
  • Rationality is relative.
  • For some adults, credit cards are like pokemon, got to charge them all.
  • At Hometown Buffet, were all of the world’s foods are made equally bad.
  • Here is my new book in its entirety The Complete Guide of Doing Nothing.
  • The internet feels slow, it’s like we live in the dark fiber ages.
  • I hear voices in my head… Oh, forgot I had my headphones on.
  • Pundit is another word for idiot.
  • General Chow outranks Colonel Sanders
  • Road work and morning commute don’t mix.
  • The fog is so thick you can cut it with a machete.
  • If time flies it must be flying coach.
  • Alas, dishes don’t do themselves.
  • Hate it when people call up in the middle of the night, I pick up, and they ask “you awake?”
  • History is a rewriting of history.