Skip to main content

 

 

 

OutSystems

How to combine a line graph with a bar chart

Question

How do I create a chart that is a combination of line graph and bar chart?

Answer

OutSystems Platform relies on Highcharts to create charts. Craft custom JSON to customize the action AdvancedFormat_Init from Charts:

  • Define the two Y axis in the property HighchartsJSON;

  • Display a data series as a line associated with the second Y axis, using the property DataSeriesFormats.

The example below uses DataPoint_Init to generate data for a ColumnChart. Each point defines:

  • The label in the X axis, for example "Jun-14";

  • The value, for example 180;

  • The data series of the data, for example "Birth Certificate".

image alt text

The example JSON below defines two Y axis:

  • A primary Y axis, untitled;

  • A secondary Y axis, untitled, in the opposite side of the chart, with a different labels formatted as percentages.

yAxis: [

  { // Primary yAxis
      title: { text: '' },
  },
  { // Secondary yAxis
       title: { text: '' },
       labels: { format: '{value} %' },
       opposite: true
  }
]

The example below initializes an AdvandedDataSeriesFormat to customize a data series.

  • Defines the name of the data series as "% Self-service";

  • Displays the data series as a line;

  • Associates the data series with the second Y axis.

The customization must then be packed into a list.

image alt text

The sample action AdvancedFormat_Init sets the advanced customizations:

image alt text

Finally, the ColumnChart refers to the the AdvancedFormat:

image alt text

More Information

An example of a combination line and bar chart in Highcharts, the underlying platform for charts in OutSystems.

The component Line and Pie Graphs enhancements on the OutSystems Forge enhances some platform graphs.

  • Was this article helpful?