Giraffe - Plot data from flux query

Hi, I’m currently working with Giraffe, I was able to plot the example provided on github, but I can’t go any further. I get the data but I don’t know how to visualize it.

How can I generate a Plot from a query? Are there more code samples available?

Here is part of my code

... 

let INFLUX_ENV = {
    url: 'http://192.168.1.100:8086',
    token: 'AwMv2Z0FFfHqgBGhGDkH_LIHJbjcjIwoAhYdzu9Yvf65gbshLQkiAKw9fobgDfhsgkRhWgkn5uRIlAsyIJ_Clw=='
}

let Influx = window['@influxdata/influxdb-client'];
let InfluxDB = Influx.InfluxDB;
let influxDB = new InfluxDB(INFLUX_ENV);
let queryApi = influxDB.getQueryApi('my-org');
let query = cell.properties.queries[0]; // Query from dashboard cell
queryApi.queryRows(query.text, {
    next(row, tableMeta) {
        const o = tableMeta.toObject(row)
        console.log(o) // Data is OK at this point
    },
    error(error) {
        console.log('QUERY FAILED', error)
    },
    complete() {
        console.log('QUERY FINISHED')
        ReactDOM.render(
            React.createElement(
                PlotRenderer, 
                {id, type, data} // Properties
            ),
            document.getElementById(`${cell.id}`)
        );
    }
});

class PlotRenderer extends React.Component {
    render() {
        let id = this.props.id; // Cell id
        let data = this.props.data; // Data
        let type = this.props.type; // Graph type - line, gauge, etc

        // This is where I am stuck. 
        const style = {...};
        const lineLayer = {...};
        const table = ...;
        const config = {...};

        const SimplePlot = React.createElement(Giraffe.Plot, {config}, null);
        return React.createElement('div', {style}, SimplePlot);
    }
}

Kind regards

Hello @Federico_Tudino,
Absolutely there are.
I think you have to use the queryRaw method and the fromFlux function from giraffe.

Please check out:

Please let me know if you need more help.

1 Like

Thank you very much @Anaisdg , working with queryRaw and fromFlux.

... 

queryApi.queryRaw(query)
.then(result => {
    if (result) {
        const data = Giraffe.fromFlux(result);
        
        ...
    }
})
.catch(error => {
    console.error(error)
});
1 Like