Overview
In this document, we will learn how to create a “Chart” control on Wayfast and how it’s going to be associated to any data in tables or stored procedures that we can depict every time that the page is being loaded or updated.
How to prepare the data for Chart’s representation in SQL?
First we need to connect to our Database in SQL and establish values that are we going to use to represent the chart, in this case, it’s important to setup the color palette with hexadecimal color code chart.
...
After we have both tables generated and including values, we can create the Stored Procedure needed for setting up the “Chart” control.
...
How to create and setup a “Chart” control?
Turn to Project’s pages dashboard. Select or create a new page where you can introduce the chart to represent the data previously created in SQL.
...
Under “Controls” section, select “Chart” option from dropdown list. Click “New” button
...
A popup is displayed on screen to fill the required fields for the control’s creation. In “General” tab, you can include all the details related to identify the control in Project.
...
At “Data Binding” tab, there are the most important fields to run the chart control with the necessary information from the DB. Let’s take a look over those fields in details:
Data Binding
Field | Description |
|---|---|
SQL Query | You have to include the STored Procedure or Table from DB created exclusively to represent the chart |
Instance | Environment in our project that we are going to display the “Chart” control |
Type of Graph | Dropdown list with all the chart’s type that Wayfast provide us to display in our project. |
Categories | TBD |
Series | TBD |
Once we setup the Stored Procedure with the control, we can establish the “Layout” information to display the chart in the page.
...
Layout
Field | Description |
Place Holder |
|
Width | Width size of the new Chart. |
Height | Height size of the new Chart. |
Parameters | Define which parameters will be sent to the destination page. |
Type | Define the way that the destination page will be opened. |
Position X | X axis represent the horizontal position in which the new window will be located. |
Position Y | Y axis represent the vertical position in which the new window will be located. |
Height | Height size of the new window. |
Width | Width size of the new window. |
...
Then we have “Miscellaneous” tab, which is specifically included on this control to manage the features related to the chart representation. See the details in the following table:
Miscellaneous
Field | Description |
|---|---|
Animation | |
Color Edge | |
Ignore Series | |
Duration of Animation | |
Allow selection points | |
Labels Assets | |
Labels Assistance | |
Formatting | |
Legend of Turns | |
It is prototype? |
Once we have all the information, click “Accept” button and the “Chart” control will be posted in the “Controls” section
...
Go to “Preview” in order to verify if the Charts are properly displayed and connected to the data from the Stored Procedure.
...
In the example, we can identify different chart’s type to display the same data.
Recap
“Chart” control under development is a powerful tool and simple to connect. Wayfast give us a plenty of options to represent our data from DB. Offers a professional way to depict as dashboard and easy to analyze what’s the most important data to view in our project’s application.