CODEWITHSUNDEEP
javascriptjqueryjson
Julio Cesar Boaroli
Julio Cesar Boaroli

Reputation: 181

JQuery Gauge, how to set values and colors through json?

In an Gauge Graph, using jquery plugins.
In this moment, I am setting fixed values, but I need to set the values and colors through json archive. How do I make it?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1024, maximum-scale=1">
<link href="../jquery-gauge.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="gauge1 demo1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">      </script>
<script type="text/javascript" src="../jquery-gauge.min.js"></script>
<script>

    $('.gauge1').gauge({
        values: {
            0 : '0',
            25: '25',
            50: '50',
            75: '75',
            100: '100'
        },
        colors: {
            0 : 'green',
            30: 'orange',
            40: 'red'
        },
        angles: [
            180,
            360
        ],
        lineWidth: 10,
        arrowWidth: 5,
        arrowColor: 'black',
        inset:false,

        value: 50
    });       
</script>
</body>
</html>

Upvotes: 1

Views: 1063

Answers (1)

pistou
pistou

Reputation: 2867

You have to load the content of your JSON file, using an Ajax call.

Since you already have jQuery, you can simply do:

$.getJSON( "path/to/file.json", function( options ) {
    $(".gauge1").gauge(options);
});

Your file.json should have the following content (or something similar) in order to not create errors:

{
    "values": {
        "0": '0',
        "25": '25',
        "50": '50',
        "75": '75',
        "100": '100'
    },
    "colors": {
        "0": 'green',
        "30": 'orange',
        "40": 'red'
    },
    "angles": [
        180,
        360
    ],
    "lineWidth": 10,
    "arrowWidth": 5,
    "arrowColor": 'black',
    "inset":false,
    "value": 50
}

Edit (for your comment): options is the content of your file.json. You may have only values and colors in it, and have other parameters fixed like so:

file.json

{
    "values": {
        "0": '0',
        "25": '25',
        "50": '50',
        "75": '75',
        "100": '100'
    },
    "colors": {
        "0": 'green',
        "30": 'orange',
        "40": 'red'
    }
}

And in your script:

$.getJSON( "path/to/file.json", function( options ) {
    $(".gauge1").gauge({
        values: options.values, // uses values from your file.json
        colors: options.colors, // uses colors from your file.json
// uses fixed parameters
        angles: [
            180,
            360
        ],
        lineWidth: 10,
        arrowWidth: 5,
        arrowColor: 'black',
        inset:false,
        value: 50
    });
});

Upvotes: 1

Related Questions