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


May 16 2012

Retweet April 2012

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

  • Too often I’ve seen code that made me lose my lunch.
  • Sometimes source code is like the sausage factory where you don’t want to look what goes into an application.
  • One developer’s corner case is another user’s daily workflow.
  • Application logs are like money, you can always use more… Unfortunately they are like pennies, the more you have the more difficult it is.
  • Fix the problem, not the symptom. Some developers prefer to fix the symptom because they don’t know how to find the root cause itself.

Team Leadership

  • It is important to lead the way and then immediately get out of the way.
  • If it doesn’t make sense to me it is because you are not explaining it correctly.
  • Everyone has a right to their opinions but not everyone’s opinion is right.
  • Great ideas don’t belong to any one person. Great ideas are not unique to anyone. Great ideas stand on their own.
  • If you are safe in your comfort zone you’ll never be in the zone.
  • Even when I think outside the box, I am still in the zone.
  • There are no easy answers without hard choices.
  • It’s one thing to make sense and a completely different thing to be clear.
  • There are some things in life that are not meant for you to understand but to accept.

Product Placement

  • Things Apple should buy: Evernote, app TLD, Square, and my blog.
  • The Notes app on the iPhone badly needs an to support the undo and redo feature.
  • The new Google+ is the new New Coke.
  • If Google would have invented Polaroid, the film would be free but full of ads and a copy would be uploaded to the cloud.
  • Some of Google’s UI often looks and feels like the uncanny valley of design, it has a plastic aspect to it.
  • My other Tumblr is a Moleskine.
  • So much of the content I see in Pinterest seems to come from Tumblr…
  • Instagram has no ads, only available on mobile, Android support just added, not profitable, no web presence… Obviously worth $1 billion.
  • Instead of paying a billion in cash and stock why didn’t Facebook just pay a billion in Facebook Credits and likes.
  • Silicon Valley back of the envelop valuation math: Tumblr + Camera+ > Instagram therefore Tumblr + Camera+ = $10,000,000,000++.
  • I don’t understand @McDonalds economics… A whole McChicken sandwich costs $1 but ask for an extra BBQ sauce and you get charged $0.50.

Silicon Angels

  • Is it possible for the whole of Silicon Valley to jump the shark? If and when it does there will be a large splash.
  • Silicon Valley valuations are relative to previous largest valuation.
  • The Internet is paved with high valuations.
  • Frothyness is the new truthyness.
  • Frothy does a body good.

Randumb

  • I want to see the world in HD.
  • What do we want? Our way. When do we want it. All the time.
  • If someone says something that is factually untrue, it doesn’t mean they lied… It means you lied to yourself by believing it. #truth
  • One persons guest house is a other persons mansion.
  • Some people build walls, others bridges, I build BS radar detection systems.
  • Retweet, reblog, repin, remix, rinse, and repeat!
  • I think in numbers.
  • All language is a metaphor.
  • Trolls shall inherit the earth.

Mar 26 2012

The Code Rules

Rules to code by…

  • No consultant code.
  • No complacent code.
  • No crappy and sloppy code.
  • No cut and past code.

Nov 28 2011

Retweet October 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

  • To checkin or not to checkin a large changelist five minutes before you go home, that is the question?
  • A test like a good movie, has three parts: the setup, the car chase, and the test of the results.
  • Testing is like a tax, you have to pay 5-10% to have a good running infrastructure or system.
  • Testing takes time, make sure you make the time, because it will save you time in the long run.
  • All programmers have a black belt in hubris.
  • One bytecode to rule them all.

Thought Leadership

  • Your miles may vary, but it often depends on your attitude.
  • Passion + Perseverance = Possibilities
  • Sometimes you can’t afford to lose a client, but there are other times you can’t afford keep your client.
  • Just like there should be no hard coded strings there should be no unwritten rules, or assumptions, or specifications.
  • The dumbest people I’ve ever encountered are those that think that the rest of the 99.99% of people are a bunch of idiots.
  • If you are unique no one can compete with you.
  • Team meetings should not feel like an AA meeting, “Hi, I’m bob and I work here.”

Product Placement

  • I’ve used the iPhone apps for Google Voice and G+ and I have to say, Google does not know how to make a good iOS app.
  • I’m not liking the new Google Reader look. I would not be surprised if the next version of Google design has ribbons.
  • Leave no smart phone behind. Google won’t upgrade the Nexus One to Android 4.0.
  • Google is set to update its motto to “Do no evil if you ain’t getting paid for such evil.”
  • Android is to Google what Internet Explorer was to Microsoft in the Browser Wars. MS gave IE for free just to take out Netscape.
  • Siri is to Apple what Kinect is to XBox what Facebook Connect is to Facebook what Circles are to Google Plus…
  • Every time I upgrade a MS product an angel loses his wings.
  • Is Amazon also adopting social networking features? I just noticed that Amazon has a like button on its product pages.
  • Facebook should update its mission “to trick people to over share and make the world more open, connected, and trackable.”
  • Google should update its mission “to organize the world’s information about our users and make it accessible and useful to our advertisers.”
  • @att has two options in terms of text messages. Pay as you use for $0.20 or unlimited for $20. What about a third option, disable texting altogether?
  • Why does it cost half of the price of a stamp to send or receive a text? It’s endemic of an industry that has no competition or innovation.
  • The Kindle Fire tablet is a modern day physical shopping cart for Amazon’s virtual online store.
  • History is being made every day, yet @historychannel airs reruns of Ancient Alien.

Quotes

  • OH WOW. OH WOW. OH WOW. – Steve Jobs’ Last Words
  • I’m so embarrassed. I wish everybody else was dead. – Bender Bending Rodriguez
  • Goodbye monobrains – Bender Bending Rodriguez
  • There is no recession for great companies… – Jason Calacanis
  • Software is like sex: it’s better when it’s free. – Linus Torvalds
  • Coming together is the beginning; keeping together is a process; working together is success. – Henry Ford
  • When all men think alike, no one thinks very much. – Walter Lippmann

Randumb

  • On Monday mornings we are all zombies.
  • Why am I listening to old school British punk rock? #GodSpankTheQueen
  • The truth is that truth is absolutely relative.
  • And then God said, “Let there be bacon,” and there was bacon. God saw that the bacon was delicious.
  • You’re so vain, you probably think this tweet is about you.
  • Fist pump for peace.
  • Anybody that gets lost in a corn maze is an absolute moron.
  • I hate Lifetime movies!
  • Business is legitimate thievery.
  • Some of the most common elements on earth idiotum and dumbtonium.
  • meta-disrupt: Disrupt those disrupting disruption.
  • I am, therefore I meme.

Thought Equations

  • Meaning > money
  • problem = opportunity
  • means != ends
  • Success > Perfection
  • Experience != Information
  • Thinking > Knowing
  • Do > try
  • Platform > product
  • Creation > criticism
  • Passion + Perseverance = Possibilities

Million Dollar Ideas

  • Million Dollar Idea: Online Speed Dating Site
  • Million dollar idea: a news channel with nothing but news tickers…
  • Million Dollar Idea: self cleaning floors.

Oct 30 2011

Retweet September 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

  • Code. Money. Respect.
  • Software bugs don’t take anything personally.
  • Code more, sleep less.
  • DONT THREAD ON ME

Thought Leadership

  • Just having a goal is often times more important than the goal itself.
  • Word programming, i.e. writing TPS reports.
  • Code Complete = Tests + Implementation.

Product Placement

  • Google is the casino, or better yet the Goldman Sachs, of online identity, ads, and search. You don’t bet against the house.
  • What is cloud-accelerated web browser? Learning about Amazon Silk, the web browser in Amazon’s Kindle Fire.
  • The project code name for the iPhone’s auto correct is auto cucumber.
  • Spike TV should rename itself to Star Wars TV and the History Channel to Ancient Aliens Channel.

Money Angels

  • Dr Evil is starting a venture fund.
  • If Dr. Evil would have taken his Evil Corp. Public he would have made $1 billion on an IPO. And maybe Google would have bought his company.

Question

  • How many uses can you think of for a paper clip?
  • Where in the food pyramid is candy corn?
  • Is Meg Whitman the new Carol Bartz?
  • Are you changing the world or is the world changing you?
  • What is the person equivalent to having your car lifted up in the air and balancing its tires?

Randumb

  • The Internet made me do it.
  • It’s easy to earn money while you sleep, if you sleep on the job.
  • You are more likely to die due to medical error than a car accident. So if you are in a car accident, don’t go to the hospital, just walk it off.
  • If I could get a nickel every time someone gives me their two cents I would arbitrage people’s opinions.
  • Living the Internet lifestyle.
  • If you don’t want your naked picture hacked from your phone don’t take naked picture of yourself on your phone.
  • There are proposed bills that will make activities such as posting a lip sync video on YouTube a federal crime punishable with jail time.
  • Forget the war on drugs, in the future there will be a war on content.
  • History is not made, it is written, edited, scripted, and appropriated by Hollywood as a blockbuster movie about mutant super heroes.
  • I predict the past.
  • Beauty is in the eye of the beholder, behold yourself.
  • This is not Sparta!
  • Love me, hate me, but you thinking of me.
  • Love it or hate it, take it or leave it.
  • I love love and hate hate.

Overheard

  • OH: When you frown you look like a Klingon.
  • OH: Is everyone in the call on mute?
  • OH: My dress code is to try not to show my butt cheeks.

In Da Future

  • In the future, everyone will be a product guy.
  • In the future, Facebook will be your permanent record.
  • In the future, the revolution will start with a single tweet.
  • In the future, when people say they are going outside the grid, they will mean they aren’t logged into Facebook.
  • In the future, Android developers will need to program using the Android SDK and the phone maker’s proprietary SDK, and the carriers’s SDK.

Million Idea

  • Million Dollar Idea: A treadmill with a weight scale.
  • Million Dollar idea: there is so much artificial flavoring, color, and seasoning in food. Patent dinosaur meat flavoring.
  • Million Dollar Idea: Car alarm system that steams video of the surroundings of your car and scans for perps faces.
  • Million Dollar idea: wasabi guacamole
  • Million Dollar Idea: Carfax for people, including driving record, background check, work history, etc.
  • Million Dollar idea: pepperoni pizza flavored breath mints.

Oct 20 2011

Worst Software Bugs

We all have heard of missiles blowing up in midair because of the wrong unit was used in calculating the trajectory or bank software that misplaced millions of dollars because of a decimal place. It might not compare against blowing up a multi-million dollar missile but here are some of the worst software bugs I’ve seen in projects where I’ve worked.

Shift + O Short Cut – I once worked on a software application where one of the engineers developed a screen search functionality that would find the UI screen by name or feature. Needless to say the modal pop-up dialog for this search feature popped up when the user hit the Shift + O keys. This feature was developed by the engineer on his own initiative, so you can imagine everyone’s surprised when we couldn’t even type a capital o without this thing popping up.

Exposing Regular Expressions – In another project we developed micro expression language which was used and exposed at the application level to users. In one situation, a user reported a error when he wanted to replace a variable place holder with a dollar amount. It seems that when he called the expression language replaceall(“AMOUNT_VALUE”, “$0.00″) the got back the value of AMOUNT_VALUE.00. This problem was caused because we used Java Regular Expressions feature of the String class and $0 expression is a special value in the Java RegEx. This was like a Regular Expression Injection bug.

Localization and Internationalization – In the same project we had a problem with displaying the correct currency symbol used in a financial account statement. There is a big difference between $100 and €100. Account holders are not happy to know that their €100 are now worth $100.

Cut/Copy/Paste Does Not Work – I have seen way too many Java/Swing application where some component does not have proper support for cut, copy, or paste. When you cut from a Java application and paste to say Notepad you get a stringified Java object.

Textarea Size Limit – When filling online forms, the one bug that just kills me is where a textarea has a size limit not shown and you spend time typing a long response which will be either truncated, lost, or rejected on submit.