Using App Connect Charts

We will use a standard database query as a data source for the charts. It returns temperature report for the past 10 days. You already know how to setup a database query, so we won't show this again.

 First, open the app connect panel.

Now click add app connect.

Then, add a new component. Under data, select server connect.

Add your server action containing the database query.

Then, click on your page where you'd like to insert the chart.

Add a new component (1). Open the display menu (2) and select chart (3).

Click the charts component in app connect tree in order to set it up (1). Set the size of the chart (2). Select whether it should be responsive or not. If responsive is selected, the chart will take the full width of the parent container, keeping the aspect ratio from the size entered above (3).

Then, select the chart type from the dropdown (1). There are 8 different chart types available. For our video, we will use the line chart type (2).

Select one of the available color themes.

Then, select whether to show a legend and where it should be placed (1). We select top (2).

Then, choose whether to show the chart grid or not, enable or disable animations and show or hide points (1). We enable the points option (2). Select a point type (3-4). 

Then, set the point size and line thickness (1). You can also smoothen the lines or make them dashed. We leave these options to their default values (2).

Now, let's setup the data source for the chart. 

Click the dynamic data picker button (1). And select your database query (2-4).

Then, select the database column to take the axis labels from (1). In our case this is the date, the temperature is measured (2-4).

Then enter a label to be displayed when a value is hovered. We will show the maximum temperature (1). And then, select the values for the chart (2). We select the max temperature binding, returned by our database query (3-4).

And we are done. Let's preview the results. 

You can see our chart displaying the max temperature, measured for the past 10 days. Hovering the dots, you can see the labels with their values. That's how easy it is to insert App Connect Charts, on your page.