Using Charts in OutSystems Platform 8.0

Back to Forums

Diogo Serra

Discussion

OS Certified

API

Charts

How-to

OutSystems Widgets

Greetings,

In version 8.0, one of the new platform features is an integrated charts package.

Charts come as a bundle of widgets, which provide a graphical way to display data.

They are especially useful for visualizing big sets of data, allowing users to more easily understand and extract information from them. Additionally, charts help remove clutter and make apps look great!

These widgets deliver an API that allows for plotting charts rendered by the Highcharts JavaScript library, and work seamlessly across PC and mobile devices.

So, once you have decided charts are a good addition to your applications, here are some helpful pointers on how to use them:

1. Reference the charts library. Charts are already included in new applications, however you need to reference them on existing ones. Widgets are then available from the Charts eSpace.

2. Choose the chart that best fits your goal. To help you in this endeavor, some good tips are provided at the NextStep’s chart presentation.

3. Create the widget and resize it. Although no enclosing container is required, in which case the chart will fill all of its parent’s width, one is most likely necessary for setting the desired width. To specify a chart’s height, use its Height parameter.

4. Gather data and feed it to the chart. SourceDataPointList is the only mandatory parameter, consisting of a single DataPoint record list. The DataPoint structure represents an element to be plotted, and is included in Charts eSpace.

5. Customize your chart:

StackingType determines how to stack multiple series in the chart, and is applicable to bar, column and area charts;
LegendPosition controls the position and visibility of the data series’ legend;
XAxisFormat and YAxisFormat configure the X and Y axis, respectively;
ChartFormat handles overall chart configurations.

All charts share this same API, from which only pie chart differs by not having axises. On the academy, we have a video detailing the usage of this API.

6. For a richer experience, enable interactivity with your charts. In order to do this, change the Clickable parameter and provide a target action to be executed when users click on data.

7. Fine-tune it. Since the API focuses on the most common options, sometimes you might need that extra setting. In order to do this, AdvancedFormat lets you write Highcharts JavaScript code for customizing the chart. Available configurations are detailed in Highcharts API, which is very complete and has plenty of examples.

Finally, because an example is worth a thousand words, two eSpaces containing several charts used in NextStep’s presentations follow attached.

We hope you find this post useful, and like the new chart widgets as much as we enjoyed developing them!

Sincerely,

Diogo Serra

Charts.zip

28 May 2013

Joop Stringer

Can you give one sample of the "AdvancedFormat" to add additional things.
Is it also possible to add new Chartforms ?

29 Jul 2013

Ricardo Ferreira

Staff

Hi Joop,

The sample posted by Diogo has several examples on how to use the AdvancedFormat.
Advanced format can also be used to change chart forms.

Just check the HRPulse.oml

Thanks!

29 Jul 2013

MVP

how can I invoke this jfiddlehttps://jsfiddle.net/Ea9v2/ the best way?

I like to inject it like the advanced options.
I already created the donut without a problem, now I want some number in the middle :)

18 Feb 2014

Ricardo Ferreira

Staff

Hi,

Highcharts keeps a reference of all rendered charts in an array. Look at Highcharts.charts.
From that array you will just have to find the chart and call the renderer.
https://jsfiddle.net/FhGA4/

Be careful that this array will contain all the charts in the page... so be sure to pick the right one.

Thanks!

18 Feb 2014

1 reply

30 Oct 2014

Show thread

Hide thread

Venkatesh Gude

Ricardo Ferreira wrote:

Can you briefly explain how can I implement a stacked column chart

30 Oct 2014

MVP

awesome thanks,

you put me on the right track now :)
I will grab the index via $('#someWrapperId .OSChart').attr("data-highcharts-chart")
so I know which index I should take.

18 Feb 2014

1 reply

17 Jul 2014

Show thread

Hide thread

João Grazina

Great pointer!

I actually used this to split the series into two different yAxis.

$( document ).ready(function() {
    var chart = $('#" + ourChart.Id + " .OSChart').highcharts();
    chart.addAxis({ // Secondary yAxis
        title: {
            text: ''
        },
        opposite: true
    })
    chart.series[0].update({yAxis: 0, type: 'column'})
    chart.series[1].update({yAxis: 1,type: 'column'})
})

Very useful when you want to mix different types of values onto the same chart. Is there an easier way to do this?

My main issue was the yAxis format which currenlty does not allow setting a yAxis array of options. This invalidates setting the yAxis: 0, yAxis: 1 on the data series.

Kind Regards,
João Grazina

Statler & Waldorf and the amazing flappy tweedles! wrote:

awesome thanks,

you put me on the right track now :)
I will grab the index via $('#someWrapperId .OSChart').attr("data-highcharts-chart")
so I know which index I should take.

17 Jul 2014

Antonio Xeira

And if we want to mix chart type, like a bar chart with a serie in a line chart.
This is used to draw a target value in a bar chart.

03 Mar 2014

MVP

Hi,

when I have multiple charts in 1 screen I get pretty much redundant information and pointles javascript.
for example:

<script type="text/JavaScript">Highcharts.setOptions({

lang: {

decimalPoint: '.',

thousandsSep: ',',

}

});</script>

is in the html for every chart.

Furthermore, Outsystems will provide a default init for the chart, which is fine, but why, if you want to override it, there will be 2 lines of code for every override-attribute, 1 initial, 1 override...

04 Mar 2014

João Grazina

I stand corrected.

Apparently if HighchartsJSON is defined, this component will do this for you, no need to murk around with javascript.

So to define a second axis use the AdvancedFormat_Init action and set it to the AdvancedFormat parameter of the chart widget:

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:dataSeriesFormatList,XAxisJSON:,YAxisJSON:,HighchartsJSON:highChartsJSON)

Define the dataSeriesFormat for each of the series:

dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesName = "First series name"
dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesJSON = "yAxis: 0"

And the second series:

dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesName = "Second series name"
dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesJSON = "yAxis: 1"

Append those two records to the dataSeriesFormatList

Finally, define the two yAxis formats on the highChartsJSON:

highChartsJSON = "yAxis: [{ title: {text: 'First series unit'}, min: 0 }, { title: {text: 'Second series unit'}, opposite: true, min: 0 }]"

Kudos André Vieira.

Kind Regards,
João Grazina

17 Jul 2014

2 replies

Last reply 25 Nov 2014

Show thread

Hide thread

Venkatesh Gude

Grazina wrote:

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:dataSeriesFormatList,XAxisJSON:,YAxisJSON:,HighchartsJSON:highChartsJSON)

Define the dataSeriesFormat for each of the series:

dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesName = "First series name"
dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesJSON = "yAxis: 0"

And the second series:

dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesName = "Second series name"
dataSeriesFormat.AdvancedDataSeriesFormat.DataSeriesJSON = "yAxis: 1"

Append those two records to the dataSeriesFormatList

Finally, define the two yAxis formats on the highChartsJSON:

highChartsJSON = "yAxis: [{ title: {text: 'First series unit'}, min: 0 }, { title: {text: 'Second series unit'}, opposite: true, min: 0 }]"

Kudos André Vieira.

Kind Regards,
João Grazina

Hi Grazina,

This post might be helpful for me implement stacked column chart. Can you please clarify below queries of mine

1. How can I define highchartsJson in Outsystems?
2. Where and how can I define dataseries format?
3. Where and how can I define yAxis formats on the highChartsJSON?

Can you please assist on this so that I can go further. If possible share any exmaple for implementing stacked column chart..

Thanks,
Venkat Gude

31 Oct 2014

João Grazina

Venkatesh Gude wrote:

Grazina wrote:

...clipped...

Hi Venkat,

highchartsJSON is just an ordinary variable you define to hold the JSON you want to input as a parameter of AdvancedFormat_Init, nothing special. The yAxis is just a JSON property defined inside this string.
Same goes for dataSeriesFormat which is a variable of type AdvancedDataSeriesFormat. Actually, since this variable is to be appended to a DataSeriesFormatList, using P9, you can actually do this assignment inline using only the ListAppend to a variable of type AdvancedDataSeriesFormat Record List.

Hope this clears your questions.

Kind Regards,
João Grazina

25 Nov 2014

Pedro Lopes

Hi guys,

Can anyone give me a example how to implement drill down?
I´ve been struggling on how to define the data of the drilldown of each data of the series.

Does the component come with the drilldown javascript?

Here is a example, how do I invoke this
https://jsfiddle.net/uL5f8xek/

thks
Pedro Lopes

27 Aug 2014

Gonçalo Azambujo

Hi,

can somebody try to explains how can we resolve the doubts of Venkat please? Are my doubts too.

Regards

19 Nov 2014

Nuno Rosado

Need more help, please check out this application (Charts_HowTo).

Best Regards,
Nuno Rosado

19 Jan 2015

jenifer colt

Hi, I don’t know the exact solution for it, but In our office, we generally prefer koolchart for javascript charts, HTML 5 charts, Pie charts etc.

11 May 2015

Wout Peters

Hi, I am not a big JavaScript adept, but I am trying to implement the heatmap graph in my own application.
The values used in this example are static (monday, tuesday, wednesday, thursday, friday).These values are declared in JS the folowing way:

SyntaxEditor Code Snippet

yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
        },

For my application, the values come from an aggregate and I read it in a Text local variable.
The value in the text local variable is: "'T1,21', 'T1,12', 'T1,08', 'T1,03', 'T1,25', 'T2,31'".

My problem is to replace the hard coded categories (monday till friday) with the content in the local variable.

15 Jan 2018

Kilian Hekhuis

MVP

Hi Wout,

You replied to a topic that's over 5 years old, the last post being almost 3 years old. I would advise you to not post to such old topics, but instead create a new one and if needed refer to the old one. In that way your post will attract more attention and will have a bigger chance of being answered.

As for your post above, note that what you've shown is not JavaScript (as that's not needed for using the charts) but JSON, which is something different (even though it has "JavaScript" in its name). As for your specific question, I'm not sure why you would want to do that. The categories on the axis are taken from the Label value of the Datapoint, did you fill those properly?

15 Jan 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines