Plotly Pie chart using Influxdb

plotly.js
1

Hey guys,

Am trying to create a pie chart in javascript using data from Influxdb but it’s not working.

Am getting data using following code:

app.get(‘/api/Actual_Speed’, (req, res) => {
let csv =
const query =
from(bucket: "RawData") |> range(start: -5m) |> filter(fn: (r) => r["_measurement"] == "PROCESS") |> filter(fn: (r) => r["Connection"] == "172.20.200.103") |> filter(fn: (r) => r["Name"] == "Actual speed") |> filter(fn: (r) => r["_field"] == "Value") |> group(columns: ["_time"]) |> aggregateWindow(every: 5m, fn: mean, createEmpty: false) |> yield(name: "mean")

queryApi.queryRows(query, {
    next(row, tableMeta) {
      o = tableMeta.toObject(row)
      csv.push(o)
      console.log(`${o._time} ${o._measurement}: ${o._field}=${o._value}`)
    },
    error(error) {
      console.error(error)
      res.end()
    },
    complete() {
      res.json(csv)
    },
  })

})

app.get(‘/api/Actual_Torque’, (req, res) => {
let csv =
const query =
from(bucket: "RawData") |> range(start: -5m) |> filter(fn: (r) => r["_measurement"] == "PROCESS") |> filter(fn: (r) => r["Connection"] == "172.20.200.103") |> filter(fn: (r) => r["Name"] == "Actual torque") |> filter(fn: (r) => r["_field"] == "Value") |> group(columns: ["_time"]) |> aggregateWindow(every: 5m, fn: mean, createEmpty: false) |> yield(name: "mean")

queryApi.queryRows(query, {
next(row, tableMeta) {
o = tableMeta.toObject(row)
csv.push(o)
console.log(${o._time} ${o._measurement}: ${o._field}=${o._value})
},
error(error) {
console.error(error)
res.end()
},
complete() {
res.json(csv)
},
})
})

The following function is used to plot data in pie chart.

function pieChart(){
const loadData = () => {
let firstTrace;
let secondTrace;

const plotly = (firstTrace,secondTrace) =>{
    const layout = {
      title: 'Torque/Speed',
      autosize: true,
      showlegend: false,
      // legend: {"orientation":"h", "xanchor":"center", "x":0.5, "y":-0.3, "width": 2}
      //legend: { xanchor: 'center', x: 0.5, orientation: 'h', font: {size: 15}},
      //grid: {"rows": 1, "columns": 2},
      
    };
    var config = {
      responsive: true,
      displayModeBar: false
    }
    return Plotly.newPlot('pie-container', [firstTrace,secondTrace], layout, config);
}

const fetchData = () =>{
firstTrace = fetch('/api/Actual_Torque')
.then(response => response.json())
.then(data => {
    const unpackData = (arr, key) => {
      return arr.map(obj => obj[key])
    }
    const traceData = {
      values: unpackData(data, '_value'),
      type: "pie",
      "hole": .4,
      textinfo: 'none',
    }   
    return traceData      
}).catch((error) => {
    console.error('Error:', error);
});


secondTrace = fetch('/api/Actual_Speed')
.then(response => response.json())
.then(data => {
    const unpackData = (arr, key) => {
      return arr.map(obj => obj[key])
    }
    const traceData = {
      values: unpackData(data, '_value'),
      type: "pie",
      "hole": .4,
      textinfo: 'none',
    }   
    return traceData      
}).catch((error) => {
    console.error('Error:', error);
});

return [firstTrace,secondTrace]
}

[firstTrace,secondTrace] = fetchData()
//promise -> waits for all the data to be returned
Promise.all([firstTrace,secondTrace]).then((values) => {
    plotly(values[0],values[1])
    console.log('vals- ', values)
  });

}

$(window).on(‘load’, loadData);
}

Similar func is working for line/bar chart but not for pie charts.