The FlexChart allows you to visualize tabular data as business charts. It provides a variety of options about how to present and interact with the data, including selection, zooming, drill-down, formatting, etc.

Bind the chart by setting its itemsSource property to an array containing regular JavaScript objects, and populate the chart's series collection with objects that define which properties of the data items should be charted and how:

This is the data being charted. Because the grid and the chart are bound to the same CollectionView, the chart will be updated if you edit or sort the data:

Country

Sales

Expenses

Downloads

7,262

4,086

15,360

Germany

5,581

1,030

11,177

9,060

2,210

19,550

Japan

2,737

1,459

9,346

Italy

6,326

2,347

19,643

Greece

303

4,311

19,906

IndexController.cs
Index.cshtml

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: Index
        public ActionResult Index(int id = 0)
        {
            return View(Models.FlexChartData.GetSales1());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Index_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Index_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Index_Text2)
</p>
 
@(Html.C1().CollectionViewService<FlexChartData.Sale>().Id("theCollectionView").Bind(Model)
)
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart").ItemsSourceId("theCollectionView")
    .BindingX("Country")
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)
 
<p>
    @Html.Raw(Resources.C1FlexChart.Index_Text3)
</p>
@(Html.C1().FlexGrid<FlexChartData.Sale>().Id("theGrid").ItemsSourceId("theCollectionView")
)