jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Click in gauge

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Click in gauge Posts
  • August 25, 2013 at 1:54 am Click in gauge #27621

    gledsoneduardo
    Member

    Hi,

    How to click in gauge and redirect to other pag?

    tks

    August 26, 2013 at 7:45 am Click in gauge #27666

    Dimitar
    Participant

    Hello gledsoneduardo,

    Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
        <style type="text/css">
            
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#gaugeContainer').jqxGauge({
                    ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                             { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                             { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                             { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
                    ticksMinor: { interval: 5, size: '5%' },
                    ticksMajor: { interval: 10, size: '9%' },
                    value: 0,
                    colorScheme: 'scheme05',
                    animationDuration: 1200
                });
                $('#gaugeContainer').click(function () {
                    window.location("http://www.jqwidgets.com/");
                });
            });
        </script>
    </head>
    <body style="background: white;">
        <div style="float: left;" id="gaugeContainer">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.