The FlexChart uses the CollectionView class as its data source, so it is inherently interactive. Any changes made to the data will be automatically reflected on the chart.

For example, the chart and the grid below are bound to the same CollectionViewService, so if you edit the data on the grid, or sort the grid's columns, the chart will show the changes automatically:

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

In addition to this automatic type of interaction, you can use events to add custom interactions to the chart, including zooming, selection, grouping, drill-downs, and animations.

InteractiveChartsController.cs
InteractiveCharts.cshtml

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

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