Live update highcharts-gauge from dweet

151 Views Asked by At

I would like to have the gauge chart update live dweet data, which is success.

The problem is that every time a new data is pushed to the array humidityData, a new pointer is added in the gauge chart as shown here: guage chart Though I'd like to have one live-updating-pointer instead.

Could this be done by pop() the prev data?

<script language="JavaScript">

    //Array to store sensor data
    var humidityData = []

    <!--START-->
    $(document).ready(function() {
       //My Dweet thing's name
       var name = 'dweetThingName'

       //Humidity chart
       var setupSecondChart = function() {

       var chart2 = {
                type: 'gauge'
       };

       var title = {...};   

        var pane = {...};

       var yAxis = {...};

            var tooltip = {
                formatter: function () {
                    return '<b>' + "Humidity: "  + Highcharts.numberFormat(this.y, 2)  + "%";
                }
            }; 

            //Series_Humidity
            humiditySeries = [{
                name: 'Humidity %',
                data: humidityData, 
                    tooltip: {
                        valueSuffix: '%'
                    }
            }]

            //Json_Humidity
            var humJson = {}; 
            humJson.chart = chart2; 
            humJson.title = title; 
            humJson.tooltip = tooltip;
            humJson.xAxis = xAxis;
            humJson.yAxis = yAxis; 
            humJson.legend = legend; 
            humJson.exporting = exporting; 
            humJson.series = humiditySeries;
            humJson.plotOptions = plotOptions;

            console.log("Sereies: : " +humJson)
           //Container_Humidity
           $('#containerHumidity').highcharts(humJson);
        }

        var humiditySeries = []  ....

        dweetio.get_all_dweets_for(name, function(err, dweets){
            for(theDweet in dweets.reverse())
            {
                var dweet = dweets[theDweet];
                //Dweet's variables' names
                val2 = dweet.content["Humidity"]
                //Add the vals into created arrayDatas
                humidityData.push(val2)
                console.log("HumidityData: " + humidityData)
            }
           //Call other charts
           setupSecondChart()

        });
1

There are 1 best solutions below

3
Kamil Kulig On BEST ANSWER

When you initialize/update your chart make sure that data array contains only one element. The dial is created for every point in this array (to visualize it on the plot).