jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Gauge – Setting values from json

Tagged: , , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  ngchagas 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Gauge – Setting values from json Posts
  • October 14, 2014 at 12:38 am Gauge – Setting values from json #61065

    ngchagas
    Participant

    Hi,
    how to set startValue and endValue range from json source ?
    Regards

    October 14, 2014 at 5:50 am Gauge – Setting values from json #61077

    Dimitar
    Participant

    Hello ngchagas,

    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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <style>
        html, body
        {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            var data = [{ startValue: 0, endValue: 55 }, { startValue: 55, endValue: 110 }, { startValue: 110, endValue: 165 }, { startValue: 165, endValue: 220}];

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'startValue', type: 'int' },
                    { name: 'endValue', type: 'int' }
                ],
                localdata: data,
                async: false
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();

            var records = dataAdapter.records;

            $('#gaugeContainer').jqxGauge({
                ranges: [{ startValue: records[0].startValue, endValue: records[0].endValue, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                         { startValue: records[1].startValue, endValue: records[1].endValue, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                         { startValue: records[2].startValue, endValue: records[2].endValue, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                         { startValue: records[3].startValue, endValue: records[3].endValue, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13}],
                ticksMinor: { interval: 10, size: '5%' },
                ticksMajor: { interval: 20, size: '9%' },
                value: 0,
                width: '40%',
                height: '80%',
                colorScheme: 'scheme05',
                animationDuration: 1200
            });
        });
    </script>
</head>
<body>
    <div id="gaugeContainer">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    October 14, 2014 at 12:30 pm Gauge – Setting values from json #61108

    ngchagas
    Participant

    It’s great, thanks.

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

You must be logged in to reply to this topic.