Using the Options object for echarts

rfernandez

Hi,

I'm trying to use the options object from echarts to customize the chart and dynamically change things in the chart, like titles, lables, units, etc.
Usually, when using the provided tools inside REI3, the dataset is provided by REI3 transparently, so I don't know where it is or how it looks like.
Now, I've written a javascript front-end function to work with the options object, but I don't how to reference the query to fill the echarts data source to provide values for the chart.

Here is my function: (there might be other mistakes so please feel free to let me know if so)

I'll appreciate any guidance towards making this work!!

const option = {
    title: {
      left: "center"
    },
    dataset: {
      source: [
        "filled by app"
      ],
      sourceHeader: false
    },
    legend: {
      padding: 15,
      orient: "vertical",
      left: "left",
      type: "scroll"
    },
    toolbox: {
      orient: "vertical",
      top: "top",
      feature: {
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "funnel",
        sort: "none",
        gap: 2,
        left: "15%",
        bottom: "3%",
        top: "3%",
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1
        },
        label: {
          fontSize: 14,
          fontWeight: "bold",
          show: true,
          position: "inside"
        }
      }
    ]
  };

  app.set_field_chart({F11::Chart}, option);

This is que the query that orginally provides the contents of the chart int:

"dataset": {
    "source": [
      "filled by app"
    ],
    "sourceHeader": false
  }

In the front-end function dialog, the only reference to the data source I have is this (and I don't know how to use is as it does not have a "read value") or similar options as the other elements available to the function.

Thank you very much!!

gabriel

rfernandez but I don't how to reference the query to fill the echarts data source to provide values for the chart.

The short version is: You can´t - when using the function call you do not have access to the field query :)

Long answer: If you just need to change the options echarts object, you can do that without the function call, by just directly editing the object in the field settings - as you can see in the screenthot:

As long as you update the options here, you can work with the data that r3 provides through the field query (ie. the chosen relations, columns, filters, ...).

The option to overwrite the echarts options via function call is only for when you want to provide it completely - including the data. This means that you are responsible for fetching the data some other way. This can be via frontend calls in r3, calls to external services via API, or by calling backend functions that retrieve the desired data.

rfernandez

Ok. I believe I understand.
In order to use the query you defined in REI3 you can only work with the static JSON in the UI, and you cannot mix with fields in the form.
If you want to manipulate the options object of echarts you basically have to code it, generate the dataset as you wish , and I presume in that case if you are using a frontend function of a Form you can access the other objects in the form as usual.
Did I get it right?

The only doubt I have here is ,what do you do with the options object then in order to make the chart shows in the screen? (same as if you were working on it via the UI)

Thank you!!

gabriel

rfernandez In order to use the query you defined in REI3 you can only work with the static JSON in the UI, and you cannot mix with fields in the form.

You can still access other field values as filter conditions in both the chart field´s query filters and sub query filters. You do not need to use the function call when you just need to filter with other field´s values. The only reasons, afaik, why you need the function call, is when you need to use field values for things besides filters, such as styling - or if you need to transform the returned query data in a complex way.

rfernandez If you want to manipulate the options object of echarts you basically have to code it, generate the dataset as you wish , and I presume in that case if you are using a frontend function of a Form you can access the other objects in the form as usual.

When you overwrite the echarts options object, you are free to use anything that you have access to via frontend & backend functions.

rfernandez The only doubt I have here is ,what do you do with the options object then in order to make the chart shows in the screen? (same as if you were working on it via the UI)

You do this: app.set_field_chart({F11::Chart}, option); - with option here being your object that contains styling information and, most importantly, the data that you have prepared.

When you call this function above, the chart field will update with whatever you give it. Be it new data, different series, styling, etc.

When doing this, you can update charts regularly (via timer) or when user inputs changes (with variable inputs and function calls on value change).

rfernandez

Hi Gabriel,

You can still access other field values as filter conditions in both the chart field´s query filters and sub query filters. You do not need to use the function call when you just need to filter with other field´s values. The only reasons, afaik, why you need the function call, is when you need to use field values for things besides filters, such as styling - or if you need to transform the returned query data in a complex way.

I was just thinking of dynamically change the title and axis labels, as I have one chart that applies to many different kinds of indicators, depending on which one you choose from a list, which could vary in their name, units, etc.
And I can use that to set the title and axis labels with the right name and measure units, and that information is already in the data fields of that particular indicator, that was retrieved in the REI3 query of the list..
But probably that falls into the styling category, and so I cannot have something like "The title is " {{form field}} or {{form variable}} inside the JSON.

Thank you!!

gabriel

In this case you need to build your echarts via function. :)

rfernandez

Hi Gabriel,
I understand. No escape from coding a little bit here. 🙂

Would you be so kind as to provide a minimalistic code snippet of how would you structure that function?
I guess that it would go something like:

Retrieve the data from your source
Configure the echart option object, including your dataset and other echart configurations.
Assigning all the previous to the chart element of the UI.

Having a minimal example on how would you code this will be of great help!
Something very simple will do.

Thank you!
Warm regards
Ricardo

gabriel

I don´t have a small example at hand. But here is a full function that we use to prepare multiple charts on a form, after fetching and processing data:

// set defaults
if(app.get_variable({lsw_int_documents.reports.filter_year}) === null)
	app.set_variable({lsw_int_documents.reports.filter_year}, new Date().getFullYear());

if(app.get_variable({lsw_int_documents.reports.filter_document_type}) === null)
	app.set_variable({lsw_int_documents.reports.filter_document_type}, [
		app.get_preset_record_id({lsw_int_documents.document_type.invoice}),
		app.get_preset_record_id({lsw_int_documents.document_type.payroll})
	]);

// prepare working values
const year         = app.get_variable({lsw_int_documents.reports.filter_year});
const docTypeIds   = app.get_variable({lsw_int_documents.reports.filter_document_type});
const showIncoming = app.get_variable({lsw_int_documents.reports.filter_show_incoming});
const showOutgoing = app.get_variable({lsw_int_documents.reports.filter_show_outgoing});

if(String(year).length !== 4)
	return;

let optionsBar = {
	legend:{
		orient:'vertical',
		left:'left',
		type:'scroll'
	},
	series:[],
	toolbox:{
		feature: {
			saveAsImage:{ show:true }
		}
	},
	tooltip: {
		trigger:'item'
	},
	xAxis:{
		data:[],
		type:'category'
	},
	yAxis: {
		position:'left',
		type:'value'
	}
};
let optionsLine = JSON.parse(JSON.stringify(optionsBar));

const parse = function(rows) {
	let docTypeMapData    = {}; // map of docTypes, key = docTypeName, value = 12 values for all months of a year
	let docTypeMapDataCum = {}; // map of docTypes, key = docTypeName, value = 12 values for all months of a year, cumulative
	let docTypes          = [];
	
	// aggregate monthly data
	for(const r of rows) {
		if(!showIncoming && r.incoming)  continue;
		if(!showOutgoing && !r.incoming) continue;
		
		r.docType = `${r.docType} ${r.incoming ? 'IN' : 'OUT'}`;
		
		if(docTypeMapData[r.docType] === undefined) {
			// new document type, fill empty values for all 12 months
			for(let i = 0; i < 12; i++) {
				docTypeMapData[r.docType]    = [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0];
				docTypeMapDataCum[r.docType] = [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0];
			}
		}
		
		const date = new Date(r.docDate * 1000);
		docTypeMapData[r.docType][date.getMonth()] += r.amountNet;
	}
	
	// calculate cumulative values
	for(const docType in docTypeMapData) {
		for(let i = 11; i >= 0; i--) {
			for(let j = i; j >= 0; j--) {
				docTypeMapDataCum[docType][i] += docTypeMapData[docType][j];
			}
		}
	}
	
	// set year+month as x axis data
	for(let i = 0; i < 12; i++) {
		optionsBar.xAxis.data.push(`${year}-${String((i+1)).padStart(2,'0')}`);
		optionsLine.xAxis.data.push(`${year}-${String((i+1)).padStart(2,'0')}`);
	}
	
	// add 1 series per document type
	for(const docType in docTypeMapData) {
		optionsBar.series.push({
			name:docType,
			label:docType,
			type:'bar',
			data:docTypeMapData[docType]
		});
		optionsLine.series.push({
			areaStyle:{},
			name:docType,
			label:docType,
			type:'line',
			data:docTypeMapDataCum[docType],
			stack:'Total'
		});
	}
	
	app.timer_set('chart_set', false, () => {
		// bar chart
		app.set_field_chart({F3::Chart}, optionsBar);
		
		// cumulative line chart
		app.set_field_chart({F5::Chart}, optionsLine);
	}, 100);
};

const data = app.call_backend({lsw_int_documents.get_document_amounts_by_year}, year, docTypeIds).then(
	res => parse(res !== null ? JSON.parse(res) : []),
	console.warn
);

The function is executed on form load. It prepares 2 option objects for 2 chart fields from the same data set.

This is the corresponding backend function that is being called:

$BODY$
DECLARE
BEGIN
	RETURN (
		SELECT JSON_AGG(
			JSON_BUILD_OBJECT(
				'amountNet', (lsw_int_documents.document.amount_total_net),
				'docDate',   d.(lsw_int_documents.document.date_document),
				'docType',   dt.(lsw_int_documents.document_type.name),
				'docTypeId', d.(lsw_int_documents.document.type),
				'incoming',  (
					SELECT EXISTS(
						SELECT (lsw_organizations.relation.id)
						FROM {lsw_organizations}.[relation]
						WHERE (lsw_organizations.relation.is_internal)
						AND   (lsw_organizations.relation.id) IN (
							SELECT (lsw_organizations.organization_relation.relation)
							FROM {lsw_organizations}.[organization_relation]
							WHERE (lsw_organizations.organization_relation.organization) = (
								SELECT (lsw_organizations.location.organization)
								FROM {lsw_organizations}.[location]
								WHERE (lsw_organizations.location.id) = (
									SELECT (lsw_int_documents.customer.company_location)
									FROM {lsw_int_documents}.[customer]
									WHERE (lsw_int_documents.customer.id) = d.(lsw_int_documents.document.recipient)
								)
							)
						)
						LIMIT 1
					)
				)
			)
		)
		FROM {lsw_int_documents}.[document]      AS d
		JOIN {lsw_int_documents}.[document_type] AS dt ON dt.(lsw_int_documents.document_type.id) = d.(lsw_int_documents.document.type)
		WHERE EXTRACT(YEAR FROM TO_TIMESTAMP((lsw_int_documents.document.date_document))) = _year
		AND (lsw_int_documents.document.amount_total_net) IS NOT NULL
		AND d.(lsw_int_documents.document.type) = ANY(_document_type_ids)
		AND d.(lsw_int_documents.document.cancelled) = FALSE
	);
END;
$BODY$

Ultimately, as long as you can fetch the data and process it in such a way that fulfills the echarts options definition, you can do whatever you want.

rfernandez

Thank you very much!!
I will study it and hopefully I will understand enough to be able to build my own. . 🙂

rfernandez

Hi,
I'm back

I'm calling this backend function that work perfectly in the backend. As you see it returns 2 results in the form of JSON objects.

I guess this is fine, because when i change the Returns property in the UI to TEXT it returns
[{"nombre" : "Meta Rollo", "fecha_definicion" : 1736294400, "fecha" : 1753401600, "valor" : "600", "id_indicador" : 19}, {"nombre" : "Rollos Metta", "fecha_definicion" : null, "fecha" : 1752624000, "valor" : "158", "id_indicador" : 19}]
Which are the correct values for the parameter passed.

Now, when I call it from the frontend function, no matter what type of return i set (JSON or TEXT), and no matter how do I call it, it returns an error:

**Uncaught (in promise) json: cannot unmarshal object into Go struct field .id of type uuid.UUID**

From the frontend I tried:

let indicador = 19;
let result = [];

const data = app.call_backend({ 'desarrollo_sostenible.get_meta_by_indicador': indicador })
  .then(
    res => {
      result = parse(res !== null ? JSON.parse(res) : []);
      return result;
    },
    err => {
      console.warn("Error from backendo:", err);
    }
  );

also (for the TEXT version)

let indicador = 19;
app.call_backend({ 'desarrollo_sostenible.get_meta_by_indicador_text': indicador })
  .then(res => {
    console.log("Backend result:", res);
  })
  .catch(err => {
    console.error("Error calling backend:", err);
  });

Even this at the backend, just to know exactly what I was returning:

$BODY$
DECLARE
  var TEXT := 'Just return text';
BEGIN
  RETURN var;
END;
$BODY$

But I can't get passed this error.
I don't use any uuid field, so I guess this is probably some internal identifier.

I'll appreciate your help to understand whats happening and how to solve it.

Thank you very much!
Warm regards!

gabriel

Let´s start with your frontend function, because this line here cannot work as far as I know:
app.call_backend({ 'desarrollo_sostenible.get_meta_by_indicador_text': indicador })

The thing inside the curly brackets {} is a placeholder for the application + backend function name. The thing is that neither application nor backend function names can include characters like ' or :.

This is how a valid placeholder could look like: {desarrollo_sostenible.get_meta_by_indicador_text}
If you want to add arguments, it would looke like this:

app.call_backend({desarrollo_sostenible.get_meta_by_indicador_text}, indicador)

To test whether this is the problem, try the "Preview" option in the frontend function editor. If the placeholder works, it gets resolved like so:

Placeholder: app.call_backend({lsw_tasks.set_task_reset}, app.get_record_id(0), true);
Resolved: app.call_backend('8b173591-4e32-4a36-b0b7-18210dc112e5', app.get_record_id(0), true);

Without a valid placeholder, it does not matter how your backend function looks, because the frontend cannot call it.

rfernandez

Hi,
I know (about the quotation marks), but I was getting an error, and I "solved" it with the '', however now I see that it was the wrong solution.
Now that I know the use of the Preview (pretty cool function), I was able to find that the problem was a misplacement of the curly braces.
Now it Previews fine.

The other thing I found out was that I was returning a JSON object and got an error because this:

.then(res => {
    const parsed = res !== null ? JSON.parse(res) : [];

was expecting a JSON string not an object.

Now I changed the return type of the backend function to TEXT and I get the list of fields properly.

The only doubt left at this point is the following: my goal here is to query the data to later on build an options echart object to assign to a Chart REI3 object.
For that purpose is there any constraint or recommendation about getting the data as a a JSON object or a JSON string (TEXT)?

Thank you!!!!

P.S. Code is ... well ... not really my thing. So, know for sure that your help and tips on these matters are really appreciated.
And although I will keep trying to avoid coding as much as I can 🙂, I'm happy because I've been slowly getting to explore many of the REI3 features and capabilities, and I can see the possibilities that open up with a bit of code.
And on the bright side this is getting me closer to building a solution in which some people could be interested, and my hope is that this will lead them to purchasing some licences, and that, plus the Spanish translation of the REI3 UI,I completed a while ago, will be my small contribution to support your great work!!

gabriel

rfernandez For that purpose is there any constraint or recommendation about getting the data as a a JSON object or a JSON string (TEXT)?

It does not matter how you retrieve data. In the end you need a JS object that contains the correct properties that echarts expects - how you get there is up to you. If you get JSON text and parse it to be an object, you have an object.

rfernandez I'm happy because I've been slowly getting to explore many of the REI3 features and capabilities, and I can see the possibilities that open up with a bit of code.

That is always the trick - there are r3 apps that have zero code and fulfill their requirements. But in most cases, there always just another requirement that cannot be fulfilled otherwise. Trying to solve everything without coding is a nice ideal, but will never work in my opinion, as there is unlimited complexity - and trying to build a tool that tries to support everything will not help anyone.

rfernandez

Well, i managed to build a perfectly functional option object!
However I can't find a way to execute on form load
I defined a button that calls the same function and it updates the chart element like a charm, but when called from Form Function, after form loaded, it executes the function apparently succesfully, as it logs the same data, but it does not update the chart element.

Any clues of why this could be happening?
Thank you!

gabriel

rfernandez Well, i managed to build a perfectly functional option object!

Good job - not an easy task for a JavaScript beginner :)

rfernandez Function, after form loaded, it executes the function apparently succesfully, as it logs the same data, but it does not update the chart element.

We had a bug like this in a previous version, where chart field, if set immediately after form load, would not load correctly. Are you running the latest version? (r3.11.1)

rfernandez

Hi!
Thank you!! It wasn't easy indeed 🙂. But the effort had it's reward.
I'm still on 10.6.
I'll try upgrading to 11.1 and keep you posted it that solves the issue.

Thank you!

gabriel

According to the change log, the issue was addressed in REI3.10.7.

rfernandez

Hi,

I'm currently in 11.2.6000 and the issue of not being able to load a chart from a frontend function when the form loads, persists.
I call the function from the after form loaded event of the form and the chart is overwritten by the definition in the form.
I tried calling the function from another function with app.timer_set, set to a high value (and call the latter from the after load event of the form) and it doesn't work either.

The function that creates the echart options object is fine, because I defined a button in the Form calling the same function and when I press it ,it displays the chart in a proper way.

I'll appreciate if you can check the status of this.

Thank you!

gabriel

rfernandez I tried calling the function from another function with app.timer_set, set to a high value (and call the latter from the after load event of the form) and it doesn't work either.

It this does not work after a delay, this is a different issue to before. The original/fixed issue occured if a chart object was given as input to a chart field immediately after form load - if a single millisecond delay was used, it worked just fine even before the fix.

To troubleshoot, please print the resulting object to console (via console.log()) to see if it´s a bug or if the chart object is not generated correctly when started from a form load event.

rfernandez

Hi,
Nice to hear from you!

This is the console.log of the object I pass to the chart field, right after the form load.

{

{
    "backgroundColor": "#f7f7f7",
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "cross"
        }
    },
    "legend": {
        "left": "center",
        "top": "top",
        "data": [
            "Coníferas",
            "Eucaliptus",
            "Pulpa"
        ]
    },
    "xAxis": {
        "type": "time",
        "boundaryGap": false
    },
    "yAxis": {
        "type": "value"
    },
    "toolbox": {
        "right": 20,
        "feature": {
            "saveAsImage": {
                "show": true
            }
        }
    },
    "series": [
        {
            "name": "Coníferas",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-09-17",
                    170
                ],
                [
                    "2025-05-15",
                    120
                ],
                [
                    "2025-01-08",
                    100
                ]
            ]
        },
        {
            "name": "Eucaliptus",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-08-15",
                    250
                ],
                [
                    "2025-05-06",
                    300
                ],
                [
                    "2025-02-05",
                    280
                ]
            ]
        },
        {
            "name": "Pulpa",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-10-29",
                    200
                ],
                [
                    "2025-07-24",
                    130
                ],
                [
                    "2025-03-04",
                    150
                ]
            ]
        }
    ]
}

And this is the same object after pressing the button that calls the same function that generates de chart options object:

{
    "backgroundColor": "#f7f7f7",
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "cross"
        }
    },
    "legend": {
        "left": "center",
        "top": "top",
        "data": [
            "Coníferas",
            "Eucaliptus",
            "Pulpa"
        ]
    },
    "xAxis": {
        "type": "time",
        "boundaryGap": false
    },
    "yAxis": {
        "type": "value"
    },
    "toolbox": {
        "right": 20,
        "feature": {
            "saveAsImage": {
                "show": true
            }
        }
    },
    "series": [
        {
            "name": "Coníferas",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-09-17",
                    170
                ],
                [
                    "2025-05-15",
                    120
                ],
                [
                    "2025-01-08",
                    100
                ]
            ]
        },
        {
            "name": "Eucaliptus",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-08-15",
                    250
                ],
                [
                    "2025-05-06",
                    300
                ],
                [
                    "2025-02-05",
                    280
                ]
            ]
        },
        {
            "name": "Pulpa",
            "type": "line",
            "showSymbol": true,
            "smooth": false,
            "data": [
                [
                    "2025-10-29",
                    200
                ],
                [
                    "2025-07-24",
                    130
                ],
                [
                    "2025-03-04",
                    150
                ]
            ]
        }
    ]
}

It seems they are both fine (as far as I can see).
The first one just doesn't display anything in the Form (In fact it displays well for less than a second, and it is immediately overriden by the object defined in the UI that has no values, hence it displays nothing)

This is the chart definition:

And this is the contents tab: