FlexChart

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:

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")
)