# Quick Start

## Content



The quick start guides you through the steps of adding the FlexChart control to your MVC web application and add data to it.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/chartquickstart.png)

Follow these steps to get started:

### Create an MVC Application

Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc-core/Configuring-your-MVC-Application) topic.

### Create a Datasource for FlexChart

2.  Add a new class to the folder **Models** (for example: `FlexChartDataSource.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc-core/Adding-Controls) to know how to add a new model.
3.  Add the following code to the new model to define the classes that serve as a datasource for the FlexChart control.
    
    ```razor
    public class FlexChartDataSource
    {
        public string Name { get; set; }
        public int MarPrice { get; set; }
        public int AprPrice { get; set; }
        public int MayPrice { get; set; }
        private IEnumerable<FruitSale> _sales = null;
        public IEnumerable<FruitSale> Sales
        {
            get
            {
                if (_sales == null)
                {
                    _sales = GetSales();
                }
                return _sales;
            }
        }
        public static IEnumerable<FlexChartDataSource> GetFruitsSales()
        {
            var rand = new Random(0);
            var fruits = new[] { "Oranges", "Apples", "Pears", "Bananas", "Pineapples" };
            var list = fruits.Select((f, i) =>
            {
                int mar = rand.Next(1, 6);
                int apr = rand.Next(1, 9);
                int may = rand.Next(1, 6);
                return new FlexChartDataSource { Name = f, MarPrice = mar, AprPrice = apr, MayPrice = may };
            });
            return list;
        }
        private IEnumerable<FruitSale> GetSales()
        {
            var rand = new Random(0);
            var today = DateTime.Now.Date;
            var firstDay = new DateTime(today.Year - 1, 3, 1);
            var dataTimes = new List<DateTime>();
            for (int i = 0; i < 92; i++)
            {
                dataTimes.Add(firstDay.AddDays(i + 1));
            }
            var list = dataTimes.Select((date, i) =>
            {
                FruitSale sale = new FruitSale { Date = date };
                sale.SalesInChina = rand.Next(150, 250);
                if (i % 30 != 0)
                {
                    sale.SalesInUSA = rand.Next(100, 200);
                    sale.SalesInJapan = rand.Next(0, 100);
                }
                else
                {
                    sale.SalesInUSA = null;
                    sale.SalesInJapan = null;
                }
                return sale;
            });
            return list;
        }
    }
    public class FruitSale
    {
        public DateTime Date { get; set; }
        public int? SalesInUSA { get; set; }
        public int? SalesInChina { get; set; }
        public int? SalesInJapan { get; set; }
    }
    ```
    

### Add a FlexChart control

Complete the following steps to initialize a FlexChart 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 **Empty MVC Controller** template.
    2.  Set name of the controller (for example: `QuickStartController`).
    3.  Click **Add**.
4.  Include the MVC references as shown below.
    
    ```csharp
    using C1.Web.Mvc;
    using C1.Web.Mvc.Serializition;
    using C1.Web.Mvc.Chart;
    using <ApplicationName>.Models;
    ```
    
5.  Replace the method `Index()` with the following method.
    
    ```csharp
    public ActionResult QuickStart()
    {
      // Set DataSource
      FlexChartDataSource ds = new FlexChartDataSource();
      return View(ds.Sales);
    }
    ```
    

**Add a View for the Controller**

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the controller `QuickStartController` to open it.
2.  Place the cursor inside the method `QuickStart()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the view name is **QuickStart** and View engine is **Razor (CSHTML).**
5.  Click **Add**. A view is added for the controller.
6.  Instantiate a FlexChart control in the view QuickStart as shown below.
    
    ```razor
    <c1-flex-chart binding-x="Name"chart-type="ChartType.Column" >
        <c1-items-source source-collection="Model"></c1-items-source>
        <c1-flex-chart-series binding="SalesInUSA" name="Sales in USA">
        </c1-flex-chart-series>
    </c1-flex-chart>
    ```

### 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/**[FlexChart/Index](http://localhost:1234/FlexChart/Index)**) in the address bar of the browser to see the view.