Giraffe and two lines graph

jeleb · February 24, 2022, 11:16am

Hi there,

I would like to replace grafana by giraffe.
With the examples, I’m able to create a graph with a line of values, but I don’t know how to add a second line in the same graph.

Any example ?
Thank you
JeLeB

jeleb · February 24, 2022, 4:59pm

What I have done. I’m not using JSX:

class PlotRenderer extends React.Component {
    render() {
        var style = this.props.style;
        var tsSerie = this.props.tsSerie;
        var valueSerie = this.props.valueSerie;
        var tokenName = this.props.tokenName;
        var gridColor = this.props.gridColor || "#d9d9d9";
        var interpolation = this.props.interpolation || "monotoneX";

        var lineLayer = {
            type: "line",
            x: "_time",
            y: tokenName,
            colors: ["green", "red", "yellow"],
            interpolation: interpolation
        };

        var table = Giraffe.newTable(tsSerie.length)
            .addColumn("_time", "dateTime:RFC3339", "time", tsSerie)
            .addColumn(tokenName, "integer", "number", valueSerie)

        var config = {
            table,
            layers: [lineLayer],
            gridColor: gridColor
        };

        var SimplePlot = React.createElement(Giraffe.Plot, {config}, tokenName);
        return React.createElement("div", {style}, SimplePlot);
}

And it’s called by

function renderGraf(component, props) {
    var grafDiv = document.getElementById("graph_giraffe");
    
    ReactDOM.render(
        React.createElement(component, props),
        grafDiv
    );
}

renderGraf(PlotRenderer, props);

It works well with ine graph, but I want to give the user ti be able to add a graph for another valueSerie he selects on the same tsSerie (like in the example StoryBook in line graph tab)

Thank you for your help

Anaisdg · February 24, 2022, 6:18pm

Hello @jeleb,
that’s cool! Just out of curiosity what’s your use case? Can you tell me a little more about what you’re building?
Let me ask around
Thanks

jeleb · February 24, 2022, 9:11pm

Hello @Anaisdg
My purpose is to create a graph with some element selected from a list of events. Events are named and counted in a InfluxDB v2, and the users can select all the events from the list they want to see in the same graph.

TCL735 · February 24, 2022, 11:03pm

Hi @jeleb. It looks like you are trying to say that your data should show multiple lines in a single graph. To do so, your data must include a column that will identify separate lines. In addition, you must use the “fill” property in your lineLayer
So, in your code you must change:

        var lineLayer = {
            type: "line",
            x: "_time",
            y: tokenName,
            fill: ["columnKey"], // REPLACE "columnKey" with the actual name of the column (the first argument to the addColumn function)
            colors: ["green", "red", "yellow"],
            interpolation: interpolation
        };

       
        var table = Giraffe.newTable(tsSerie.length)
            .addColumn("_time", "dateTime:RFC3339", "time", tsSerie)
            .addColumn(tokenName, "integer", "number", valueSerie)
            .addColumn("columnKey", "string", "string", ["line1", "line1",...,"line2", "line2"] // note: not real code, replace with real code with real column

Another example would be the quick start guide in our Giraffe repository, located here: giraffe/README.md at master · influxdata/giraffe · GitHub

Step 7 and 8 would look like this:

const lineLayer = {
  type: "line",
  x: "_time",
  y: "_value",
  fill: ["name"]
};

const table = Giraffe.newTable(6)
  .addColumn('_time', 'dateTime:RFC3339', 'time', [1589838401244, 1589838461244, 1589838521244, 1589838401244, 1589838461244, 1589838521244])
  .addColumn('_value', 'double', 'number', [2.58, 7.11, 4.79, 2.0, 6.5, 3.2])
  .addColumn('name', 'string', 'string', ['line1', 'line1', 'line1', 'line2', 'line2', 'line2']);

TCL735 · February 24, 2022, 11:04pm

Alternatively, another way instead of using “table” you may also use “fluxResponse” and use an annotated CSV string as the value for “fluxResponse”. something like this:

        var csv = `#group,false,false,true,true,false,false,true,true,true,true
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
#default,_result,,,,,,,,,
,result,table,_start,_stop,_time,_value,_field,_measurement,cpu,host
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:30Z,20.679320679130722,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:40Z,11.711711711705151,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:50Z,10.600000000100117,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:00Z,10.38961038953676,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:10Z,18.20000000006985,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:20Z,10.29999999986845,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:30Z,10.11011011018491,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:40Z,12.187812187812478,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:50Z,13.213213213141474,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:59:00Z,12.487512487500869,usage_system,cpu,cpu0,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:30Z,1.8018018018063948,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:40Z,0.7999999999992724,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:50Z,0.40000000000873115,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:00Z,0.39999999999054126,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:10Z,6.393606393612802,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:20Z,0.19999999998617568,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:30Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:40Z,0.49999999999272404,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:50Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:59:00Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer`


        var lineLayer = {
            type: "line",
            x: "_time",
            y: tokenName,
            fill: ["result", "_field", "_measurement", "cpu", "host"],
            colors: ["green", "red", "yellow"],
            interpolation: interpolation
        };

        var config = {
            fluxResponse: csv,
            layers: [lineLayer],
            gridColor: gridColor
        };

Beware of the spacing in the csv variable. it must be exactly as shown. See our documentation on annotated CSV for more information.

You can also adjust the “fill” property with fewer columnKeys in given example to see less or more information when you hover the graph

TCL735 · February 24, 2022, 11:13pm

Alternatively, another way instead of using “table” you may also use “fluxResponse” and use an annotated CSV string as the value for “fluxResponse”. something like this:

        var csv = `#group,false,false,true,true,false,false,true,true,true,true
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double,string,string,string,string
#default,_result,,,,,,,,,
,result,table,_start,_stop,_time,_value,_field,_measurement,cpu,host
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:30Z,20.679320679130722,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:40Z,11.711711711705151,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:50Z,10.600000000100117,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:00Z,10.38961038953676,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:10Z,18.20000000006985,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:20Z,10.29999999986845,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:30Z,10.11011011018491,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:40Z,12.187812187812478,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:50Z,13.213213213141474,usage_system,cpu,cpu0,my_computer
,,0,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:59:00Z,12.487512487500869,usage_system,cpu,cpu0,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:30Z,1.8018018018063948,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:40Z,0.7999999999992724,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:57:50Z,0.40000000000873115,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:00Z,0.39999999999054126,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:10Z,6.393606393612802,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:20Z,0.19999999998617568,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:30Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:40Z,0.49999999999272404,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:58:50Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer
,,1,2022-02-24T21:00:43.684788241Z,2022-02-24T22:00:43.684788241Z,2022-02-24T21:59:00Z,0.30000000000654836,usage_system,cpu,cpu1,my_computer`


        var lineLayer = {
            type: "line",
            x: "_time",
            y: tokenName,
            fill: ["result", "_field", "_measurement", "cpu", "host"],
            colors: ["green", "red", "yellow"],
            interpolation: interpolation
        };

        var config = {
            fluxResponse: csv,
            layers: [lineLayer],
            gridColor: gridColor
        };

Beware of the spacing in the csv variable. it must be exactly as shown. See our documentation on annotated CSV for more information.

You can also adjust the “fill” property with fewer columnKeys in given example to see less or more information when you hover the graph

Anaisdg · February 25, 2022, 1:38am

Thank you so much @TCL735!!!

jeleb · February 25, 2022, 11:00am

Hello,

The first solution you give works fine for me.
For the moment I keep it but I think I’ll try the second one for more complex graphs.

Thank you @Anaisdg and @TCL735 for your help
Jeleb

Topic		Replies	Views
Simple use example of Giraffe, using a ReactJS 18 functional component InfluxDB 2 giraffe	4	572	February 22, 2023
Giraffe library - Line graph fill params InfluxDB 2 giraffe	3	289	April 25, 2023
Correcting a graph plotted with Giraffe Dashboards javascript , giraffe	2	596	February 26, 2022
Giraffe library - min/max domains and configuration of layers	2	441	July 14, 2021
Giraffe library - simultaneous zoom X of two charts on web-page Dashboards giraffe	7	842	April 11, 2023

Giraffe and two lines graph

Related Topics