how to show values in different speedometer

Question

i am using HtML5,Canvas,Javascript, I had made a page where excel file is being read and its value is shown in speedometer ..my whole code i working fine but there i another thing that i cant do which is ,suppose we have five values in excel file like this

so according to my code it will show all values in one speedometer ,but i want to show it on different speedometer ,say 50 in one speedometer 90 in another one ,10 on another one and so on ..I am not able to do so ..my code is as follows

           <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Speedometer HTML5 Canvas</title>

        <script src="script copy.js">

    </script>

    </head>
    <body onload='draw(0);'>
        <canvas id="tutorial" width="440" height="220">

                Canvas not available.
            </canvas>
        <div id="divHidden" style="visibility: hidden; width: 0px; height: 0px">
            <form id="drawTemp">
            <input type="text" id="txtSpeed" name="txtSpeed" value="20" maxlength="2" />
            <input type="button" value="Draw" onclick="drawWithInputValue();">
            <input type="file" id="file" onchange="checkfile(this);" />
           <input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" /> 


        <button onclick="myStopFunction()">Stop Meter</button>


            </form>
        </div>
    </body>
    </html>

    <script type="text/javascript" language="javascript">


        var myVar=setInterval(function(){readdata(1,2)},2000);
        function myStopFunction()
        {
            clearInterval(myVar);
        }


        function checkfile(sender) {
            var validExts = new Array(".xlsx", ".xls", ".csv");
            var fileExt = sender.value;
            fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
            if (validExts.indexOf(fileExt) < 0) {
                alert("Invalid file selected, valid files are of " +
                   validExts.toString() + " types.");
                return false;
            }
            else return true;

        }
    var xVal = 1;
    var yVal = 2

        function readdata(x,y) {
            x = xVal;
            y = yVal;
            try {
                var excel = new ActiveXObject("Excel.Application");
                excel.Visible = false;
                var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
                var excel_sheet = excel_file.Worksheets("Sheet1");
                var data = excel_sheet.Cells(x, y).Value;
                //alert(data);
                drawWithexcelValue(data);
                xVal = xVal + 1;
                if(data==null || data=="")
                { 
                myStopFunction(); 
                }
                excel.Application.Quit();

            }
            catch (ex) {
                alert(ex);
            }
        }
    </script>
    and for speedometer here is my code



   /*jslint plusplus: true, sloppy: true, indent: 4 */
(function() {
    "use strict";
    // this function is strict...
} ());

var iCurrentSpeed = 20,
    iTargetSpeed = 20,
    bDecrement = null,
    job = null;

function degToRad(angle) {
    // Degrees to radians
    return ((angle * Math.PI) / 180);
}

function radToDeg(angle) {
    // Radians to degree
    return ((angle * 180) / Math.PI);
}

function drawLine(options, line) {
    // Draw a line using the line object passed in
    options.ctx.beginPath();

    // Set attributes of open
    options.ctx.globalAlpha = line.alpha;
    options.ctx.lineWidth = line.lineWidth;
    options.ctx.fillStyle = line.fillStyle;
    options.ctx.strokeStyle = line.fillStyle;
    options.ctx.moveTo(line.from.X,
        line.from.Y);

    // Plot the line
    options.ctx.lineTo(
        line.to.X,
        line.to.Y
    );

    options.ctx.stroke();
}

function createLine(fromX, fromY, toX, toY, fillStyle, lineWidth, alpha) {
    // Create a line object using Javascript object notation
    return {
        from: {
            X: fromX,
            Y: fromY
        },
        to: {
            X: toX,
            Y: toY
        },
        fillStyle: fillStyle,
        lineWidth: lineWidth,
        alpha: alpha
    };
}

function drawOuterMetallicArc(options) {
    /* Draw the metallic border of the speedometer 
    * Outer grey area
    */
    options.ctx.beginPath();

    // Nice shade of grey
    options.ctx.fillStyle = "rgb(127,127,127)";

    // Draw the outer circle
    options.ctx.arc(options.center.X,
        options.center.Y,
        options.radius,
        0,
        Math.PI,
        true);

    // Fill the last object
    options.ctx.fill();
}

function drawInnerMetallicArc(options) {
    /* Draw the metallic border of the speedometer 
    * Inner white area
    */

    options.ctx.beginPath();

    // White
    options.ctx.fillStyle = "rgb(255,255,255)";

    // Outer circle (subtle edge in the grey)
    options.ctx.arc(options.center.X,
                    options.center.Y,
                    (options.radius / 100) * 90,
                    0,
                    Math.PI,
                    true);

    options.ctx.fill();
}

function drawMetallicArc(options) {
    /* Draw the metallic border of the speedometer
    * by drawing two semi-circles, one over lapping
    * the other with a bot of alpha transparency
    */

    drawOuterMetallicArc(options);
    drawInnerMetallicArc(options);
}

function drawBackground(options) {
    /* Black background with alphs transparency to
    * blend the edges of the metallic edge and
    * black background
    */
    var i = 0;

    options.ctx.globalAlpha = 0.2;
    options.ctx.fillStyle = "rgb(0,0,0)";

    // Draw semi-transparent circles
    for (i = 170; i < 180; i++) {
        options.ctx.beginPath();

        options.ctx.arc(options.center.X,
            options.center.Y,
            i,
            0,
            Math.PI,
            true);

        options.ctx.fill();
    }
}

function applyDefaultContextSettings(options) {
    /* Helper function to revert to gauges
    * default settings
    */

    options.ctx.lineWidth = 2;
    options.ctx.globalAlpha = 0.5;
    options.ctx.strokeStyle = "rgb(255, 255, 255)";
    options.ctx.fillStyle = 'rgb(255,255,255)';
}

function drawSmallTickMarks(options) {
    /* The small tick marks against the coloured
    * arc drawn every 5 mph from 10 degrees to
    * 170 degrees.
    */

    var tickvalue = options.levelRadius - 8,
        iTick = 0,
        gaugeOptions = options.gaugeOptions,
        iTickRad = 0,
        onArchX,
        onArchY,
        innerTickX,
        innerTickY,
        fromX,
        fromY,
        line,
        toX,
        toY;

    applyDefaultContextSettings(options);

    // Tick every 20 degrees (small ticks)
    for (iTick = 10; iTick < 180; iTick += 20) {

        iTickRad = degToRad(iTick);

        /* Calculate the X and Y of both ends of the
        * line I need to draw at angle represented at Tick.
        * The aim is to draw the a line starting on the 
        * coloured arc and continueing towards the outer edge
        * in the direction from the center of the gauge. 
        */

        onArchX = gaugeOptions.radius - (Math.cos(iTickRad) * tickvalue);
        onArchY = gaugeOptions.radius - (Math.sin(iTickRad) * tickvalue);
        innerTickX = gaugeOptions.radius - (Math.cos(iTickRad) * gaugeOptions.radius);
        innerTickY = gaugeOptions.radius - (Math.sin(iTickRad) * gaugeOptions.radius);

        fromX = (options.center.X - gaugeOptions.radius) + onArchX;
        fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + onArchY;
        toX = (options.center.X - gaugeOptions.radius) + innerTickX;
        toY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY;

        // Create a line expressed in JSON
        line = createLine(fromX, fromY, toX, toY, "rgb(127,127,127)", 3, 0.6);

        // Draw the line
        drawLine(options, line);

    }
}

function drawLargeTickMarks(options) {
    /* The large tick marks against the coloured
    * arc drawn every 10 mph from 10 degrees to
    * 170 degrees.
    */

    var tickvalue = options.levelRadius - 8,
        iTick = 0,
        gaugeOptions = options.gaugeOptions,
        iTickRad = 0,
        innerTickY,
        innerTickX,
        onArchX,
        onArchY,
        fromX,
        fromY,
        toX,
        toY,
        line;

    applyDefaultContextSettings(options);

    tickvalue = options.levelRadius - 2;
//alert(tickValue);
    // 10 units (major ticks)
    for (iTick = 10; iTick < 180; iTick += 10) {

        iTickRad = degToRad(iTick);

        /* Calculate the X and Y of both ends of the
        * line I need to draw at angle represented at Tick.
        * The aim is to draw the a line starting on the 
        * coloured arc and continueing towards the outer edge
        * in the direction from the center of the gauge. 
        */

        onArchX = gaugeOptions.radius - (Math.cos(iTickRad) * tickvalue);
        onArchY = gaugeOptions.radius - (Math.sin(iTickRad) * tickvalue);
        innerTickX = gaugeOptions.radius - (Math.cos(iTickRad) * gaugeOptions.radius);
        innerTickY = gaugeOptions.radius - (Math.sin(iTickRad) * gaugeOptions.radius);

        fromX = (options.center.X - gaugeOptions.radius) + onArchX;
        fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + onArchY;
        toX = (options.center.X - gaugeOptions.radius) + innerTickX;
        toY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY;

        // Create a line expressed in JSON
        line = createLine(fromX, fromY, toX, toY, "rgb(127,127,127)", 3, 0.6);

        // Draw the line
        drawLine(options, line);
    }
}

function drawTicks(options) {
    /* Two tick in the coloured arc!
    * Small ticks every 5
    * Large ticks every 10
    */
    drawSmallTickMarks(options);
    drawLargeTickMarks(options);
}

function drawTextMarkers(options) {
    /* The text labels marks above the coloured
    * arc drawn every 10 mph from 10 degrees to
    * 170 degrees.
    */
    var innerTickX = 0,
        innerTickY = 0,
        iTick = 0,
        gaugeOptions = options.gaugeOptions,
        iTickToPrint = 0;

    applyDefaultContextSettings(options);

    // Font styling
    options.ctx.font = 'italic 10px sans-serif';
    options.ctx.textBaseline = 'top';

    options.ctx.beginPath();

    // Tick every 20 (small ticks)
    for (iTick = 10; iTick < 180; iTick += 20) {

        innerTickX = gaugeOptions.radius - (Math.cos(degToRad(iTick)) * gaugeOptions.radius);
        innerTickY = gaugeOptions.radius - (Math.sin(degToRad(iTick)) * gaugeOptions.radius);

        // Some cludging to center the values (TODO: Improve)
        if (iTick <= 10) {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
        } else if (iTick < 50) {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX - 5,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
        } else if (iTick < 90) {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
        } else if (iTick === 90) {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 4,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
        } else if (iTick < 145) {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 10,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY);
        } else {
            options.ctx.fillText(iTickToPrint, (options.center.X - gaugeOptions.radius - 12) + innerTickX + 15,
                    (gaugeOptions.center.Y - gaugeOptions.radius - 12) + innerTickY + 5);
        }

        // MPH increase by 10 every 20 degrees
        iTickToPrint += Math.round(2160 / 216);
    }

    options.ctx.stroke();
}

function drawSpeedometerPart(options, alphaValue, strokeStyle, startPos) {
    /* Draw part of the arc that represents
    * the colour speedometer arc
    */

    options.ctx.beginPath();

    options.ctx.globalAlpha = alphaValue;
    options.ctx.lineWidth = 5;
    options.ctx.strokeStyle = strokeStyle;

    options.ctx.arc(options.center.X,
        options.center.Y,
        options.levelRadius,
        Math.PI + (Math.PI / 360 * startPos),
        0 - (Math.PI / 360 * 10),
        false);

    options.ctx.stroke();
}

function drawSpeedometerColourArc(options) {
    /* Draws the colour arc.  Three different colours
    * used here; thus, same arc drawn 3 times with
    * different colours.
    * TODO: Gradient possible?
    */

    var startOfGreen = 10,
        endOfGreen = 200,
        endOfOrange = 280;

    drawSpeedometerPart(options, 1.0, "rgb(82, 240, 55)", startOfGreen);
    drawSpeedometerPart(options, 0.9, "rgb(198, 111, 0)", endOfGreen);
    drawSpeedometerPart(options, 0.9, "rgb(255, 0, 0)", endOfOrange);

}

function drawNeedleDial(options, alphaValue, strokeStyle, fillStyle) {
    /* Draws the metallic dial that covers the base of the
    * needle.
    */
    var i = 0;

    options.ctx.globalAlpha = alphaValue;
    options.ctx.lineWidth = 3;
    options.ctx.strokeStyle = strokeStyle;
    options.ctx.fillStyle = fillStyle;

    // Draw several transparent circles with alpha
    for (i = 0; i < 30; i++) {

        options.ctx.beginPath();
        options.ctx.arc(options.center.X,
            options.center.Y,
            i,
            0,
            Math.PI,
            true);

        options.ctx.fill();
        options.ctx.stroke();
    }
}

function convertSpeedToAngle(options) {
    /* Helper function to convert a speed to the 
    * equivelant angle.
    */
    var iSpeed = (options.speed / 10),
        iSpeedAsAngle = ((iSpeed * 20) + 10) % 180;

    // Ensure the angle is within range
    if (iSpeedAsAngle > 180) {
        iSpeedAsAngle = iSpeedAsAngle - 180;
    } else if (iSpeedAsAngle < 0) {
        iSpeedAsAngle = iSpeedAsAngle + 180;
    }

    return iSpeedAsAngle;
}

function drawNeedle(options) {
    /* Draw the needle in a nice read colour at the
    * angle that represents the options.speed value.
    */

    var iSpeedAsAngle = convertSpeedToAngle(options),
        iSpeedAsAngleRad = degToRad(iSpeedAsAngle),
        gaugeOptions = options.gaugeOptions,
        innerTickX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * 20),
        innerTickY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * 20),
        fromX = (options.center.X - gaugeOptions.radius) + innerTickX,
        fromY = (gaugeOptions.center.Y - gaugeOptions.radius) + innerTickY,
        endNeedleX = gaugeOptions.radius - (Math.cos(iSpeedAsAngleRad) * gaugeOptions.radius),
        endNeedleY = gaugeOptions.radius - (Math.sin(iSpeedAsAngleRad) * gaugeOptions.radius),
        toX = (options.center.X - gaugeOptions.radius) + endNeedleX,
        toY = (gaugeOptions.center.Y - gaugeOptions.radius) + endNeedleY,
        line = createLine(fromX, fromY, toX, toY, "rgb(255,0,0)",5, 0.9);

    drawLine(options, line);

    // Two circle to draw the dial at the base (give its a nice effect?)
    drawNeedleDial(options, 0.6, "rgb(127, 127, 127)", "rgb(255,255,255)");
    drawNeedleDial(options, 0.2, "rgb(127, 127, 127)", "rgb(127,127,127)");

}

function buildOptionsAsJSON(canvas, iSpeed) {
    /* Setting for the speedometer 
    * Alter these to modify its look and feel
    */

    var centerX = 210,
        centerY = 210,
        radius = 140,
        outerRadius = 200;

    // Create a speedometer object using Javascript object notation
    return {
        ctx: canvas.getContext('2d'),
        speed: iSpeed,
        center: {
            X: centerX,
            Y: centerY
        },
        levelRadius: radius - 10,
        gaugeOptions: {
            center: {
                X: centerX,
                Y: centerY
            },
            radius: radius
        },
        radius: outerRadius
    };
}

function clearCanvas(options) {
    options.ctx.clearRect(0, 0, 800, 600);
    applyDefaultContextSettings(options);
}

function draw() {
    /* Main entry point for drawing the speedometer
    * If canvas is not support alert the user.
    */

    var canvas = document.getElementById('tutorial'),
        options = null;

    // Canvas good?
    if (canvas !== null && canvas.getContext) {
        options = buildOptionsAsJSON(canvas, iCurrentSpeed);

        // Clear canvas
        clearCanvas(options);

        // Draw the metallic styled edge
        drawMetallicArc(options);

        // Draw thw background
        drawBackground(options);

        // Draw tick marks
        drawTicks(options);

        // Draw labels on markers
        drawTextMarkers(options);

        // Draw speeometer colour arc
        drawSpeedometerColourArc(options);

        // Draw the needle and base
        drawNeedle(options);

    } else {
        alert("Canvas not supported by your browser!");
    }

    if (iTargetSpeed == iCurrentSpeed) {
        clearTimeout(job);
        return;
    } else if (iTargetSpeed < iCurrentSpeed) {
        bDecrement = true;
    } else if (iTargetSpeed > iCurrentSpeed) {
        bDecrement = false;
    }

    if (bDecrement) {
        if (iCurrentSpeed - 10 < iTargetSpeed)
            iCurrentSpeed = iCurrentSpeed - 1;
        else
            iCurrentSpeed = iCurrentSpeed - 5;
    } else {

        if (iCurrentSpeed + 10 > iTargetSpeed)
            iCurrentSpeed = iCurrentSpeed + 1;
        else
            iCurrentSpeed = iCurrentSpeed + 5;
    }

    job = setTimeout("draw()", 5);
}

function drawWithInputValue() {

    var txtSpeed = document.getElementById('txtSpeed'); //alert(txtSpeed.value);

    if (txtSpeed !== null) {

        iTargetSpeed = txtSpeed.value;

        // Sanity checks
        if (isNaN(iTargetSpeed)) {
            iTargetSpeed = 0;
        } else if (iTargetSpeed < 0) {
            iTargetSpeed = 0;
        } else if (iTargetSpeed > 80) {
            iTargetSpeed = 80;

        }

        job = setTimeout("draw()", 5);

    }

}

function drawWithexcelValue(val) {

    var txtSpeed = val; //alert(txtSpeed.value);
    if (txtSpeed !== null) {

        iTargetSpeed = txtSpeed;

        // Sanity checks
        if (isNaN(iTargetSpeed)) {
            iTargetSpeed = 0;
        } else if (iTargetSpeed < 0) {
            iTargetSpeed = 0;
        } else if (iTargetSpeed > 80) {
            iTargetSpeed = 80;
        }

        job = setTimeout("draw()", 5);

    }

}

Maybe this will help? http://stackoverflow.com/questions/5083221/drawing-a-half-gauge-speedometer-javascript-canvas-or-java-swing-example-needed/5632389#5632389 — Spudley, Jul 30 '13 at 19:46

markE · Answer 1 · 2013-07-30T21:08:34.383

You can generate multiple speedometers by adding x-offsets (1-5) to your draw functions

enter image description here

I assume your options variable stores t1,t2,t3,t4,t5 along with their speeds:

You didn't provide enough code about your options, so a simplified options might look like this.

(Tweak for your actual situation):

    options=[
    {t:1,speed:50},
    {t:2,speed:90},
    {t:3,speed:10},
    {t:4,speed:25},
    {t:5,speed:36},
    ];

Then in your draw function, you would need to iterate through each “t”:

    function draw(){

        // Clear canvas

        for(varti=0;t<options.length;t++){

            option=options[t];

            // Draw the metallic styled edge
            // Draw thw background
            // Draw tick marks
            // Draw labels on markers
            // Draw speeometer colour arc
            // Draw the needle and base
        }

    }

In your drawMetallicArc (etc) function you would draw a speedometer that is offset from the left based on which “t” you are drawing:

Also assume you want each speedometer’s centers to be spaced 50px apart.

Then you can calculate the center-x of each of the 5 speedometers like this

centerX = t * 50;

To Illustrate, assume each speedometer has a radius of 15 and a y coordinate of 60.

Your drawMetallicArc function would look like this:

    function drawMetallicArc(option){
        var y=60;
        var radius=15;
        var x=option.t*50;

        ctx.beginPath();
        ctx.arc(x,y,radius,0,Math.PI*2,false);
        ctx.closePath();
        ctx.strokeStyle="blue";
        ctx.stroke();
    }

Of course, you would similarly modify each of your other draw functions to use x-offsets.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/93SY5/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");


    options=[
    {t:1,speed:50},
    {t:2,speed:90},
    {t:3,speed:10},
    {t:4,speed:25},
    {t:5,speed:36},
    ];

    draw();

    function draw(){

        // Clear canvas

        for(var i=0;i<options.length;i++){

            option=options[i];

            // Draw the metallic styled edge
            drawMetallicArc(option);

            // Draw thw background

            // Draw tick marks

            // Draw labels on markers
            drawTextMarkers(option);

            // Draw speeometer colour arc

            // Draw the needle and base

        }

    }

    function drawMetallicArc(option){
        var y=60;
        var radius=15;
        var x=option.t*50;

        ctx.beginPath();
        ctx.arc(x,y,radius,0,Math.PI*2,false);
        ctx.closePath();
        ctx.strokeStyle="blue";
        ctx.stroke();
    }

    function drawTextMarkers(option){
        var y=60
        var radius=15
        var top=y-radius-5;
        var x=option.t*50-5;  // -5 for digit spacing
        ctx.fillText(option.speed,x,top);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=100></canvas>
</body>
</html>

[addition: additional look at code]

600+ lines is a lot of code to look at….Anyway:

Right now, you’re reading 1 excel value in readdata() and then calling

drawWithexcelValue(data);

I assume you will change this to read in 5 excel values in readdata() -- t1,t2,t3,t4,t5

var multipleData = [50,90,10,25,36];

drawWithexcelValue(multipleData);

Your drawWithexcelValue clamps the values to the range of 0-80 and then calls draw()

In draw, you need to process each of the values in the multiple value array

for(var t=0;t<multipleData.length;t++){

    // build options for this “t” value
    options = buildOptionsAsJSON(canvas,multipleData[t],t);

    // now call all draw-X functions using current  “options”

}

The buildOptionsAsJSON uses the “t” value to change the centerpoint of the current speedometer:

The key is this center X calculation which moves to the right for each new speedometer:

X = outerRadius * t + 10;    // +10 is just to space the speedometers apart

Here is the full buildOptionsAsJSON():

function buildOptionsAsJSON(canvas, iSpeed, t) {

    var centerX = 0,
        centerY = 210,
        radius = 140,
        outerRadius = 200;

    // Create a speedometer object using Javascript object notation
    return {
        ctx: canvas.getContext('2d'),
        speed: iSpeed,
        center: {
            X: outerRadius * t + 10,  // 10 is horizontal spacing
            Y: centerY
        },
        levelRadius: radius - 10,
        gaugeOptions: {
            center: {
                X: outerRadius * t +10,  // +10 is horizontal spacing
                Y: centerY
            },
            radius: radius
        },
        radius: outerRadius
    };
}

thanks for this thing brother i have udated the code with my full code .and i have done what you said ,but it is not helping me ,may be i am not getting correctly what you are trying to tell me ..so if u can again take a look on my full code and then tell me ..it will be really help full.. — user2502227, Jul 30 '13 at 19:20
when i am using the for loop it is giving me the error that function drawWithexcelValue(val) is undefined..why is that??? — user2502227, Jul 30 '13 at 20:15
See the addition to my answer which should put you on the right track. — markE, Jul 30 '13 at 21:09
Thanx for this much help brother ,but i am unable to decrease the size of the speedometer,it will be gr8 if you can help me var centerX = 210, centerY = 210, radius = 90, outerRadius = 200; by doing this the inner semi circle decreases but not the all circles..help!!! — user2502227, Jul 31 '13 at 17:53
I'm not quite sure what you're asking, but you set your radii in buildOptionsAsJSON. You set the object.levelradius=140-10. You set the object.guageOptions.radius=140. You set the object.radius=200. Then you pass this object to all your drawing functions. So you should be able to change any radii in buildOptionsAsJSON and the changes should cascade through all your drawing functions. A quick look at your draw functions indicates they respect the object radii--except drawBackground, which hardcodes the radii of the semi-transparent circles (170-180). — markE, Jul 31 '13 at 19:23

how to show values in different speedometer

1 Answers1