Using Charts in OutSystems Platform 8.0

  
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

 

Can you give one sample of the "AdvancedFormat" to add additional things.
Is it also possible to add new Chartforms ?
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!
how can I invoke this jfiddlehttp://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 :)




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.
http://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!

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.
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.
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...

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.
 
 
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


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
http://jsfiddle.net/uL5f8xek/


thks
Pedro Lopes

Ricardo Ferreira wrote:
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.
http://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!
 
 Can you briefly explain how can I implement a stacked column chart
 
Grazina wrote:
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

 
 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
 
Hi,

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

Regards
Venkatesh Gude wrote:
Grazina wrote:
...clipped...

 
 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
 
 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


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

Best Regards,
Nuno Rosado
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.