Charts are great visual aids. They're crucial to digesting data and information quickly. Prior to Liferay Portal 7.1, we didn't have a way to include charts in our apps. No more! Now you can use charts out-of-the-box, thanks to the Chart taglib. Whether it's bar charts, line charts, pie charts, scatter charts, spline charts, or even donut charts, the Chart taglib has you covered. I like a good old fashioned pie myself: Apple, Blueberry, Pumpkin, you name it. They're delicious, and so are these charts.

This blog post gives an overview of how charts work in Liferay and links to our official documentation, so you can dive deeper and go chart crazy!

How Does it work?

Using the Chart taglib is pretty straight forward: You provide the data, and then configure the chart to digest the data in the JSP. Data can be written in a Java class, a JSON file, an array of numbers, etc. 

A Few Good Examples

Alright, so you have an idea of how charts work in Liferay, but what about an actual example? No problem. Let's start with the oh so delicious pie chart.

Pie Chart Example

Pie charts display percentage-based slices that represent data. This example sets up some sample data via a Java class, and then feeds that data into the Pie chart tag's config attribute.

Java Sample Data:

public class ChartDisplayContext {

  public pieChartConfig getPieChartConfig() {

    PieChartConfig _pieChartConfig = new PieChartConfig();

    _pieChartConfig.addColumns(
    new SingleValueColumn("data1", 30),
    new SingleValueColumn("data2", 70)
    );

    return _pieChartConfig;
  }

}

JSP:

<chart:pie config="<%= chartDisplayContext.getPieChartConfig() %>" id="pie" />

The resulting Pie chart:

As, you can see, configuring the chart is fairly easy. Now, let's take a look at a combination chart.

Combination Chart Example

Combination charts let you visualize multiple types of data in one chart. Simply specify the representation type of each data set. The example below also makes use of grouping. Data 1 and Data 2 are grouped together within the same bar.

Java sample data:

public class ChartDisplayContext {

    private CombinationChartConfig getCombinationChartConfig() {

      CombinationChartConfig _combinationChartConfig = new CombinationChartConfig();

      _combinationChartConfig.addColumns(
        new TypedMultiValueColumn(
          "data1", Type.BAR, 30, 20, 50, 40, 60, 50),
        new TypedMultiValueColumn(
          "data2", Type.BAR, 200, 130, 90, 240, 130, 220),
        new TypedMultiValueColumn(
          "data3", Type.SPLINE, 300, 200, 160, 400, 250, 250),
        new TypedMultiValueColumn(
          "data4", Type.LINE, 200, 130, 90, 240, 130, 220),
        new TypedMultiValueColumn(
          "data5", Type.BAR, 130, 120, 150, 140, 160, 150),
        new TypedMultiValueColumn(
          "data6", Type.AREA, 90, 70, 20, 50, 60, 120));

      _combinationChartConfig.addGroup("data1", "data2");

      return _combinationChartConfig;
    }
}

JSP:

<chart:combination config="<%= chartDisplayContext.getCombinationChartConfig() %>" id="combination" />

The resulting combination chart:

so far, we've looked at static charts. Let's see how we can update charts to reflect real time data.

Real Time Data Example

Charts can reflect static or real time data, such as that fed in from a JSON file that changes periodically. This is made possible via each chart's optional polling interval property. It specifies the time in milliseconds for the chart's data to refresh.  To set the interval polling property, use the setPollingInterval() method.

Java sample data:

public class MyBarChartDisplayContext {

    public BarChartConfig getBarChartConfig() {

      BarChartConfig _barChartConfig = new BarChartConfig();

      _barChartConfig.addColumns(
        new MultiValueColumn("data1", 100, 20, 30),
        new MultiValueColumn("data2", 20, 70, 100));
                
       _barChartConfig.setPollingInterval(2000);

       return _barChartConfig;
    }
}

The real time data is simulated in the JSP via a promise that resolves when the chart component is loaded:

<chart:bar 
    componentId="polling-interval-bar-chart"
    config="<%= myBarChartDisplayContext.getBarChartConfig() %>" 
    id="polling-interval-bar-chart" 
/>
<aui:script>
    Liferay.componentReady('polling-interval-bar-chart').then(
       function(chart) {
         chart.data = function() {
          return Promise.resolve(
              [
                 {
                   data: 
              [Math.random() * 100, Math.random() * 100, Math.random() * 100],
                   id: 'data1'
                 },
                 {
                   data: 
              [Math.random() * 100, Math.random() * 100, Math.random() * 100],
                   id: 'data2'
                 }
              ]
          );
         };
       }
    );
</aui:script>

The resulting real time bar chart (looped for effect):

Geomap Chart Example

A Geomap Chart lets you visualize data based on geography, given a specified color range–a lighter color representing a lower rank and a darker a higher rank usually. This example ranks the geography based on the location’s name_len value (specified in the geomap’s JSON file). The geomap is based on the length of each location’s name, as specified with the line geomapColor.setValue("name_len");. The setValue() method defines which JSON property is applied to the geomap. The JSON filepath is specified with the setDataHREF() method. The example below uses custom colors.

Java sample data:

public class ChartDisplayContext {

    public GeomapConfig getGeomapConfig() {

     GeomapConfig _geomapConfig = new GeomapConfig();

     GeomapColor geomapColor = new GeomapColor();
     GeomapColorRange geomapColorRange = new GeomapColorRange();

     geomapColorRange.setMax("#b2150a");
     geomapColorRange.setMin("#ee3e32");

     geomapColor.setGeomapColorRange(geomapColorRange);

     geomapColor.setSelected("#a9615c");
     geomapColor.setValue("name_len");

     _geomapConfig.setColor(geomapColor);

     String href = "https://mydomain.com/myservice/geomap.geo.json";

     _geomapConfig.setDataHREF(href);

     return _geomapConfig;
    }
}

The JSP not only points to the data, but also includes styling for the geomap SVG in this case:

<style type="text/css">
    .geomap {
       margin: 10px 0 10px 0;
    }
    .geomap svg {
       width: 100%;
       height: 500px !important;
    }
</style>

<chart:geomap
    config="<%= chartDisplayContext.getGeomapConfig() %>"
    id="geomap-custom-colors"
/>

Resulting geomap:

No longer does that burning question have to keep you up at night: 
Where in the World is Carmen Sandiego? 

Thanks to Liferay's Chart's, now we can use real time data to track her whereabouts on our Geomap:

This blog post  gave a brief overview of how to use charts in Liferay, using simplified code examples. Check out our official documentation on dev.liferay.com for complete examples and information. Thanks for reading!