Charts: documentation, combining data labels and tooltips, colours, and translations

Charts: documentation, combining data labels and tooltips, colours, and translations

  
Preface: These questions were originally sent to my secret OutSystems charts contact (hi Ricardo!), who proposed I also post these questions in the forum, so the answers are there for everyone.

1) I failed to find in-depth documentation on charts on the OutSystems website. Is there any documentation available?

2) I was playing around with pie charts, and it seems that if I set ShowDataPointValues to True when displaying a pie chart, plotOptions.pie.dataLables.enabled is set to true (as I expected), but tooltip.enabled is set to false (which I didn’t). Is there any way to have them both enabled? A typical use for a pie is to have the data labels show the percentages, and the tooltips the actual values, like this:
 
            tooltip: {
            pointFormat:'{series.name}: <b>{point.y}</b>',headerFormat:'<b>{point.key}</b><br>'
            },
            plotOptions: {
                pie: {cursor:'pointer',dataLabels:{enabled:true,color:'#000000',connectorColor:'#000000',format:'<b>{point.name}</b>: {percentage:.2f} %'}}
            }
 
What can I do to get this behaviour?

3) Another question is with regards to the colours. Up till now I’ve been defining them using the “colors” option, but I recall someone saying it’s possible to redefine them using CSS. I can’t find any reference to chart colours in the CSS for the various default themes though (although I only searched for “chart”, so maybe they’re in there), so where to find them?

4) As last question, translations: do I need to add them to the AdvancedFormat for every chart I’m creating, like this (which would be cumbersome):
 
    Highcharts.setOptions({
        lang: {
            months: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
            shortMonths: ['Jan','Feb','Mrt','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            weekdays: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],
            resetZoom: 'Herstel zoom',
            resetZoomTitle: 'Herstel zoom 1:1',
            decimalPoint: ',',
            thousandsSep: '.', numericSymbols: null
        }
    });
 
Or is there some other way to handle this?

Preface: this is the answer to Killian's email (my secret energy contact about solar panels in the Netherlands!) (Hi Killian!)

1) I failed to find in-depth documentation on charts on the OutSystems website. Is there any documentation available?

We created documentation as part of the Service Studio 8.0 online help. In fact I tried to look for it and couldn’t find it :(
The team responsible for keeping the help is on it and they will fix this soon.
 
Meanwhile, you can find help here:
http://www.outsystems.com/help/servicestudio/8.0/APIs/Charts/Overview_of_the_Charts_API.htm
 
You can also find the academy video on how to use Charts:
http://www.outsystems.com/academy/11/1690/606/show-data-using-charts/


2) I was playing around with pie charts, and it seems that if I set ShowDataPointValues to True when displaying a pie chart, plotOptions.pie.dataLables.enabled is set to true (as I expected), but tooltip.enabled is set to false (which I didn’t). Is there any way to have them both enabled? A typical use for a pie is to have the data labels show the percentages, and the tooltips the actual values, like this:
 
            tooltip: {
            pointFormat:'{series.name}: <b>{point.y}</b>',headerFormat:'<b>{point.key}</b><br>'
            },
            plotOptions: {
                pie: {cursor:'pointer',dataLabels:{enabled:true,color:'#000000',connectorColor:'#000000',format:'<b>{point.name}</b>: {percentage:.2f} %'}}
            }
 
What can I do to get this behaviour?


In your scenario if you want the tooltip and data labels to have that specific format, and if you need to show them at the same time, you just need to create an AdvancedFormat and set the HighchartsJSON parameter to:

“tooltip: {
           pointFormat:'{series.name}: <b>{point.y}</b>',headerFormat:'<b>{point.key}</b><br>',
           enabled: true
            },
plotOptions: {
           pie: {cursor:'pointer',dataLabels:{enabled:true,color:'#000000',connectorColor:'#000000',format:'<b>{point.name}</b>: {percentage:.2f} %'}}
            }


You were missing the enabled:true in the tooltip, to override our default behavior.

BTW: Charts turn off the tooltip when the ShowDataPointValues is set to True in PieCharts, because the information we should by default in both is the same, as exemplified below:


3) Another question is with regards to the colours. Up till now I’ve been defining them using the “colors” option, but I recall someone saying it’s possible to redefine them using CSS. I can’t find any reference to chart colours in the CSS for the various default themes though (although I only searched for “chart”, so maybe they’re in there), so where to find them?

If you look in the Greenwich or SanFrancisco theme you will find the Chart color rules (look for Chart_Color1, Chart_Color2, up to Chart_Color10).
 
/* Chart colors */
 
.Chart_Color1 {
    color: #0082c8
}
 
.Chart_Color2 {
    color: #a6ccea
}
 
...
 
.Chart_Color10 {
    color: #ccb8cc
}
 
So, you if you have these styles on your page, you will set each chart series color.


4) As last question, translations: do I need to add them to the AdvancedFormat for every chart I’m creating, like this (which would be cumbersome):
 
    Highcharts.setOptions({
        lang: {
            months: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
            shortMonths: ['Jan','Feb','Mrt','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            weekdays: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],
            resetZoom: 'Herstel zoom',
            resetZoomTitle: 'Herstel zoom 1:1',
            decimalPoint: ',',
            thousandsSep: '.', numericSymbols: null
        }
    });
 
Or is there some other way to handle this?


We missed the NL translations in charts in the first 8.0 release. And this will be fixed in the next 8.0 release.
 
Meanwhile, you can set the options using an inline javascript that is executed only once in every page.
Just place an unescaped expression in the header web block, with the following:
 
“if (Highcharts) {
         Highcharts.setOptions({
          lang: {
            months: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
            shortMonths: ['Jan','Feb','Mrt','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
            weekdays: ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],
            resetZoom: 'Herstel zoom',
            resetZoomTitle: 'Herstel zoom 1:1',
            decimalPoint: ',',
            thousandsSep: '.', numericSymbols: null
          }
        });
}”
 
This way you will set options for all charts in the page, and don’t need to set this as an AdvancedFormat for each chart.

Thanks!