in a web app how do I create a chart with dynamic data from a vt_table?

You can use {…} macros in many places where you would normally specify a comma separated list of values. This {…} macro can contain a custom procedure that is called to substitute the value returned from it. Typically in the case of charts it should return a comma separated list.


These {…} macros can be also specified as part of page headers, section headers, section footers etc.

Macros are not commands. They are used to substitute expressions into an attribute.

For example.

Let’s say you have a section header caption like this.

Customer is {}

Then as the section header is updated as you navigate between records the caption will display the current customer name.

These {…} macros can be used in the attributes for UI elements so that the value is dynamic and context sensitive to the current data you are viewing.

.rsp page that generates the Gantt chart probably needs to have the following in the
<meta charset=”UTF8“>
If you rtrim() the names and they will be right justified next to the gantt chart.


I’m doing some tests with charts.

If you recall a graph with the command:

       m_data = "1,2,3,3,4,5|1,2,3"
        m_keylabels = "a,b"
        m_labels = "1,2,3,4,5"
        m_url = "lib:/graph_line.rsp?data=" + m_data + "&keylabels=" + m_keylabels + "&labels=" + m_labels + "&title=" + m_title            
        lianja.get("Scout.SectionChart").url = m_url
I get this:
2016-02-11 16_08_52-Lianja App Builder v2.1Beta8 [scout] - UTF-8 - scout - Licensed to Soft up S.png
It is not possible to do so that the second line, the green one, occupies only the first 3 points of the graph, without stretching up to 5?
No, the line chart you refer to gas a max and min value and the graph is rendered based on that.
Maybe you should be using a bar chart or a Gantt chart.

I try with a bar chart.

I noticed that if I send a “null” value, the graph is correct …

but you can not decide on the vertical scale is always 100 …
2016-02-12 08_50_35-Lianja App Builder v2.1Beta8 [scout] - UTF-8 - scout - Licensed to Soft up S.png

I’m having problems to show the progression of the tasks as I’m unable to build an array that passes the correct type of information to the chart, as I need to pass it in the following format: [int,int,int,str]. So, I’m able to build an array that passes this as an string but it doesn’t work. Any idea? This is the code I’m using for the function. I’ve build also an script (yeardays) that convert a date to a number of days, so the user inserts a date but the script passes an int to the array. etd is the initial date, eta is the due date, accomplishment is the percentage of accomplishment and name is the name of the task
select id from tareas where project=p_project into array numtareas
 select etd from tareas where project=p_project into array etds
 select eta from tareas where project=p_project into array etas

 select accomplishment where project=p_project from tareas into array accomplishments
 select name from tareas where project=p_project into array names
 declare tab[alen(numtareas,1),4]
 declare gantt[alen(numtareas,1)]
 for o=1 to alen(tab,1)
 endforreturn implode(',',gantt)
If you need format [int,int,int,str], then I do not see that you put sign “,” in your concat. Try in console this CONCAT expression first


When I simulate with this code:

declare tabx[1,4]
declare gantt[1,1]

… I get this;


Correct CONCAT:


and result is:


The problem now are the Gantt labels.
Gantt is another problem with accents.
I applied Berry’s soulution (I edited graph_gantt.rsp in your app)…:
…and it works, showing your accent letters:
tab[o,4]=padr(names[o],30,’ ‘)
If you rtrim() the names and they will be right justified next to the gantt chart.


The OrgChart section is data bound and when clicking or double clicking a node you can switch pages or relate information in other sections as I have done in this simple example shown below.
There are so many things that you can do with this and as it is a WebViewWidget you can refresh it with different contents when clicking or double clicking to drill down through the hierarchy.

This simple example is all coming from the southwind!employees table. No coding required.

Screen Shot 2014-12-12 at 12.44.19 PM

And here it is running in Chrome against the Lianja Cloud Server.

Screen Shot 2014-12-12 at 1.33.03 PM

Org Chart section with its own attributes, click and dblClick delegates, and color coded nodes based on the data being processed to display it.

Screen Shot 2014-12-13 at 6.00.41 PM

You can develop complete data visualization components and embed these into your WebViews in Lianja. These work across Desktop, Web and Mobile.When embedded into a WebView generated by a Lianja/VFP (.rsp page) or JavaScript (.jssp page) they can be dynamically changed as you navigate through your data in form or grid sections. This provides powerful data visualization functionality for data driven management dashboards with little to no coding required.

Screen Shot 2014-03-15 at 1.52.47 PM

Tip: You can use the built-in Lianja Odata_read(), print_json(), and the json_encode() functions in your .rsp or .jssp pages to generate the JSON for the charts.
More about writing Lianja Server pages can be found here.