[SOLVED] How to init GAUGE

  1. HTML

     {{#each items}}<div class="card col-50 no-margin margin-bottom bg-purple-light">
                     <div class="card-header justify-content-center bg-{{this.EngineStatus}} font-bold">
                         {{this.AssetName}}</div>
                     <div
                         class="card-content no-padding text-align-center border-white-top bg-{{this.DeviceStatus}}">
                         <div class="date">Updated: {{this.DateTime}}</div>
                     </div>
                     <div class="card-content card-content-padding text-align-center border-white-top">
                         <div class="row">
                             <div class="col-60">Fuel Level<br /><b>{{this.FuelValue}} Ltrs.</b></div>
                             <div class="col-40">
                                 <div class="gauge demo-gauge-{{@index}}"></div>
                             </div>
                         </div>
                     </div>
                 </div>
                 {{/each}}
    
  2. SCRIPT

return {
data: function () {
return {
items: null,
loading: true
}
},
on: {
pageAfterIn: function (e, page) {
var items = [];
var self = this;
app.request({
url: url,
async: false,
success: function (data) {
var dashboard_data = JSON.parse(data)
dashboard_data.map((newData, index) => {
var newDate = formatDateTime(newData.DateTime)
items.push({
AssetName: newData.AssetName,
DateTime: newDate,
EngineStatus: newData.EngineStatus,
DeviceStatus: newData.DeviceStatus,
FuelPercentage: newData.FuelPercentage,
FuelValue: newData.FuelValue,
})
})
},
error: function (xhr, status) {
self.$setState({
items: null,
loading: false
});
if (status == 502) {
createToast(‘No Internet Connection’);
}
},
});
// init gauge
// update component state with new state
self.$setState({
items: items,
loading: false
});
this.items.map((newData, index) => {
var demoGauge = app.gauge.create({
el: ‘.demo-gauge-’ + index,
// type: ‘circle’,
value: 100,
size: 50,
borderColor: ‘#8f44ad’,
borderBgColor: ‘#f8e7fe’,
bgColor: ‘#f8e7fe’,
borderWidth: 6,
valueFontWeight: 500,
valueText: ‘100%’,
valueFontSize: 14,
valueTextColor: ‘#000000’,
})
})
},
}
}

  1. ISSUE: unabble to generate gauge on ‘col-40’ class= “demo-gauge-{{@index}}”
    please help …

It is better to use auto-init gauges https://framework7.io/docs/gauge.html#gauge-auto-initialization

Otherwise setState is async, you need to use it like

$setState(...).then(()=>{
  // init gauges
})

Thank you…
gauge auto initialization worked. :blush:
cannot understood how to init gauge with => setState async :thinking:

1 Like