Vikas Chittaragi
Vikas Chittaragi

Reputation: 11

Live data from database to jqchart

I am using jqcharts. I have data from database and the value is getting updated continuously. I want the same thing to be display on my gauge. Pls help me with this code. This is my code to display my gauage. And in needles --> values.v1 is the live data to be updated.

var values = { v1: 0};


$(document).ready(function () {

     var background = {
            type: 'linearGradient',
            x0: 1,
            y0: 1,
            x1: 1,
            y1: 0.5,
            colorStops: [{ offset: 0, color: '#C4C4C4' },
                         { offset:0.3,color:'black'}
                     ]
        };

        var gradient1 = {
            type: 'linearGradient',
            x0: 0,
            y0: 0.5,
            x1: 1,
            y1: 0.5,
            colorStops: [{ offset: 0, color: '#C5F80B' },
                         { offset: 1, color: '#6B8901'}]
        };

        var gradient2 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,

            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#FF3366' },
                         { offset: 1, color: '#B2183E'}]
        };

        var anchorGradient = {
            type: 'radialGradient',
            x0: 0.5,
            y0: 0.8,
            r0: 0,
            x1: 0.5,
            y1: 0.8,
            r1: 1,
            colorStops: [{ offset: 0, color: '#797981' },
                         { offset: 1, color: '#1C1D22'},
                         {offset:0.5, color:'#58575C'}
                        ]
        };

  $('#jqRadialGauge').jqRadialGauge({
            background: anchorGradient,
            border: {
                lineWidth: 3,
                strokeStyle: '#595959',
                padding: 16
             },
            shadows: {
                enabled: true
            },
            anchor: {
                visible: true,
                fillStyle: anchorGradient,
                radius: 0.10
            },
            tooltips: {
                disabled: true,
                highlighting: false
            },
             scales: [
                     {
                         minimum: 0,
                         maximum: 140,
                         startAngle: 140,
                         endAngle: 400,
                         majorTickMarks: {
                             length: 7,
                             lineWidth: 2,
                             interval: 20,
                             offset: 1,
                             strokeStyle: '#B9BDC0'
                         },
                         minorTickMarks: {
                             visible: false,
                             length: 8,
                             lineWidth: 2,
                             interval: 2,
                             offset: 0.84,
                            strokeStyle: 'white'
                         },
                         labels: {
                            visible:true,
                             orientation: 'horizontal',
                             interval: 10,
                             offset: 1.00,
                             strokeStyle:'white'
                         },
                         needles: [
                                    {
                                        value: values.v1,
                                        type: 'triangle',
                                        outerOffset: 1.5,
                                        mediumOffset: 0.7,
                                        width: 7,
                                        fillStyle: '#C01211'
                                    }
                      ]                      
                     }
                    ]
        });
 updateGauge();
    });

This the updateGauge function where live data is fed.

function updateGauge() {
 $(values).animate({

              v1 :readLoop
 },
        {
            duration: 10,
            step: function () {
                var scales = $('#jqRadialGauge').jqLinearGauge('option', 'scales');

                scales[0].needles[0].value = this.v1;

                $('#jqRadialGauge').jqLinearGauge('update');
            },
            complete: function () {
                setTimeout('updateGauge()', 2000);
            }
        });
     }

Value for v1 is given using readLoop variable. That uses following function which fetches value from database:

var readLoop ;
 function read() {

$.get('http://localhost:7777/smist-test/get.php', function(data) {
      console.log(data);
 $('#speed').html(data);

   })
}
readLoop =setInterval(read,1000);

In the below picture you can see needle is not updated according the value displayed below.

Speedometer gauge

This is where my problem lies.

Upvotes: 1

Views: 152

Answers (0)

Related Questions