medidor circular en javascript

javierconesa23 · #1 (**permalink**) 30/10/2015, 06:08

hola me giustaria saber como implementar este grafico circular:
http://justgage.com/

por ejemplo tengo un select que mediante javascript , selecionado un elemento del select , te da el valor, bueno pues me gustaria que el valor lo representara como un grafico animado .
No tiene que ser precisamente con el ejemplo que he puesto arriba, si sabeis alguno mas simple o mas facil de usar , tambien me vale

Gracias

javierconesa23 · #2 (**permalink**) 30/10/2015, 09:26

hola buenas encontre un medior circular en javascript:

Código Javascript:

Ver original<body>
    <div id="gg1" style="width: 200px; height: 150px;"></div>
    <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage-1.1.0.min.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var gg1 = new JustGage({
            id: "gg1",
            value: 50,
            min: 0,
            max: 100,
            title: "Cupo",
            label: "Toneladas",
            textRenderer: customValue
        });
 
        document.getElementById('gg1_refresh').addEventListener('click', function() {
            gg1.refresh(getRandomInt(0, 100000));
            return false;
        });
 
        function customValue(val) {
            if (val < 50) {
                return 'low';
            } else if (val > 50) {
                return 'high';
            } else if (val === 50) {
                return 'noideal';
            }
        }
    });
    </script>
</body>

me gustaria saber como puedo hacer el valor del medidor representara una respuesta de un select como por ejemplo esta:

Código PHP:

Ver originalif (is_array($incidencias)) 
{   echo '<div class="form-group">';                            
    echo '<label class="col-sm-3 control-label">Contratos</label>';
    echo '<div class="col-sm-5">';  
    echo '<select name="elejir_contratos" class="selectboxit" onchange="mostrarValor(this);">';
    foreach($incidencias as $cust) 
    { 
        
        echo '<option value="'.$cust->Cdad_disponible.'">'.$cust->Num_contrato.'</option>';
        
    }
    echo '<option selected="disabled">Selecciona un Contrato</option>';
    echo '</select>';
    echo '</div>';  
    echo '<input type="text" name="cupo" id="cupo" value="" />';
 
}
?>
<script>
var mostrarValor = function(x){
            document.getElementById('cupo').value=x.value;                           <<-----------------------------------------------------------
            }
</script>
<?
 
die();

Gracias

Panino5001 · #3 (**permalink**) 30/10/2015, 09:45

Temas unidos