Skip to Content (Press Enter)
2019-07-03 05-40-23
Johannes Schneider
442Views
7Comments
Solved
Area-chart and Line-chart in one plot
Question
Charts

I'm working on a dashboard that shows mulitple graphs. For each graph I want to show an Area-chart and Line-chart in the same plot. The DataPointList I use contains two different series names.

Unfortunately I could find any documentation that explained me how to do this. 

Can someone please help me on getting started with combining an area-chart and a line-chart in one plot?

thanks in advance!

0
0
09 Sep 2019
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Johannes,


see attached oml.  

In preparation, I set the options for each series with AdvancedFormat_Init.


Make sure to link the AdvancedFormat you created to the chart.  I started with an AreaChart, but probably not that important, haven't tried with other widgets.


Good Luck,

Dorine


See solution in context
TwoChartsInOne.oml
2
0
09 Sep 2019
Copy Link
2019-07-03 05-40-23
Johannes Schneider

Dorine Boudry wrote:

Hi Johannes,


see attached oml.  

In preparation, I set the options for each series with AdvancedFormat_Init.


Make sure to link the AdvancedFormat you created to the chart.  I started with an AreaChart, but probably not that important, haven't tried with other widgets.


Good Luck,

Dorine


Thank you very much for your reply and the effort to explain it so well Dorine. This helps me a lot in order to setup my graphs.. 

Thanks,

Johannes


0
0
10 Sep 2019
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Johannes,

The OutSystems Platform uses a wrapper around (an older version of) the Highcharts library. So I'd advise you to check the Highcharts examples and see whether it's possible what you want.

EDIT: See also here.

1
0
09 Sep 2019
Copy Link
2019-07-03 05-40-23
Johannes Schneider

Kilian Hekhuis wrote:

Hi Johannes,

The OutSystems Platform uses a wrapper around (an older version of) the Highcharts library. So I'd advise you to check the Highcharts examples and see whether it's possible what you want.

EDIT: See also here.

Hi Kilian,

Thank you for your response. I used one of the example from the link you sent,  (JSON below inserted at HighchartsJSON)

SyntaxEditor Code Snippet

"chart: { 
    type: 'areaspline', 
},
plotOptions: {
    areaspline: {
        fillOpacity: 0.5
    }
},"

the outsystems AreaChart has not been changed, and the graphs are not transparent. 

Do you know what i'm doing wrong?

Thanks,

Johannes

0
0
09 Sep 2019
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

I don't, but check the browser's console for possible errors from Highcharts, and check the source (not the DOM) to see what JSON is actually passed to Highcharts. Also check, in the Highcharts documentation, whether the features you want are supported for the version OutSystems uses.

1
0
09 Sep 2019
Copy Link
2019-07-03 05-40-23
Johannes Schneider

Kilian Hekhuis wrote:

I don't, but check the browser's console for possible errors from Highcharts, and check the source (not the DOM) to see what JSON is actually passed to Highcharts. Also check, in the Highcharts documentation, whether the features you want are supported for the version OutSystems uses.

Hi Killian,

Thanks again for your reply. The struggle I was faceing was more about how to apply the Highchart JSON in Outsystems. Dorine gave me an example that helps me to understand how to implement Highcharts in Outsystems, which is the solution of my issue.

Your recommendations are excellent for the customization I have to do. So thanks for that.


1
0
10 Sep 2019
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Johannes,


see attached oml.  

In preparation, I set the options for each series with AdvancedFormat_Init.


Make sure to link the AdvancedFormat you created to the chart.  I started with an AreaChart, but probably not that important, haven't tried with other widgets.


Good Luck,

Dorine


TwoChartsInOne.oml
2
0
09 Sep 2019
Copy Link
2019-07-03 05-40-23
Johannes Schneider

Dorine Boudry wrote:

Hi Johannes,


see attached oml.  

In preparation, I set the options for each series with AdvancedFormat_Init.


Make sure to link the AdvancedFormat you created to the chart.  I started with an AreaChart, but probably not that important, haven't tried with other widgets.


Good Luck,

Dorine


Thank you very much for your reply and the effort to explain it so well Dorine. This helps me a lot in order to setup my graphs.. 

Thanks,

Johannes


0
0
10 Sep 2019
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

You're welcome :).

And thanks Dorine for the example. I didn't have time for it myself, really great you did.

0
0
10 Sep 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.