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>
    FlexChart
</h1>

<p>
    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.
</p>
<p>
    Bind the chart by setting its <b>itemsSource</b> property to an
    array containing regular JavaScript objects,
    and populate the chart's <b>series</b> collection with objects that define which
    properties of the data items should be charted and how:
</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>
    This is the data being charted. Because the grid and the chart
    are bound to the same <b>CollectionView</b>, the chart will be
    updated if you edit or sort the data:
</p>
@(Html.C1().FlexGrid<FlexChartData.Sale>().Id("theGrid").ItemsSourceId("theCollectionView")
)