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.
For example, we can create a new table:
| Code Block |
|---|
CREATE TABLE |
...
HolaMundo_ColorPallette(
PalletteCode nvarchar(200) NULL,
ColorOrder nvarchar(200) NULL,
ColorCode nvarchar(200) NULL,
ID nvarchar(200) NULL
) |
...
NOTE: This is an example, you can include all the details that is needed for your project.
Then we need to create another table with certain information establishing status information. In this case, we used “First Name”, “Last Name” and “Status” columns.
...
| Code Block |
|---|
CREATE TABLE HolaMundo_Solicitudes(
Name nvarchar(200) NULL,
Last_Name nvarchar(200) NULL,
Status nvarchar(200) NULL
) |
...
After we have both tables generated and including values, we can create the Stored Procedure needed for setting up the “Chart” control.
...
| Code Block |
|---|
Create Procedure [sp_HolaMundo_Chart1]
AS
BEGIN
CREATE TABLE #MainColor(
colorid int identity,
ColorCode varchar(50) )
INSERT INTO #MainColor
SELECT ColorCode FROM HolaMundo_ColorPallette (nolock) WHERE palletteCode='SkypeForBusiness'
CREATE TABLE #Solicitudes(
idr int identity(1,1),
Total int NULL,
Status varchar(20) NULL
)
INSERT #Solicitudes
SELECT count(1) as Total,status
from HolaMundo_Solicitudes group by status
SELECT Total,Status,b.Colorcode
FROM #Solicitudes a with(nolock)
LEFT JOIN #MainColor b with(nolock) ON a.Idr=b.ColorId
END |
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.
...
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? |
...
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.