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

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges

    Data is life

    Handwritten by NF


    Data visualization impacts us every day.

    While capturing data is an important part of research, it is the presentation of the data that leads to actionable as well as life enhancing results.

    Life without visual data

    Could you imagine waking up one morning and not having a clock to tell you the time? How about not having a gas gauge in your car to tell you when you need to stop to fill up your tank at the gas station. For those who rely on your smartphone, what if you can’t tell when your battery is about to die because that little battery symbol on your phone no longer exist.

    Data is everywhere

    The truth is that data exists for everything we do. And when I say everything, I mean everything. In fact, visual presentation of data can make our lives easier in so many ways.

    Here’s one example of how data visualization can change your next trip to the mall. Have you seen those parking spot detectors used in some mall parking garages? They help you find parking spots a lot quicker by showing you how many available parking spots are in a lane. How awesome are those! If this becomes a mainstay in every parking lot we would all waste less time because we are no longer turning into lanes only to find there is no available parking space for us.

    Begin observing

    Here’s a fun exercise. What if you went about your day observing the many ways data visualization improves how you experience life? I think you would be surprised by the many ways data is shown to you everyday.

    Go ahead. Give it a try. And then come back and tell us how much data visualization makes a difference in your life.

    Ciao Peeps!

    Digital JavaScript Gauges

    Handwritten by TVD

    G’day Mate,

    The latest version of our Charts Suite is here! :)

    We’ve introduced a new example demonstrating how to create a digital gauge

    We also implemented a smarter way to format values using a flexible mask:

    var sales = new Gauge("sales", {
    mask: "$#,##0.#0"

    Thanks for your support everyone!

    Are you working on any projects in the flight simulation field? Know a friend in the same? We’d love if you’d introduce them to our JavaScript Flight Gauges suite.

    Release Notes: 2.3.0


    ======================================== [Enhancements]

    - New digital example
    - List item
    - New number formatting mask


    - formatValue negative bug

    JavaScript Flight Gauges

    Handwritten by TVD

    We don’t know where most developers start, but this is where we start:

    Artificial Horizon Attitude Indicator Gauge Concept JavaScript

    Artificial Horizon Concept - December 2012

    The Artificial Horizon gauge was the first concept we executed on and it all started with a single sketch on a single sheet of paper. The philosophers and proverbs often remark how great things start from small beginnings. We believe great software is no different.

    What started as 0 lines of code and a dream is now 2,316 lines of code and a reality:

    JavaScript Artificial Horizon Gauge

    Today, we officially unveil, not just our JavaScript Horizon Gauge, but our entire suite of JavaScript Flight Gauges:

    JavaScript Flight Gauges

    After 12 months of R&D, over 4 months of bugs fixes and enhancements and 20,000 lines of code later, we’re pretty damn proud of the results.

    The Difference is Principle

    We talk a lot about our six core principles of JavaScript development.

    We built our JavaScript Flight Gauges on those Six Core Principles:

    1. Beautifully Illustrated

    2. Cross Browser Compatible

    3. Lightweight Footprint

    4. Vector Based for Crisp Zoom and Print

    5. Highly Configurable

    6. Framework Agnostic

    We believe in those principles because great software doesn’t happen by accident. Great software is forged in principle and blood and sweat.

    A lot of companies will sell you software. Any software to be exact…

    But, not many think about developer happiness from concept to code. Hell…! Many start with the code and try to work their way back to you. It doesn’t work that way.

    Let me repeat: IT DOES NOT WORK THAT WAY…!

    We do things the principled way where ideas become concepts and before a single line of code is written, we ask a single question that underlines all six of our core principles, “How do we want a developer to ‘feel’ when using our components?”

    A simple question, right? But, you’d be amazed at the responses. Yet, at the end of the day, we care only about one answer, “Great!” We want you to feel great…! If you don’t, the API is refactored or the product doesn’t ship. It’s as simple as that.

    That’s why we’re able to ship simple software that scales in complexity:

    var horizon = new Horizon("horizon");
    . . .
    <div id="horizon"></div>

    That’s why we’re able to develop APIs that make you feel great. Because just like great developers take time to develop, great software is not that much very different.

    Great people develop on principle. Great software develops on principle too. Get some…!

    Airline Transport Pilot License (ATPL) Essentials Study Guide

    Handwritten by TVD

    JavaScript Flight Gauges

    The Wright Brothers were the first in flight. I write this post not very far from those historic grounds where they changed man’s relationship with the sky and stars forever.

    I’m hoping our guest today will do the same for you.

    [Interview Questions]

    Today we’re talking with Stefan, an aviator and founder of the ATPL Essentials project whose aim is to build an open source library of ATPL study guides.

    Stefan has had his private pilot’s license for over five years now and shares with us today his passion for flight and the data that drives it. Stefan’s latest project is a quick and targeted Airline Transport Pilot License (ATPL) Study Guide.

    How old were you when you realized you wanted to become a pilot?

    Quite old, actually! I was about to finish my studies of Aeronautical Engineering. Back then I believed I knew everything about airplanes. Then I met a friend who had his Private Pilot’s License (PPL) for several years and was an avid aviator.

    Talking to him, I found out that I knew a lot about the theory and close to nothing about the practice of flying. So after finishing my engineering degree, I decided to reward myself with my PPL license and enrolled in a flight school right after.

    What was the first aircraft you ever flew?

    I completed my training on a thirty year old Cessna 172. Nothing fast, nothing exciting, but very forgiving for the student pilot.

    What’s the fastest aircraft you ever flew?

    After my PPL I flew a lot in Austria, where I almost exclusively flew on new generation Diamond aircraft. I used small planes already for business trips, so range, speed and reliability became an issue.

    The next step into a deep addiction to flying was the Multi-Engine Piston (MEP) rating. I did it on a Diamond DA42 - a marvelous aircraft. No steam gauges, but an airliner like Garmin 1000 glass cockpit. Two piston engines, retractable gear. Beautiful to fly. You get cruise speeds of around 180kt, which makes for a nice travel experience.

    Do you have your private pilot’s license?

    Yes, I have my PPL since five years now. Couple of months ago I finished my instrument rating, and currently I am about to finish my commercial license. It was quite a way here from PPL, but flying as a hobby is one of the most fulfilling things you can imagine. There is always this little bit more that you can get. You always learn something. On every flight. That’s what keeps it interesting.

    How long did it take you to study for the pilot license exam?

    Coming right out of university with an aeronautical engineering degree, I had covered all the basic knowledge already. So I did my PPL fast pace in five weeks.

    Sitting in the plane almost every single day, doing two sessions per day. It was not as easy as it sounds though. I imagined, I would do some flying in the morning, and spend the rest of the day at the beach.

    Instead my day looked more like this: Quick breakfast, get to the airport, briefing, flying, debriefing - oh, it’s lunch time already! Quick lunch, briefing, flying, debriefing - then maybe study an hour in the evening and fall into bed at 8pm.

    As for the ATPL I took one and a half year for the whole theory. It is by far more expansive and I was doing it in parallel to a full time job, so there was only little time for studying.

    What percentage of candidates pass the flight exam the first time? Is there a penalty for failing the exam? Do you have to wait 6 months or a 1 year to retake?

    You have three attempts for each of the 14 exams. If you fail three times, there is some leeway to discuss with the authorities. Otherwise you would have to start all over. But I don’t know anybody who failed completely.

    Why a Flight Essentials study guide?

    When I started studying for the ATPL, I was looking for a good book that explains the background of the ATPL exam and gives some context.

    Several friends started out doing only question catalogues. When I joined them in their sessions, going through all the exam questions, I found out, that big parts of the books are irrelevant for answering the questions and other important building blocks for the questions were not even in the book.

    Worse, in no single instance did the book tell me exactly what I had to know to pass the exam. So I decided to create my own study guides, like I’d done at university already. My friends asked me if they could use them, so I came to the idea of publishing them.

    That’s how the ATPL Study Guide was born.

    What flight instruments does the Instruments Essentials cover?

    On the one hand it covers all the basic flight instruments, Speed Indicator, Artificial Horizon, Altimeter, Turn & Bank Indicator, Horizontal Direction Indicator and Vertical Speed Indicator. On the other hand it gives a rough overview of Alerting &Warning Systems, Autopilot and some additional information about the physical principles behind them.

    What is the most difficult instrument to master?

    In terms of studying, the Airspeed Indicator is not as simple as it sounds. There are many different relationships between Indicated, Calibrated, Equivalent and True Airspeed - depending on altitude, temperature and speed.

    In terms of flying, the Compass can be a bit tricky. Normally you don’t use the compass, but if your HDI is out of service, you have to rely on the little ball compass. The Compass is affected by acceleration and turning errors, which always have to be considered. By itself, is just a very flimsy device - shaking in turbulence, which does not make it easy to follow a certain heading.

    After the certification is complete, what do you do next? Are there any more exams?

    I have successfully passed all my theory exams and went for the Instrument Rating right after. Right now, I am two sessions short of finishing my CPL training.

    After that? Who knows!

    I definitely want to spend some time in cockpits, but I guess not in commercial airlines. I think best for me would be to fly for a small private executive operator. This would give me some time to finish the ATPL Essentials Study Guide and pursue some other projects I’ve been working on.

    What other projects are you working on? What’s next for you?

    I can’t tell much about that now. It’s a project about providing better and cheaper information to pilots.

    In the US, flight is quite transparent already. But in Europe it can be super annoying to find out simple things like the runway length or opening hours of an airport.

    Many people have to pay for that information. I think this is inherently wrong and there is a lot of space for improvement.

    Save Raphael SVG Chart As Image

    Handwritten by TVD

    Save Raphael SVG As Image

    We work with the best developers in the craft. They push the envelope. They make the right decisions. Do the right work and ship.

    In that environment, a lot of great minds ask the same great questions. One of those questions often sounds like this, “How do we save our SVG chart to a PNG image?”

    Saving SVG to PNG image turns out to be a very popular question. Though, not surprisingly, because the browser is involved, it is not an easy on to answer.

    Save Raphael SVG To Image Client Side

    First, you’ll have to have an HTML5 element to hang your SVG on:

    <div id="sales"></div>

    and a HTML5 button to trigger the download event:

    <button id="createImage">Create Image *.png</button>

    Next, you’ll have to have an SVG graphic to load into the HTML5 element. Here we’ll use our JavaScript Gauges:

    window.onload = function() {
    var sales = new Gauge("sales");

    At this point, you will have an SVG object loaded into your HTML5 node. Then follow this algorithm to setup the SVG image download process.

    Save SVG To Image Algorithm:

    1. Get the svg instance

    2. Create the canvas element

    3. Load the canvas element with our svg instance

    4. Save svg to png

    5. Clear the canvas

    Here’s the SVG To Image Algorithm in Code:

    //Create PNG Image
    document.getElementById("createImage").onclick = function() {
    //Get the svg
    var svg = document.getElementById("sales").innerHTML;

    //Create the canvas element
    var canvas = document.createElement('canvas');
    canvas.id = "canvas";

    //Load the canvas element with our svg
    canvg(document.getElementById('canvas'), svg);

    //Save the svg to png

    //Clear the canvas
    canvas.width = canvas.width;

    Step 3 uses the Canvg library. Canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element.

    Step 4 uses the Canvas2Image library. This is a small library that lets you easily save a HTML5 canvas element as an imagefile.


    The pros are you get a 100% client-side solution to saving Raphael SVG to PNG image. Which means less server load and more front-end awesome.

    That’s the good news…


    The bad news is the image is downloaded without a file extension. Also, the limitations with browser mime type control, you cannot give the image a custom file name.

    If you’re paying attention, you know those are pretty BIG cons.

    Save Raphael SVG To Image Server Side

    When you want to set a customized filename for the generated PNG file, you have to send the data:uri string from the canvas.toDataURL() element onto server side using Ajax. Then rewrite the response headers and send back the browser. Here’s a good article summarizing the server-side technique using CoffeeScript and Ruy.


    Using client-side only is not an option yet because the browser technology just isn’t there. What you’ll want to do is combine both client-side and server-side techniques to get the maximum customization.

    Something like…

    Save SVG To Image Algorithm:

    1. Get the svg instance

    2. Create the canvas element

    3. Load the canvas element with our svg instance

    4. Ajax the canvas.toDataURL() results to your server

    5. Rewrite the response headers and send back to the browser

    Using Ruby and Rails would look something similar to:

    # svg_controller.rb
    class SvgController < ApplicationController
    require "base64"

    def show
    @svg = Svg.where(id: params[:id]).first
    respond_to do |format|
    format.png {
    headers['Content-type'] = 'image/png'
    headers["Content-Disposition"] = "attachment; filename=\"chart.png\""
    @result = Base64.decode64(@svg.content.gsub('data:image/png;base64,', ''))
    render :text => @result

    That will get you the customization you need.Step 5 is an implementation detail. Use Ruby, J2EE, .NET, Python, use whatever you need to get the job done and you will have your victory.

    Happy Coding and Godspeed!

    Raphael.js JavaScript Charts 1.2.4

    Handwritten by TVD

    TechOctave JavaScript Charts and Gauges API Documentation.

    Hi Everyone - The latest version of our JavaScript Charts Suite and JavaScript Gauges Suite is here! :)

    We’re very excited to bring you what we feel is a beautiful API documentation set based on the wonderful Raphael.js open source documentation framework.

    We love the look and feel. Every time we use the new documentation it’s like spending time with an old friend. We hope you come to feel the same way too.

    Also, this release fixes a major bug limiting the number of Columns and Bars on the ColumnChart and BarChart - along with misaligned label positions. See, example of bug report showing shifting labels and bars:

    Charts shifting bug screenshot.

    Release Notes: 1.2.4

    TechOctave Charts Suite



    - New API Documentation in /docs folder
    - Implemented Series Charts capability in both ColumnChart and BarChart charts
    - Added barSpacingFactor property to ColumnChart and BarChart charts


    - Fixed issue where group label was shifted and not aligned for large amounts of columns/bars.
    - Fixed issue where columns/bars would shift off axis for large amounts of columns/bars.

    [API Improvement]

    - Deprecated hasLines from BubbleChart properties.
    - Deprecated lineColor from BubbleChart properties.
    - Deprecated lineStrokeWidth from BubbleChart properties.

    Happy Coding Everyone! Chief Geek Out!

    Project TALOS - Real Iron Man Suit Commissioned by US Army

    Handwritten by TVD

    Keloid from BLR_VFX.

    The tech behind the Iron Man suit is near. About a month ago, the US Army issued a broad request for proposals for a Tactical Assault Light Operator Suit (TALOS) for use by Special Operations Forces.

    From Greek methodology, Talos was a mythical man made of bronze who protected the island of Crete from pirates and invaders.

    With it, the Army hopes to give soldiers super human abilities like super strength. Even enhanced vision, including night vision and heat vision. The suit will also be bullet proof - meaning the super soldier could literally walk into a stream of bullets.

    If successful, the TALOS project could literally change warfare as we know it. For ages, military innovation has drove the ever evolving civilizations of mankind.

    The club and spear gave early mankind dominance over its Neanderthal competition. The chariot dominated the Nile, transforming Nubian Kings to Pharaohs. From the bosom of Greece to the steppes of Asia, the Macedonian Phalanx took Alexander The Great from boy King to Ruler of the Known World:

    The Roman Legion turned an upstart King in the foothills of Italy into the greatest super power the ancient world had ever known. Not many generations later, the world hailed Caesar from all its four corners:

    Military superiority spreads progress at the civilization level. Indeed, it brings change to the very face of a people. History is steeped in such lessons. Mankind the progeny of the teacher.

    The Bowman on horseback turned a young Temujin from orphan to the great Genghis Khan, allowing him to conquer every stretch of territory from China to the eastern flanks of Europe. To this day, I dare you to travel to Kazakhstan and not see the face of Khan in all you survey:

    Guns, Germs and Steel turned the Royal Family of Europe from Kings to CEOs - overnight successes. And from people to property for those who hadn’t the good sense to keep pace:

    And here we are…

    From boomstick to the longrifle to the M1 Carbine to the AR-15 semi-automatic rifle. The thing is every nation has these nowadays.

    The Royal Families of Southeast Asia have them. The Royal Families of Subsaharan Africa have them. The Royal Families of Europe have them. Even the Pope has them. Every Republic has them: The United States, China, Japan, Russia, France, England, Australia, Trinidad, South Africa, Venezuela, Chile, Brazil, Sweden, Switzerland…

    You get the picture…

    The TALOS program is the new evolutionary leap in modern warfare. If successful, it will be the guns and steel of our generation. If successful, it will mark a competitive advantage in military theatre. It will be the one element of warfare not easily reproduced by competing nations.

    And it would make for compelling leverage.

    You see, the thing with modern warfare is its all so very boring. Push a button, drop a bomb - boring. Close Quarter Battle (CQB) - boring. What modern warfare needs is some flare.

    Roman Legion with 5,400 soldiers in 11 cohorts - flare! 12,000 Macedonian Hoplites in Phalanx formation - flare! Mongol Horde 50,000 strong - flare! 10,000 Spartans, commanding 50,000 free Greeks - flare!

    The TALOS system will definitely be flare. I can’t imagine dropping even a squadron of super soldiers on an enemy capital. The results would be devastating.

    But how would the first generation TALOS system look? Here’s a potential imagining from the BLR VFX Team that brought us Keloid:

    The Mech Suit:

    The Super Solider:

    How do you think the TALOS system will look?

    But For Stack Overflow

    Handwritten by TVD

    MSDN Subscription Library

    Sometimes I wonder where we would be without Stack Overflow. I also wonder how many truly remember the days before it existed. People see old, poorly designed software forums and think, “Ick!” Today, you’re not one of those people. Today, you’re one of the people who remember when there weren’t any software forums at all.

    No Stack Overflow. No software forums. No Internet.

    Microsoft Developer Network

    Back in the day, some guys made a small business at University over the control of information. You’d seem ‘em around campus, strolling around the engineering buildings…

    “Pssst. Hey my man! I got MSDN Library and Visual Studio 2000. Yours for only $5 dollars.” Boom - That’s your ticket to a superior IDE and faster homework completion, so you can’t say no.

    CD ROMs. We carried the precursors to forums and Stack Overflow on physical disks - and we were happy for them too. How crazy is that?

    Then we graduated.

    If you were heavy into C++ and worked at an established company, you probably had access to an MSDN Subscription. Which means you could load code use “examples” into your Visual Studio IDE. And when I say, “examples” I mean that loosely.

    The answers were typically academic. But it was more that it…

    Over the years, as developers, we’ve come to develop a certain cultural ethos. An ethos built of principle of exploration and growth and progress. An ethos that self-directs those committed to the craft towards stronger and stronger skill development. I like to think about it as Technological Darwinism and the best of us have come to frequent places like Stack Overflow and others as a sort of modern day medieval tavern.

    Only our drink is not of spirit or ale, but of knowledge. In the end, we’ve developed a hive mind as such. One of which the answers we seek seem like questions we would’ve asked ourselves. Because we have. Countless times across countless cubes and continents.

    And when your time comes, it is as if the answers wait for you. At the rate of thousands upon thousands, developers ask the very questions they themselves would ask. The answers of which are forever memorialized and freely distributed for the next wave of developer synaptic activity.

    That’s the fundamental difference between Stack Overflow and what came before it. With Stack Overflow, you felt like “you” had asked the question yourself. In all that came before it, it felt like “they” had no idea even what to ask.

    And then there was Stack Overflow

    Before Stack Overflow, documentation wasn’t born of real world scenarios and pain points. So there was never an answer to the question “you” had. Just some brisk points on what “some guy” thought was a cool exposition. Or some vague reference to some static documentarian to check “over there”.

    But FOr Stack Overflow

    Real world examples. Real world answers. Accessible and freely distributed. That changed everything. In fact, I fundamentally believe that changed our entire profession all together.

    I mean, think about it.

    What other profession lives and breathes its craft like developers do? Do accountants go home at night and think about Tax Law. Do lawyers gather every few months to speak and meetup at Code Camps and Conferences? Do health inspectors spend weekends trying to analyze the best refrigerator temperature? I doubt it…

    It was our free dissemination of information and with it knowledge that bound us as a community, irrespective of individual ambition. And with it a zeitgeist was born, a developer zeitgeist.

    And isn’t that what makes places like Stack Overflow and Code Project so addictive. It’s not that you’ve found the answers you seek, it’s that you’ve found yourself.

    The CD ROMs and MSDNs and forums were never our voices. They weren’t from our breath of experience. They did not breathe life into our experience.

    Stack Overflow is our voice. It brought meaning to our experience.

    The Reality of Being a Software Developer

    Handwritten by TVD

    I get asked a lot, “What’s it like to be a software developer?” Sometimes its easy to answer, but there are days the answer gets a wee bit more interesting. Those days remind me a lot of this clip from Malcolm in the Middle

    And I get to wondering, “What if Breaking Bad is just Hal having a bad dream?”