hours until the end of DMXzone Black Friday! Up to 65% OFF on all extensions with promo code DMXBF17

App Connect Charts with Multiple Data Sets

App Connect Charts with Multiple Data Sets

Learn how to use multiple data sets with App Connect Charts

In this tutorial we will show you how to use multiple data sets with App Connect Charts.
Step by Step

We will use a database query as a source for the chart. You already know how to setup a database query, so we won't show this again. 

Add a new component in the app connect tree. Open the data menu, and select server connect.

Select the server action containing your database query. 

Click where you'd like to insert the chart (1). Add a new component (2). Open display and select chart (3).

Select the chart component in the app connect tree in order to configure its options (1). Setup the appearance options and select a chart type (2).

Select the data source for the chart (1). This is our database query (2-4).

Select the axis labels data (1). In our case this is the date binding (2-4).

Now, let's setup the first data set. 

Enter the label to be displayed when hovering the value in the chart (1). And select a value (2-5). This data set will draw the minimal temperature in the chart.

Now, let's add another data set, for the average temperature.

Add another data set, we select data set 2 (1). And add a label for it (2). Select the values for it (3). We select the average temperature binding from our database query (4-6). You can add more data sets the same way.

Save your page when you are done. Let's preview the results.

You can see the three data sets in the chart. Their colors depend on the selected color theme. You can hide or show different data sets by clicking their names in the legend. That's how easy it is to compare data in a single chart, using multiple data sets.

Extensions Covered

Comments

Be the first to write a comment

You must me logged in to write a comment.