Tutorial: Container with Charts Applications

In this example we will use 5 applications, 4 Charts and 1 Container to display the charts simultaneously, as in a dashboard.

Here we can see each of the chart applications…





…and here the final application, a Container showing the 4 charts.


Creating applications Graphics

Area chart

1. Create a new application of Chart based on the table city.


2. Open the option “Charts” in the application menu.


3. In “Dimensions” we will select the field “stateid”.


4. In “Metrics” we will select “Record Count”.


5. In “Chart”, we will select the type “Area”.


6. Click on “Run application” to generate the data source and view the application.


Pyramid Chart

  1. Following the steps used to configure the previous application, we should use the following settings for the pyramid chart:
  • New application of Chart based on the table “orders”
  • In the “Charts” menu, we will select the “employeeid” field as the “Dimensions”.
  • The “Metric” will be the “Records Count”.
  • And select the type “Pyramid” in “Chart”
  • Run The application

Gauge chart

  1. We will use the following settings for the Gauge chart:
  • New application of Chart based on the table “customers”
  • In the “Charts” menu, we will select the “cardtype” field as the “Dimensions”.
  • The “Metric” will be the “Records Count”.
  • And select the type “Gauge” in “Chart”
  • Run The application

Gráfico de Pizza

  1. We will use the following settings for the Pizza chart:
  • New application of Chart based on the table “customers”
  • In the “Charts” menu, we will select the “regionid” field as the “Dimensions”.
  • The “Metric” will be the “Records Count”.
  • And select the type “Gauge” in “Pizza”
  • Run The application

Creating the Container application

10. Create a new Container application


11. In the “Settings” menu of the application, click on the button to “Add Column”


12. In each column, add another widget.


13. In each of the widgets we will use a 500px height and we will enable only the “Move” option. Set a title and link an application of chart for each widget. See the image below.


Tutorials in the same category

Analyical Chart

In this example we will see how to create an analytic chart using the Grid application. Creat...

Menu with Chart Applications

This example will use a menu treeview application to display the new charts generated by Scriptcase....

Using the Refined Filter

In this example we will develop a report using the refined filter option, which allows you to filter...

Percentage field

In this example we will see how to use the Percentage field available in the Grid. Configurin...

Comment this post