In this tutorial we will be doing an example dashboard we will use the sales table.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_1-3-1024x491.jpg)
Creating a dashboard
In order for the dashboard to contain these applications, they must first be created as follows:
1 – Application of Bar Graph showing sales by region.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/graph1.png)
1.1 – Create an application of the Graphic type
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_2-4-1024x350.jpg)
1.2 – Select the following dimensions and metrics:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/setting1-1024x426.png)
1.3 – In “Chart Type” select “2D Bar”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/chart-type-1024x140.png)
1.4 – Generate the source of the application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/generate-3-1024x68.png)
2 – Application of an analytical graph showing the sales made by an employee, in comparison with all sales.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/graph2-1024x482.png)
2.1 – Create a new Graph application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_2-4-1024x350.jpg)
2.2 – Use the SQL below.
SELECT
orderid,
orderdate,
'All Employees' AS groupby,
priceorder
FROM
orders
UNION
SELECT
orderid,
orderdate,
'[emp_label]' AS groupby,
priceorder
FROM
orders
WHERE
employeeid = [emp]
2.3 – Select the following dimensions and metrics:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/setting2-1024x263.png)
2.4 – In “Type of Graph” select “2D Bar”, and below, check the option “Multi-series”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/chart-type-1024x140.png)
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/type2.png)
2.5 – Generate the source of the application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/generate-4-1024x68.png)
3 – Search displaying Order data.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/search.png)
3.1 – Create a new Grid application based on the “orders” table.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_5-3-1024x345.jpg)
3.2 – In Grid modules, we use only the “Grid” module, with the configurations below:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/initial-1024x302.png)
3.3 – Next, we create a link to the chart created in step 2.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/applink.png)
- Field link in “employeeid”:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/link1.png)
- Parameters:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/paramets.png)
3.4 – Manage the source of the application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/generate-5-1024x68.png)
4 – Finally, we are going to create the Dashboard application and join the previously created applications.
4.1 – Create a new Dashboard application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_12-1-1024x344.jpg)
4.2 – Add 2 more connection widgets and select the applications that we need to show inside the panel.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/addwidgest-1024x210.png)
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/w1-1-1024x416.png)
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/w2-1-1024x530.png)
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/10/w3-1-1024x410.png)
10 – Finally we save the changes and run the application.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2019/10/Screenshot_14-3-1024x73.jpg)
Comment this post