FlexChart Architecture

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.

Like all C1 MVC controls, the chart delegates all data-related tasks to the CollectionView class, so if you want to filter, sort, or group the data, you can do it using the CollectionView. It may be useful to think of the FlexChart as a special type of data grid, where columns are represented by series and rows are data points on the chart.

For example, the chart below has buttons that allow users to sort the data by changing the sortDescriptions property of the chart's collectionView:

Sort by:

// This file locates: "Scripts/Lesson/C1FlexChart/Sorting.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // connect sort buttons
    sortOnClick('btnNone', null);
    sortOnClick('btnCountry', 'Country');
    sortOnClick('btnSales', 'Sales');
    sortOnClick('btnExpenses', 'Expenses');
    sortOnClick('btnDownloads', 'Downloads');
 
    function sortOnClick(id, prop) {
        document.getElementById(id).addEventListener('click', function () {
            var sd = theChart.collectionView.sortDescriptions;
            sd.clear();
            sd.push(new wijmo.collections.SortDescription(prop, true))
        })
    }
});

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

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Sorting_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Sorting_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Sorting_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Sorting_Text3)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexChart.Sorting_Text4)
    <button id="btnNone" class="btn btn-default">@Html.Raw(Resources.C1FlexChart.Sorting_Text5)</button>
    <button id="btnCountry" class="btn btn-default">@Html.Raw(Resources.C1FlexChart.Sorting_Text6)</button>
    <button id="btnSales" class="btn btn-default">@Html.Raw(Resources.C1FlexChart.Sorting_Text7)</button>
    <button id="btnExpenses" class="btn btn-default">@Html.Raw(Resources.C1FlexChart.Sorting_Text8)</button>
    <button id="btnDownloads" class="btn btn-default">@Html.Raw(Resources.C1FlexChart.Sorting_Text9)</button>
</p>
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)