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


Apr 18 2011

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

  • Worst than coder’s block is coder’s shiny tech infinite loop.
  • I got 99 problems and a bug ain’t one.
  • I’m a rockstar ninja guru mofo byte code copy editor.
  • If you could Myers-Briggs test your code what type would your code be and what type of developer would that make you?
  • Are you test driven or bug driven development?
  • Spiderman had his spidey sense and I have my buggy sense and it is tingling.
  • Software bugs can byte my shiny metal ass.
  • Code is a continuum.
  • Mo data, mo problems.
  • Let there be APIs.
  • “Hello, World” is a programmer’s first program. Blog engine is a web developer’s first web app. Consultant’s first product, time management application.
  • Duh, #debugging.
  • Code is never complete.
  • Code less, debug less.
  • I’m a bandwagon programmer!
  • This is not the code you are looking for.
  • I break for bugs.
  • My code runs more than you.

Team Dynamics

  • Passion is not a fruit, it’s a seed.
  • Pitch your passion.
  • Self help gurus first help themselves.
  • If you are waiting for tomorrow you will always be waiting.
  • In the evening be exhausted, in the morning exhilarated.
  • Great ideas don’t join country clubs.
  • Inside a large risk is a large reward, you just need to know how to unwrap it and then monetize it.
  • Meetings begets meetings
  • It’s not how the ball is pitched to you, it’s how you hit the ball, duh #winning.
  • Replace “what if” with “when and how.”
  • The way you think of a problem affects the way you think of the solution.
  • Everybody lives in there own bubble, expand yours.

Product Placement

  • I’m confused as to which photo service we are all supposed to use this month, flickr, picasa, twitpic, instangram, picplz, plixi, color, etc
  • Color app seems like Bump for pictures.
  • Why is the director of the FBI emailing my AOL email account from a io domain?
  • 3G forecast: partly spotty with chances of AT&T fail.
  • Out of all of Apple’s products, Jobs’ best revenue generating product must be the iPhone earbuds. At $30, it has $.50 of material.
  • I’ve lost count, would Google Circles be Google’s third or fourth social networking attempt?
  • Outlook should have a Save As option to save as a Word document.
  • What Google giveth Google taketh away with one change in their algo.
  • Ikea has made a killing by selling designer cardboard.

Quotes

  • Standards are paper. I use paper to wipe my butt every day. That’s how much that paper is worth. – Linus Torvalds
  • Seeing companies promote their Facebook fan page in advertisements reminds me of when companies promoted their AOL keyword. – @bencasnocha
  • Every software package expands until it can send email. – Zawinski’s Law
  • One great rock show can change the world. – School of Rock

Questions

  • How many tweets does it take change a light bulb and start trending?
  • Do you live in the moment or in a hurry to get to the next moment?
  • Is #SXSW the equivalent to #Woodstock but for social media experts and tech hipsters?
  • 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?
  • Is Chris Brown the next Dennis Rodman?

The Valley

  • There is a “lifestyle business” bubble.
  • To VCs, startup founders are like dogs to be sorted by pedigree.
  • Is it a bubble if you can’t afford to invest in a seed round?
  • Everybody is scared of a little bubble.
  • Forget about building a better mouse trap, think about building a better people trap.
  • Some party like a rock star, I party like a VC.

Technologist

  • Single sign-on is something that should be native in the browser.
  • Love thy neighbors, like thy Facebook friends, and retweet they twitter followers.
  • People like liking.
  • Tell me what smart phone you have and I’ll tell you everything about you, especially of you have it unlocked.
  • Terms of Service do not void your constitutional rights.
  • Love thy neighbors, like thy Facebook friends, and retweet they twitter followers.
  • If there ever is a a zombie attack just remember that the Googleplex has the biggest brains, Hollywood and Washington not so big.

Tweeple

  • Mr. Zuckerberg, tear down this walled garden.
  • Mr. Jobs, fix my iPhone.
  • I think Aaron Sorkin should write a treatment for a movie based on Stuxnet.
  • Jeff Bezos to serialize his brain and store it Amazon’s cloud and allow developers to access it via an API.

Japanese Earthquake

  • My heart goes out to the Fukushima 50 and all the search and rescue workers.
  • I have the same feeling, level of disbelief and sense of magnitude, about Japan now as I did about New York after September 11.
  • Earthquake + Tsunami + Nuclear + Meltdown = (Me Praying for the People of Japan)^8.7
  • Wow, the Japan quake at 8.9 is 700x stronger than the Haiti earthquake.
  • There is no match to the “shock and awe” that Mother Nature can produce in matter of minutes.
  • I <3 Japan
  • Stay strong Japan! If there is any country that can recover from two nuclear bombs, multiple Godzilla attacks, and a 8.9 quake Japan can.

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.

Jan 25 2011

When Saying Yes Means Seppuku

I’m the kind of person that wants to say yes to everything. “Can we add this new feature without a specification in a day?” “Yes” Saying yes is so easy, and a lot of of the times doing the work is easy too. But the trouble with saying yes to quickly is that not everything is thought out, finalized, or formalized accordingly. Sometimes the best answer is not yes. Many times the easiest thing is saying yes, but it’s doing something right takes time and that time should can not be speed up. A key ingredient to any recipe is time. You need to give everything the time to simmer, like wise in a software project you have to have the time to test accordingly, and to follow established processes. Sometimes saying yes is negotiating kamikaze.


Jan 7 2011

Retweet December 2010

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

  • I wish I could Ctrl+Alt+Delete out of everything.
  • The recommendation engine is the new search engine.
  • Loop. Break. Null. Exception.
  • How do you explain a feature is often as important as how you implement it.
  • The implications of a code change are often much larger than the code change itself.
  • There Will Be Bugs
  • Don’t trust the cloud.
  • This is my debugger. There are many like it, but this one is mine. My debugger is my best friend. It is my life. I must master it as I …
  • Code fist and test later is like shooting first and asking questions later.
  • I program with pen and paper.
  • The debugger is my best friend.

Team Leadership

  • Whining is not trying.
  • Doing nothing is doing something.
  • Don’t compound your problems by manifesting new problem.
  • A great team chooses a great leader and great leaders builds a great team.
  • Making good choices leads to better choices.
  • The most narrow minded perspective is that “We Versus Them” attitude. There is no them, only we.
  • If you have it, bring it, and if you brought it, don’t hide it!
  • You are not who you used to be or who you will become.
  • I am an idea artist, making you think is my master piece.
  • Productize your expertise.
  • Cheat off your own hard work.
  • Instead of making the effort, sometimes people make excuses.
  • If you can’t find reception don’t CALL ME.
  • In search of a triple rainbow.

Product Placement

  • Steve Jobs is one third innovator, one third imitator, and one third black shirt and jeans.
  • If Yahoo were to close down Flickr, there would be blood in the streets.
  • I got my hands on a Google CR-48 yesterday. It’s just a laptop with one single app, a browser. It’s a thin client for cloud computing.
  • I CAN HAZ CR-48!
  • I wouldn’t mind testing a Google CAR-48, their self driving car, for free.
  • Atlassian should buy corporate twitter clone Yammer.
  • I would like the hotel check-in process to be as easy as Foursquare check-in.
  • Taco Bell is Moctezuma’s Revenge.
  • I just had the yuckiest drink, Gatorade Recover Strawberry Kiwi. Claims to be a post game protein recovery beverage. Tastes like recovered gym shorts.
  • This day will go down in history as the Great Skype Fail Whale of 2010, when people had to remember how to use a phone to call someone…

Quote

  • It’s easier to invent the future than to predict it. – Alan Kay
  • I aspire to inspire before I expire – Alina Morelli
  • It is fun to do things others call impossible. – Emile Baudot
  • I’m a hope fiend. – Frankie/Celebrity Rehab
  • We now know that Visa, Mastercard and Paypal are instruments of US foreign policy. It’s not something we knew before. – Julian Assange
  • Guantanamo is used for laundering people to an offshore haven that does not follow the rule of law. – Julian Assagne
  • Assange had a lot of help making Sweden look like the last place on Earth that you would want to take your penis. – Scott Adams

Holiday

  • Happy Shopmas Season!!!
  • Jingle bells, cashiers ring, websites clicked.
  • Let it snow, let it snow, let it snow… cash.
  • Finishing up with xmas shopping.
  • Santa is welcomed in my house any time.
  • I think I developed carpal tunnel from opening all those gifts. Thank you santa.
  • My new year’s resolution is to double surface area of my comfort zone.
  • I’m gonna party like it’s 3999!
  • We are going to one up 2010 in 2011.
  • Getting ready for 2010++!
  • 2011 > 2010!

Dec 29 2010

Random Thoughts December 2010

No explanation required, here are some random thoughts that occurred to me during the past month. These ideas are usually to long to force into 140 character limit of Twitter but not fully develop to merit their own post.

Which is worse, a developer that will fight you every inch when you ask him to add a feature that upsets the balance of his understanding or the isometry of his code or a developer when asked to add a feature simply does it without question?

It is estimated that up to 90% of Internet traffic is spam. For some product searches up to 80% of Google results are spam because of black hat SEO.

In the span of year a typical teen on Facebook would have written more text than the whole of The Complete Works of William Shakespeare and would contain more drama than Shakespeare’s plays combine but it won’t be considered literature.

I travel for business a bit. I usually stay in the same hotel chain, if not the same hotel. I would like the hotel check-in process to be as easy as Foursquare check-in. In fact, if I am already in their reward program, and if they already have my credit card, they already know all pertinent information about me, why do I even have to check in or out at the front desk? Here is a million dollar idea, have a way book a hotel from you iPhone, you are immediately given a room number, if available, and your credit card in file or reward card is used to open the hotel room door. There is no need, unless you need more towels, to deal with the front desk.

Saying that listing to rap long enough will make you want to shoot someone is like saying that listening to country long enough will make you make love to your truck.