Visualize Energy Efficiency Level

I want to create something like this: The black line represents a specific value. I need this visualization within a phonegap-app. I'm using jQuery-mobile and Flotcharts for some

Solution 1:

I took a few moments to implement this based in part on @DNS's suggestions above. I did it without using any plugins, just straight flot magic.

First, I created a gradient background image like the one above (excuse my poor gimp skills). I then set that to the background of my place holder div. Then I configured flot's grid options to push the xaxis labels up to the center of my div. Finally I "plotted" a straight line.

$.plot("#placeholder", [ 
    {data: [[260,0],[260,100]], color:'black', lines: {lineWidth:4}} 
],{yaxis:{show:false},xaxis:{min:0,max:400},grid: {
        show:true,
        borderWidth:0,
        margin: {bottom:90},
        labelMargin:-90,
        color:'white'
    }
});

Working fiddle.

Result:

Solution 2:

You can probably do this quite easily by providing the gauge as a background image (either manually or via the image plugin), turning off the x and y axes, then using markings to draw the line.

If that doesn't work, you'd need to write it as a plugin. That would involve providing hooks for drawBackground (to draw the gradient bar), drawSeries (to draw the line), and possibly draw (to override the axes). For an example of a plugin that replaces Flot's default axes, take a look at flot-tickrotor.

Take a look at the Hooks section of the docs for more info on how this works.