Imagine you have only 1 second (in real life scenarios, sometimes even less) to tell your story. How will you make your data visualization speak for itself? By making every aspect of your visualization count!

Data Labels describe the value associated with the specific point on the chart axes.

More than often, we ignore our data labels reducing them to mumbo jumbos. To ensure that our data labels help in taking our story forward, we need to add some delight to them too.

Here are 5 quick fixes for ugly X-axis data labels:

1. Shorten well-known names like names of weekdays and months

Long data labels merge with one another and affect the readability. When your labels are well-known terms, it is best to shorten them.

2. Skip alternate labels if you have a series of continuous data like days and months

If your labels are continuous and incremental in nature, you can skip the alternate labels. This will  reduce clutter from your chart while still communicating the necessary information.

3. Make the common denominator your X-axis name

Common denominators (common words repeated in all labels like Product A, Product B, Product C) are often found in data labels.

Here the word ‘Region’ appears in all the labels. It is better to make the common denominator, your X-axis name. It reduces unnecessary clutter.

4. A 45⁰ slant is more readable than a 90⁰ rotation

In cases where you can’t shorten your labels, it is better to slant them at 45⁰ angle rather than rotating them to 90⁰.

90⁰ rotated labels are difficult to read (unless, you are intentionally wanting to break a few necks). Make your users’ life a little easy by slanting them at 45⁰; they will thank you for it!

5. Add detailed information at the top of the data plot

Sometimes you may have to display additional information (eg: the reasons for the drop in sales) about your  data plots.

In such scenarios, putting all the information in the data labels will cause an information overload for the user as well as make your chart cluttered.

Shift some of this information to the top of your data plots. This will ensure that your chart remains uncluttered and the user too does not miss out any information.

Using these simple tips you can easily fix your ugly X-axis labels and make them a delight!

FusionCharts Suite XT comes with advanced label management that takes care of your ugly X-axis labels.

Keep watching this space for more tips on delightful charting!

If you have gone shopping for a web application recently, you would have noticed how a majority of them talk about the all-conquering dashboard they have while trying to lure you. And not without good reason. A dashboard is your handle to everything you have hired that app to do, and a good dashboard an easy-to-grip one.

What makes a dashboard good, you ask? A whole bunch of things, and then some more. But fundamentally, users want their dashboards to be clean, provide context like targets and benchmarks and be customizable. And in this post, we will take you through 5 web apps whose dashboards we find to be highly inspiring.

ClickTale

ClickTale is a Web Analytics tool that that provides businesses with insights into their customers’ online behavior to optimize website performance, improve usability and dramatically increase conversion rates.

Their dashboard shows the most critical components upfront — Heatmaps, Search Recordings, Visitor Recordings, Conversion Funnel and Visitor Geolocations — and then you can drill-down into any of them for a closer look.

Having both the percentage and absolute values helps you analyze your data both ways, and the neat little captions everywhere only help further with the analysis. That’s something you will find with all their charts so that a user is never left guessing.

Notice the descriptive caption and y-axis name.

[Also read: Reporting lessons you can learn from Google Analytics]

FitBit

FitBit is a pedometer that measures personal data such as the number of steps walked, distance traveled, calories burned and quality of sleep, and puts them together on a dashboard that becomes your stay-fit monitor.

The dashboard shows a breakdown of your activity and sleep patterns, compares it to the ideal numbers and then awards badges if you have done well. Here’s a part of the dashboard.

(Image credits: liverungrow.com)

Showing the activity as a percentage of the goal reached pushes you to complete it.

Similarly it adds more context to your sleep pattern by telling you your overall sleep efficiency.

(Image credits: Gizmodo)

Sprout Social

Sprout Social is a social media management software that helps businesses manage and understand the engagement of their social presence across Twitter, Facebook, LinkedIn and more.

(Image credits: SlingShot SEO)

The dashboard follows a nice information hierarchy going from the overall group trends to the breakdown of demographics for Twitter and Facebook. The sparklines sum up the trend of new followers and messages in a small space, and the sweet icons for male and female followers aid data comprehension.

When you dive into their Twitter report, you will find the same principles carried forward there as well.

(Image credits: johnsocial.com)

MailChimp

MailChimp is an online email marketing solution to manage contacts, send emails and track results. When you head to the report section of a particular campaign, the dashboard will show you the important metrics — Opens, Clicks, Unsubscribes and RoI.

The metrics are compared to the list and industry average to help you understand where you stand in the competititve landscape. Isn’t that sweet?

MailChimp also shows you has your list has grown over time in its reports.

In this chart, if you just want to see the number of new subscribers, you can switch off the existing subscribers by clicking on its key in the legend. And when you want it back on, just click on it in the legend again. Also, if you want a closer look at the data for a particular period, you can simply zoom into it by selecting the time period. Now that’s what’s called power-packed reporting.

LinkedIn

LinkedIn needs no introduction. The world’s largest professional network has reports for a bunch of its tools but the one that we particularly like is the Group Statistics. It gives you a nice handle on how a group has been growing, its engagement levels and the demographics of the group members itself.

The LinkedIn reports are definitely one of the cleanest reports out there with whitespace being the only demarcator between two metrics.

The stats are then split into 4 tabs — Summary, Demographics, Growth and Activity — to reduce the cognitive load of each tab and break down the info into digestible chunks.

Here’s a look at the demographics tab.

While the charts show the top 5-6 job functions, locations and industry, the top performers have been neatly mentioned in text itself to get a quick summary.

And in charts plotting a lot of data, for example the number of members in group right from the day it started, they use tooltips to give additional information about a data point. This way you have all the data you need yet the chart remains uncluttered.

Which of these reports and dashboards did you find most inspiring? What other apps have you used with great reports and dashboards? Add them in the comments below. We would love to know.

[Bragging rights: FusionCharts is the charting partner for LinkedIn and ClickTale (PDF)]

You may have often wanted to export charts as images from the backend and email them to users, especially to senior management, who love getting insightful charts & dashboards delivered straight to their inbox. Or maybe you’ve wanted to automate these reports for convenience. While we have your back covered with our server-side Export Handlers for various technologies, we realize that these still require client-side rendering using a browser, which can sometimes be a hassle. Also, recently we’ve been getting requests for a way to export charts without having to render them at client-side. This got us thinking about how to do this in a way that is simple, and yet, works across all server-side scripting languages.

We remembered blogging about something similar last year – the free PHP plugin, FCImg – which allows you to generate images of charts on the server, without rendering the chart in a browser. Picking up from here, we figured the best way to get this to work on any server-side platform would be to use command line execution. Below, we give you two options with step-by-step instructions for each.

A. Using wkhtmltoimage

wkhtmltoimage is a simple shell utility to convert HTML to images.

I. Setup wkhtmltoimage:

1. Download and install the wkhtmltoimage library for Mac, Windows, or linux (1368, amd64).

Note: Be careful not confuse wkhtmltoimage with wkhtmltopdf, which generates PDF files instead. The Windows installation comes with both.

2. It is better to add the path of the executable file to the PATH so that you do not need to type the whole path when calling it. The Windows installer asks whether to set the PATH. Do select that option while installing.

II. Export Charts as Images from Server-side:

1. Create a dynamic or static web page, and generate a chart in it using our JavaScript chart library. To take a snapshot of only the chart, we recommend loading nothing but the chart in the web page, as shown in this example.

2. Set the page’s default margin and padding to 0 using CSS.

3. Now, use command-line or server-side shell execution command to :

1. Call wkhtmltoimage
2. Pass the URL of your webpage to it
3. Pass the path and name of the image file (with extension) where the image will be saved
4. Pass additional options to set a small delay to allow the JavaScript and chart inside your page to fully load before rendering. Normally 500 ms should do, but it can be extended upto 15000 ms based on how the wkhtmltoimage engine performs in your system.

III. Sample Script Using PHP:

Here is an example of how to execute the script in command line for PHP, although you can do the same for ROR, ASP.NET, Java, ColdFusion, and pretty much any server-side scripting platform.

IV. Cropping & Other Advanced Options:
If you need to crop a part of the image that is saved through this process, it can be easily done by setting the –crop-w or –crop-h options in this wkhtmltoimage manual.

B. Using PhantomJS

The popular PhantomJS JavaScript library allows for more programming flexibility than wkhtmltoimage, but, you may find the previous one easier to implement. Here’s how to set this up:

I. Download PhantomJS:

Binary source of PhantomJS

II. Sample Script in PhantomJS:

Let’s name it as render.js

III. To Execute:

In shell, from the path where the PhantomJS executable is present:

We hope this will ease your workflow by a bit, and allow you to share more delightful charts with your end users.

Are there any other scenarios where you face difficulty exporting charts?

This March, we are showing our love as sponsors for two great events, Startup Festival and The Goa Project, both in their first editions.

Startup Festival is a 4-day event with an aim to make Bangalore one of the top ten startup hubs in the world. We believe the time for Indian software products to make an impact on the world at large has come, and what better place than Bangalore to be at the center of it. We get to see front-seat action.

As a part of the festival, we are also opening our doors (and then again) for festival goers to come and check out how we work.

The Goa Project is an unconference and festival bringing together creative people from different disciplines — music, films, art, design, technology and more — sort of like India’s SXSW. At FusionCharts, we combine technology, design and art to deliver a delightful experience with whatever we do, so it was only natural we showed our love for an idea like this.

I will be there at both the events myself, so come say hi if you see me around.

In this series of blog posts titled ‘Embracing Raphaël’, we’re taking you behind the scenes, giving you a glimpse of the nuts and bolts that power FusionCharts products, sharing our perspective on the technological shift that’s happened in the data visualization industry over the past few years, and how it’s influenced our products.

If you’ve read our ‘Breaking the Ice’ page, or 10th anniversary book, you’d know that we started out as a Flash charting component, pioneering delightful charting for web & enterprise apps about a decade ago. It was a simpler world back when Flash was the only option for rendering interactive charts, and Internet Explorer ruled the roost among browsers. Since then, the charting landscape has undergone tremendous change.

With the move from Flash to JavaScript, which took us by surprise thanks to Apple giving Flash the boot way earlier than anticipated, two underlying technologies surfaced as worthy contenders for creating visualizations in JavaScript – Canvas and SVG. Many have written about the pros and cons of each, and which unique purposes they serve. At the time, Canvas was still very nascent, not supported by IE, and it was clear that we needed to go with SVG. When it came to deciding a rendering method, we weighed our options, and realized it would save us a lot of development time if we borrowed from an existing JavaScript library, than building one ourselves ground-up. We decided to go with one of the then-upcoming JavaScript libraries, HighCharts, customizing it extensively so our users could get the same delight they’re used to from our charts, only this time in JavaScript. The migration was complete in record time of 5 weeks. While it was a great short-term fix to use HighCharts as our renderer, we eventually ran into numerous glitches with rendering for which we’ve had to devise countless hacks, more than compensating for the initial time saved during migration. We knew it wasn’t too long before we’d need to retire HighCharts for a more longterm, comprehensive solution.

With this decision, the hunt for an underlying visualization platform began yet again, this time reviewing libraries such as D3, and Raphaël. At the end of this search, Raphaël surfaced as the ideal candidate because of how extensible it is, allowing us to easily extend it to handle big data processes in enterprise applications, which in the case of most our customers, is the norm. It allows for extensive cross-browser support, even rendering on IE 6 using VML. To top it all, an added bonus of working with Raphaël is the presence of an active developer community, which made working with it a lot easier than on other platforms. In hindsight, we can confidently say that Raphaël has saved us a ton of development time.

Despite all the strengths of Raphaël, reworking our entire suite of charts, gauges, and maps was never going to be a breeze through. We undertook the mammoth task of rebuilding our products from the ground up, keeping the same delightful looks, and extensive feature list, that our 21,000 customers have grown to admire over the years, but breathing new life into the underlying technology that powers it all. In the process, we’ve ended up with such a customized implementation of Raphaël, that we think you’d love to hear all about the learnings, tips, and tricks we’ve accumulated in the process, which is what we aim to do in this series of blog posts.

This post is an introduction, and is meant to give you some context on the decisions we’ve made in recent times, and how we got to where we are today. Now that we’ve connected the dots, we can move on to the more technical, meaty posts, which we think you’ll totally dig. The upcoming posts would be Raphaël-centric, where we’ll be sharing loads of useful stuff ranging from a bunch of simple hacks like how to do vertical alignment of text, to some widely requested features like physical grouping of elements, and even new ideas like how to make shapes act as disciples, followers, or stalkers. We hope this will give you a deeper appreciation for the underlying workings of our products, and maybe even a different perspective on working with Raphaël. Stay tuned.

Is there anything about Raphaël you’d like to see discussed here?

We recently redesigned our Careers page. The thing is data visualization is evolving at is fastest pace ever, and so are we. And to keep evolving, we need the smartest people we can find to come work with us. So a careers page that sums up our vision, the everyday challenges we work on and our culture, and does it all in a oh-my-god-I-am-getting-goosebumps way was a only natural first step.

But before we got to that, we wanted to get our inspiration sorted out. We wanted to get some goosebumps ourselves. We went hunting on the big monstrous World Wide Web, and boy, inspiration we did find. We had to impose a deadline so we could come back to the world and actually start working on our own Careers page.

So here we are bringing to you 5 awesome startup careers page that we absolutely love and admire.

Square

This quite easily is our favorite Careers page out there. Starting with the company’s vision of how they are simplifying everyday commerce that gets you all excited, they take you through their story, their core philosophies, the benefits and perks they offer and top it off with jaw-dropping pics of their office. To drive home their vision, they have a lovely video where their team members talk about their interpretation of the vision, and how lucky they feel to be a part of something that big.

But that’s not all. They divide their openings under the heads Creative, Engineering and Business and then appeal to each of these segments with language they understand. If you are a designer, they tell you how Square is a design-led company where they work on making their products simpler and more beautiful every single day for the common man to use. As a designer, isn’t that company you want to work for rather than one where engineering drives the way and your job is just jazzing it up in the end?

Kickstarter

How many times have you seen a video without a play button? Kickstarter’s Careers page makes some of the most creative use of HTML5 video, so while they are telling how they would love you to be a part of the team, you see people walking and talking in the video behind.

The grand goal at Kickstarter is to help tens of thousands of creative projects come alive which you buy into right away with their super-creative Careers page itself.

And of course, why should they shy away from telling you that they are in the greatest city in the world?

Also, check out the lovely video they have on their Teams page. Chances are you haven’t seen anything like that either.

SoundCloud

“We work harder” is what SoundCloud’s careers page tells you. And being the world’s largest audio distribution platform, they sure have to.

What we particularly like about the page is how you can get up and close with the team you would like to work with. So if you are engineer, you have a photo of backend engineer Oliver with sound bytes on what it’s like to work at SoundCloud. If he was able to fascinate you, click on “Work with Oliver” and all engineering openings will be brought to you.

And if you reach all the way down the page, it means you work harder too in which case they are all the more interested in you.

Facebook

Well, Facebook is not exactly a startup but the way they work is similar to a startup.

We love how they explain their core values on their Careers page — Focus on Impact, Move Fast, Be Bold, Be Open and Build Social Value.

They do a great job of bringing out Facebook’s vision of making the world more connected and doing it fast, real fast.

And then again, they are Facebook.

MailChimp

What do you do when you have a cuddly chimp as your mascot? You make prospective employees fall in love with it on your Careers page.

The MailChimp page is not as fancy as the others but the pics bring out what it is like to work over there very well. The building, the people, the Macbooks, the headphones, all of it.

Over to you. Which is the most most inspiring Careers page you have ever come across? And while you are it, why don’t you give our all-new Careers page a look and maybe you know write to us or something?

We hate ugly. 0.0376% more than you do. And in our aim to make the world more delightful, or at least a tiny little corner of it, we proudly present to you the FusionCharts Clinic. Bring in the dark spots, rashes, weight problems or the self-confidence issues your dashboard has, and we will cure it for you. Starting this month, we will pick one dashboard every month and give it the FusionCharts Clinic treatment.

Here are the main things we will look for and help you cure with your dashboard:

1. Are you plotting the right metrics for your audience?
2. Are the metrics laid out in the order of their importance?
3. Are you using the right charts for the analysis you wish to facilitate? Are they just putting a face to the data, or do they also have the right context built in?
4. Have you built in the fundamental usability principles in your charts?
5. Does your dashboard look good? We take this very seriously. Nobody likes ugly.

Think you need help with any of these? Go ahead, enlist for treatment in the FusionCharts clinic.

Last October, we completed a decade of being in business. And with that we released a book on our entire journey, aptly titled Not Just Another Pie In The Sky. PDF only to begin with, it is now available on Kindle as well at $5.99. So go ahead, get yourselves a copy and let us know what you think of it.

What’s the book about?

FusionCharts was started by a 17-year old in a quest for more pocket money. With no business learnings whatsoever and in a country not exactly known for its software product, the ten-year journey was quite a, well, journey.

We made a loss on our first sale. Our biggest marketing campaign come from our lack of legal knowledge. We had to shut down our office for a week because it got flooded. People found love at work. We had a paranormal entity in our office. And then there was Barack Obama using our products, looking quite impressed with what he saw.

The book takes you through the decade-long trials and tribulations of the company in a light and fun read. Go ahead get a sneak peek.

How’s it going so far?

Well, people have been saying a lot of things about it. “You guys are so full of yourself,” said one. But that one was the only one, as far as we remember. Others have been calling it candid, inspiring, hilarious,and entertaining. Soulful, too.

“Great stuff,” said Derek Sivers, founder of CD Baby and more popularly called one of the last music-business folk heroes. “Inspiring,” said Dharmesh Shah, co-founder and CTO of Hubspot. Enough with the name-dropping.

We would love to know what you think. So go get yourself a copy (PDF at $9.99, Kindle at $5.99) and do drop a line to:

• The author – sanket [at] pokeandbite [dot] com
• The founder- pallav [at] fusioncharts [dot]com
• Any other member you loved from the story – story [at] fusioncharts [dot] com

We love the Internet for all the funnies it brings to us. So much so that we had listed out all the funnies we overdose on every day. And the latest one to catch our fancy is the “Go home, you’re drunk” meme.

While we go “lol! rofl” at all the memes, we had some “go home, you’re drunk” stories to talk of as well. Stories of charts that got high. Here’s bringing a bunch of Drunk Charts to you from around the web.

I’ve got numbers to prove what I am saying

Even at 60% favorability, Romney was no match for Palin’s 70% in the GOP nomination for 2012.

This chart had celebrity status when it first came out.

I told you it’s the same thing

Source – JunkCharts

50%=20%. Enough said.

The walls are slanted, and the room is closing in on me

If you could ever italicize a chart, this is how it would end up looking. Or maybe not. The only purpose of this chart is to hide everything it is conveying.

I am so shiny, look at me

This chart is quite clearly meant for higher purposes. Ordinary souls, give it a rest.

I’ll have what he’s having

Go get another round. That’s the only way you are going to agree with the premise of the ad.

Got more drunk charts to share? Share them in the comments. Add in a caption, too. We just can’t get enough of them.

Touching the billion mark is no mean feat. The K-pop video Gangnam Style joined the billion club by becoming the most viewed video on the web ever! FusionCharts, the name that powers over a billion delightful charts a month presents an interesting little visual story charting out the incredible phenomenon that has us psyched, a billion times over!