26 July 2012

JavaScript Bullet Charts

Handwritten by TVD

Now given, our customers are no lightweights. I can say, without a single doubt, that they are some of the most awesome developers in the community. Descended from Mount Olympus, molded after Adonis himself…Tiger’s Blood courses through their veins. So it was no small feat for them to reach out to us to fulfill this wish.

No small feat indeed, but a very very extremely smart one. Not only were we able to knock out the new Bullet Chart quicker, but now the chart will be supported indefinitely. And our customer saved a ton of time.

What are Bullet Charts anyway?

Introduction to the Bullet Chart

The Bullet Chart is a type of chart envisioned by business intelligence consultant Stephen Few circa 1995. The Bullet Chart was designed to convey a rich story clearly in little space.

Its linear and no-frills design provides a rich display of data in a small space, which is essential on a dashboard. Like most meters and circular gauges, bullet graphs feature a single quantitative measure (for example, year-to-date revenue) along with complementary measures to enrich the meaning of the featured measure.

Applying the Bullet Chart to Hustle & Code, LLC

Here, maybe between $0 and $200,000 in revenue is considered “Low”. Next, between $200,000 and $250,000 in revenue could be considered “Medium”. Finally, between $250,000 and $300,000 in revenue could be considered “High”.

Vertical Bullet Chart

Creating a vertical Bullet Chart is just as simple. Simply set the vertical property to true:

varrevenue=newBulletChart("revenue",{title:"Revenue",subtitle:"US$, in thousands",ranges:[150,225,300],measures:[275],markers:[265],vertical:true});

As the measure increases or decreases, simply pick your favorite JavaScript Long Polling technique and make a call to your data source to update the measure:

revenue.setMeasures([200]);

Need to update the ranges or even the comparative marker? You can do that too:

revenue.setRanges([100,200,300]);

revenue.setMarkers([125]);

That simple.

Customizing our Bullet Charts

Like all of our JavaScript gauges and JavaScript charts, our Bullet Chart is highly customizable.

Every range, measure and marker is customizable. Every label, stroke and even the number of major values (ticks) are customizable. We believe in powerful APIs that are easy to get started with. It’s that simple.

I believe simplicity is at the core of what makes great solutions…Well, Great! Our Bullet Chart has the right foundation for your next project.

I say this without hesitation because I believe something else as well…

There are plenty of charting solutions out there, so please don’t let this be your only stop…

But if you’re looking for a team that will be with you every step of the way…If you’re looking for a company that will stand with you, while the rest stand aside, then welcome home friend…

And let me be the first to Welcome You to the TechOctave Family.

discuss on twitter

every day thousands of developers use our charts & gauges to get the job done right