Visualize energy efficiency

Question

I want to create something like this:

The black line represents a specific value.

I need this visualization in the phonegap application. I am using jQuery-mobile and Flotcharts for some other things. What would be the easiest way? Flotcharts not suitable for this type of chart.

Answer 1

I took advantage of several points to implement this in part, based on the @DNS suggestions above. I did this without using any plugins, just magic with the fleet.

First, I created a gradient background image similar to the above (sorry for my poor gamma skills). Then I set it against the background of my place owner. Then I configured the grid options to push the xaxis shortcuts to the center of my div. Finally, I “built” 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' } }); 

Work fiddle .

Result:

Answer 2

You can do this quite easily by specifying the calibration image as a background image (either manually or through the image plugin ), disabling x and y, then using the marks to draw a line.

If this does not work, you will need to write it as a plugin. This includes providing hooks for drawBackground (for drawing a gradient bar), drawSeries (for drawing a line), and possibly drawing (for overriding axes). For an example of a plugin that replaces the default axes for a fleet, see flot-tickrotor .

Take a look at the Hooks section of the documentation to find out how it works.