# Quick Start

## Content



The quick start guides you through the steps of adding an OLAP control in a web application and displaying data in it.

Follow the steps given below to get started:

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

### 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 OLAP

Create a new class inside the Models folder to create a data source for the OLAP control.

1.  Add a new class to the folder **Models** (for example: `ProductData.cs`). For more information about how to add a new model, see [Adding controls](/componentone/docs/mvc/online-mvc-core/Adding-Controls).
2.  Add the following code to the model to define the data for OLAP. **csharp**
    
    ```csharp
    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    namespace OlapSample.Models
    {
        public class ProductData
        {
            private static Random r = new Random();
            public int ID { get; set; }
            public string Product { get; set; }
            public string Country { get; set; }
            public DateTime Date { get; set; }
            public int Sales { get; set; }
            public int Downloads { get; set; }
            public bool Active { get; set; }
            public double Discount { get; set; }
            private static int randomInt(int max)
            {
                return (int)Math.Floor(r.NextDouble() * (max + 1));
            }
            public static IEnumerable<ProductData> GetData(int cnt)
            {
                string[] countries = "China,India,Russia,US,Germany,UK,Japan,Italy,Greece,Spain,Portugal".Split(',');
                string[] products = "Wijmo,Aoba,Xuni,Olap".Split(',');
                List<ProductData> result = new List<ProductData>();
                for (var i = 0; i < cnt; i++)
                {
                    result.Add(new ProductData
                    {
                        ID = i,
                        Product = products[randomInt(products.Length - 1)],
                        Country = countries[randomInt(countries.Length - 1)],
                        Date = new DateTime(2015, randomInt(5) + 1, randomInt(27) + 1),
                        Sales = randomInt(10000),
                        Downloads = randomInt(10000),
                        Active = randomInt(1) == 1 ? true : false,
                        Discount = r.NextDouble()
                    });
                }
                return result;
            }
        }
    }
    ```
    

### Add an OLAP control

Create a Controller and View for OLAP control and follow the below steps to initialize an OLAP 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: `OlapController`).
    3.  Click **Add**.
4.  Replace the method Index() with the following method. **csharp**
    
    ```csharp
    public class OlapController : Controller
    {
        private static System.Collections.IEnumerable Data = ProductData.GetData(10).ToList();
        // GET: PivotGrid
        public ActionResult Index()
        {
            return View(Data);
        }
    }
    ```
    

**Add a View for the Controller**

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the `OlapController.`
2.  Place the cursor inside the method `Index()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the view name is **Index** and View engine is **Razor (CSHTML).**
5.  Click **Add** to add a view is for the controller. Copy the following code and paste it inside **Index.cshtml**.
    
    ```razor
    @model IEnumerable<ProductData>
    <c1-pivot-engine id="indexEngine">
        <c1-items-source source-collection="Model"></c1-items-source>
        <c1-view-field-collection c1-property="RowFields" items="Country"></c1-view-field-collection>
        <c1-view-field-collection c1-property="ColumnFields" items="Product"></c1-view-field-collection>
        <c1-view-field-collection c1-property="ValueFields" items="Sales"></c1-view-field-collection>
    </c1-pivot-engine>
    <c1-pivot-panel items-source-id="indexEngine"></c1-pivot-panel>
    <c1-pivot-chart items-source-id="indexEngine"></c1-pivot-chart>
    <c1-pivot-grid items-source-id="indexEngine"></c1-pivot-grid>
    ```
    

### 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/**Olap/Index**) in the address bar of the browser to see the view.