# Quick Start
Develop powerful and lightweight web applications using ASP.NET MVC FinancialChart control. Learn more about using the FinancialChart control in MVC documentation.
## Content
The quick start guides you through the steps of adding a FinancialChart control to your ASP.NET MVC web application and add data to it. Follow the steps given below to get started:
>type=note
> **Note**: The **ComponentOne template** for ASP.NET MVC Edition automatically registers the required resources, and adds the relevant references and packages to your application. Therefore, you need not follow the Steps 1 to 3 above if your application is created using ComponentOne template.
### License your application
* In the **Solution Explorer**, double-click the project name (for example, **MVCFinancialChart**) and expand node **Properties.**
* Double-click the **licenses.licx** file to open it.
* In the **licenses.licx** file, add the following:
```LICENSES.LICX
C1.Web.Mvc.LicenseDetector, C1.Web.Mvc
C1.Web.Mvc.Finance.LicenseDetector, C1.Web.Mvc.Finance
```
For more information on how to add license to your application, refer to [Licensing](/componentone/docs/mvc/online-mvc/GettingStarted/Licensing).
### Add the relevant references to your application
Complete the following steps to add the ASP.NET MVC Edition references and Financial Chart references to your project.
1. In the **Solution Explorer**, right click **References** and select **Add Reference.**
2. Browse to the location- **C:\\Program Files (x86)\\ComponentOne\\ASP.NET MVC Edition\\bin.**
3. Select **C1.Web.Mvc.dll** and **C1.Web.Mvc.Finance.dll**, and click **Add**.
4. Set the **Copy Local** property of the **C1.Web.Mvc.dll** and **C1.Web.Mvc.Finance.dll** to **True**.
### Configure the application to use FinancialChart
1. From the **Solution Explorer**, expand the folder **Views** and double click the `web.config` file to open it.
2. Add the following markups in \\ tags, within the `` tags.
```html
```
### Register Resources
Complete the following steps to register the required resources for using ASP.NET MVC FinancialChart control:
1. From the **Solution Explorer**, open the folders **Views \| Shared**.
2. Double click `_Layout.cshtml` to open it.
3. Add the following code between the `` tags.
```razor
@Html.C1().Styles()
@Html.C1().Scripts().Basic().Finance()
```
For more information on how to register resources for **FinancialChart**, refer to [Registering Resources](/componentone/docs/mvc/online-mvc/CreatingaNewProject/RegisteringResources).
### Create a Datasource for FinancialChart
1. Add a new class to the folder **Models** (for example: `FinanceData.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols#step2) to know how to add a new model.
2. Add the following code to the new model to define the classes that serve as a datasource for the FinancialChart control.
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MVCFinancialChart.Models
{
public class FinanceData
{
public DateTime X { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Open { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
}
}
```
### Add a FinancialChart control
Complete the following steps to initialize a FinancialChart control.
**Add a new Controller**
1. In the **Solution Explorer**, right click the folder **Controllers.**
2. From the context menu, select **Add \| Controller**. The **Add Scaffold** dialog appears.
3. Complete the following steps in the **Add Scaffold** dialog:
1. Select **MVC 5 Controller - Empty** template.
2. Set name of the controller (for example: `Default1Controller`).
3. Click **Add**.
4. Include the MVC references as shown below.
```csharp
using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
```
5. Replace the method `Index()` with the following method.
```csharp
public ActionResult Index()
{
var model = GenerateFinanceData();
return View(model);
}
private List GenerateFinanceData(int count = 60)
{
List financeDatas = new List() { };
DateTime startTime = new DateTime(2015, 1, 1);
var rand = new Random();
double high, low, open, close, volume;
for (int i = 0; i < count; i++)
{
DateTime dt = startTime.AddDays(i);
if (i > 0)
open = financeDatas[i - 1].Close;
else
open = 188;
high = open + rand.NextDouble() * 30;
low = open - rand.NextDouble() * 20;
close = low + rand.NextDouble() * (high - low);
volume = rand.Next();
financeDatas.Add(new FinanceData { X = dt, High = high, Low = low, Open = open, Close = close, Volume = volume });
}
return financeDatas;
}
```
**Add a View for the Controller**
1. Within the Controller, which was added in the above step, place the cursor inside the method `Index()`.
2. Right click and select **Add View**. The **Add View** dialog appears.
3. In the **Add View** dialog, verify that the view name is **Index** and View engine is **Razor (CSHTML).**
4. Click **Add**. A view is added for the controller.
5. Instantiate a FinancialChart control in the view QuickStart as shown below.
```razor
@using MVCFinancialChart.Models
@model List
@*Initialize FinancialChart control*@
@(Html.C1().FinancialChart()
.Bind(Model)
//Set the height and width of the chart
.Height(400)
.Width(700)
.BindingX("X")
//Set ChartType of the chart
.ChartType(C1.Web.Mvc.Finance.ChartType.ArmsCandleVolume)
.Series(sers =>
{
sers.Add().Binding("High,Low,Open,Close,Volume");
})
.Tooltip(t => t.Content("tooltipContent")))
```
### Build and Run the Project
1. Click **Build \| Build Solution** to build the project.
2. Press **F5** to run the project.
>type=note
> Append the folder name and view name to the generated URL (for example: http://localhost:1234/**QuickStart/Index**) in the address bar of the browser to see the view.