Charts are a graphical representation of data visualization. That data can be represented in several different ways such as lines, areas, bars or even slices in a pie chart for example.
Charts facilitate the analysis of data and are often used to ease the understanding of large amounts of data and also the relationship between parts of the data. They can take a large variety of forms, but can usually be read much quicker than raw data.
They can be created by hand or by computer using an application. In this case we are using the Outsystems platform and everyone knows how to display a chart, right? Just drag and drop the widget on the screen, fulfill a few input parameters and that’s it. Congratulations, now you have a chart with lots of data. Let’s give it a try and see what happens:
Ups, guess we did something wrong. Well, it was not that bad, I mean… I only saw that for a few seconds and then everything looked good, like this:
I only tried to display a simple chart and we already got into some trouble. Ok, what just happened? Before talking about chart customization let’s talk a bit about things we need to take into consideration if we want to successfully have a chart on our page.
Checking if the data is available
If you want to display a chart, first you need to make sure that the data is available. For instance, if you are getting the data from an aggregate you need to first validate if the data is already fetched. You can do it easily by inserting the chart widget inside of an If condition:
Understanding the SourceDataPointList parameter
There is only one mandatory input parameter on the chart widget, that is the SourceDataPointList so let’s discuss it for a bit. The SourceDataPointList is the list of all data points to be plotted on the chart. It’s type is a DataPoint List and each DataPoint is composed of several attributes like the ones we can check on the next image:
Let’s discuss them one by one:
- Label (Text, Mandatory) - The label on the X-axis for the data point. It means that each one of these values is going to appear on the horizontal axis of the chart;
- Value (Decimal, Mandatory) - The value to be plotted. It is the Y value for the corresponding X value, for the corresponding x axis value that is;
- DataSeriesName (Text, Not Mandatory) - Name of the series where the data point belongs. Each point, (X,Y) composition value, belongs to a Data Series, even if you do not fulfill this value, each point has a data series associated. You can use this attribute two create several series of points and that will create several lines if we are talking about a line chart, several areas if we are talking about an area chart and so on. Let’s take a look at the following example:
We can see that there are two different lines on the chart. Each one of those lines represents a data series.
- Tooltip (Text, Not Mandatory) - Custom tooltip for the data point when hovering the mouse. It is the text that will appear once the user hovers the corresponding point;
- Color (Text, Not Mandatory) - Custom color for the data point. Color that is used on the data point and also on the tooltip border. You can pass values like “#0000ff”, “green”, "rgba(255,0,0,0.5)" and so on.
Charts customization
Until now we learnt how to correctly display a chart on the screen. Now we have our chart and you compare it with what the design team created and they look nothing alike. Let’s explore a few options to customize our chart and make it look as close as possible to the one that the design team created and the client approved!
I like to split into 4 categories the available ways that we have to customize our chart:
1 - Set the input parameters that are either a basic data type like text and numeric and those that you simply select an option out of a list. They are, for example:
2 - Create CSS rules. If you want to hide the labels for both X and Y axis you can do something like:
.highcharts-axis-labels {
display: none;
}
If you want to further style through CSS you have to set the styledMode property of the chart to true, but now no presentational attributes are applied to the chart SVG. Instead, the design is applied by CSS only so I do not advise to go this way or you will have to do a lot of CSS to have the chart displayed correctly.
3 - Set the input parameters that are JSON type like:
Now we reached the point where I think it is important to highlight that the Outsystems Platform uses Highcharts. Highcharts is a javascript library for chart creation that was first released in 2009. To create this article the Service Studio version used was 11.53.17 and the Highcharts version 10.1.0. So, if you want to learn more in depth how to take advantage of these JSON input parameters I advise you to explore their API accessible on the link https://api.highcharts.com/highcharts/.
4 - Using javascript that can be appended for example on the HighchartsJSON input parameter:
Charts customization examples
There are several types of charts and a lot of different customization options that we can demonstrate. It is time to show you some of them. We will look at three different types of charts for the sake of this article:
Area Chart
The area chart is based on a line chart, which we will present next. In this type of chart the area between the axis and the lines are emphasized with colors. The default look is this:
Let us now customize the chart in 6 different aspects:
- Title;
- Series Color;
- Series Fill Color in gradient;
- Data Point Marker;
- Tooltip;
- Click event.
5 of them were achieved using the HighchartsJSON input parameter and the last one, the click event, we’ve done it by creating a client action to be the handler of the OnClick Event (do not forget to set the Clickable input parameter as True, otherwise it won’t work). Let us now take a deeper look at the HighchartsJSON value that allowed us to customize those 5 points:
JSON stands for JavaScript Object Notation and it is a lightweight format to store and transport data. In this case our JSON contains 4 properties:
- title, containing the (key,value) pair to define that text that should appear on the title;
- series, containing an array with 2 elements, for each data serie, defining the line and fill color for the corresponding area;
- plotOptions, disabling the marker that would appear on each data point for all the series of the chart;
- tooltip, changing the visual aspect of the tooltip that appears when the user hovers a specific data point.
The final result would look something like this:
Line Chart
Now let’s take a look at the default aspect of a line chart, which is a way of plotting data points on a line:
And now we will customize the chart in 5 different aspects:
- Series Legend;
- X Axis;
- Y Axis;
- Tooltip;
- Mousemove event.
The first one was achieved with the DataSeriesJSON input parameter and we only removed the series legend. The second and third were achieved with the XAxisJSON and YAxisJSON input parameters and they allowed us to remove those axis labels. Considering the tooltip, we have formatted the tooltip to appear at a specific position on the chart instead of positioned in relation to the corresponding data point.
Finally we developed some javascript on the HighchartsJSON to add an event on mouse move that allows us to “split” the chart visually in two portions, the left and right side of the hovered point. I also added some JSON options for visualization improvements. The final result having the hovered the point number 7 is:
Pie Chart
Last but not least in our article: the pie chart. The pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. It’s default appearance is as follows:
We will now customize the chart in 3 different aspects:
- Height;
- Legend Position hidden;
- Show Data Point values.
In this case we achieved all of this without using any JSON type input parameter. We set a value on the Height input parameter, chose a legend position given the available options (in this case, we chose hidden) and used the ChartFormat input parameter to show the data point values and we managed to get something like this:
Conclusion
To summarize we have seen how to add a chart to the screen and which parameters we need to necessarily fulfill so that everything goes well.
Apart from that we also talked about several ways to customize a chart and showed some customization examples done on three different types of chart: the area chart, the line chart and last but not least the pie chart.
There is so much more that we could say or show about charts, their usage and customization, but we tried to keep it simple and straight to the point in this article.
.png){kind=small}
.png){kind=small}
.png)
