Overview

In this lesson, we will learn how to create a “Chart” control 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 before start with the chart control creation.

Let’s go to the SQL Server Management and create a new table using the following syntax:

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 example, we used “First Name”, “Last Name” and “Status” columns.

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.

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

Now that all the tables are generated, let’s move on to Wayfast.

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 on “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

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	B1: Related to buttons at the footer screen. B2: Related to buttons at the top right corner screen. E1: Related to main body screen. F1: Recommended for the top screen and commonly used for search filters T1: Related to header titles at the top left corner screen.
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

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 on “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 plenty of options to represent our data from Database. It will offer a professional way to depict our dashboard view and also an easy way to analyze what’s the most important data to view in our project’s application.

Wayfast

Chart

Analytics