Charting Overview

The Historic, current and future population chart showing Africa series.
About Charting

The ASP.NET MVC Charts Suite offers you a comprehensive set of 2D and 3D charts to address a broad range of business needs with ease. Regardless of data source or the manner in which application information is stored on disk, the Chart Control promises flexibility and speed in its consumption of input data as well as its ability to output/render information on-screen or on the printed page.

The code samples below demonstrate how to bind the WebChartControl to the HistoricPopulationModel object that implements the IList interface. The HistoricPopulationModel defines a data source with data that shows population dynamic by years. To provide chart data, you need to create a series (the "Area" series view, for example) and specify series data members. In addition, you can create a title for the chart and Y-axis and specify its text.

Note that the chart control provides a built-in crosshair cursor (available for an XYDiagram2D chart type only) that is enabled automatically. Thus, you do not need to write any line of a code to implement this feature in your application.

Partial View code:

@Html.DevExpress().Chart(settings => {
    settings.Name = "chart";
    settings.Titles.Add(new ChartTitle() {
        Font = new Font("Tahoma", 18),
        Text = "Historic, current and future population"
    });
    Series series = new Series("Africa",
      DevExpress.XtraCharts.ViewType.Area);
    series.ArgumentDataMember = "Year";
    series.ValueDataMembers[0] = "Population";
    settings.Series.Add(series);
    XYDiagram diagram = (XYDiagram)settings.Diagram;
    diagram.AxisY.Title.Text = "Population mid-year, millions";
    diagram.AxisY.Title.Visible = true;
}).Bind(Model).GetHtml()

The Controller code implements the action that will obtain data from a datasource.

Controller code:

public class HomeController: Controller {
  public ActionResult Index() {
    return View("Overview",
      HistoricPopulationModel.GetData());
  }
}

Key Features
  • Rich and Elegant Chart Types for Efficient Visual Representation

    The Chart extension helps you transform data to its most appropriate, concise and readable visual representation.

  • Flexible Data Binding

    Chart your data - regardless of its source. The data source you supply for the chart can be any object that supports the IList or IEnumerable interface.

  • Intuitive Design Time Tools

    An easy-to-use built in chart wizard allows you to customize the main elements of a given chart.

  • Appearance Customization, Smart Labels, Titles and Annotations

    Numerous built-in palettes (or style schemes) are available to you.

    You can manually specify label visibility and appearance, shadow style, and also its connector line's angle and length. A title provides endless customization possibilities, including HTML-like text formatting.

    You can also create text or image annotations anchored to a chart, pane, or series point.

  • Multi-Dimensional Data Analysis and Reporting

    Perform deep analysis of underlying chart data and easily compute summaries, averages, totals, custom functions. Turn information displayed within the DevExpress Pivot Grid into an interactive chart by simply specifying the Pivot Grid as the chart's data source.

    Built-in integration with both the XtraPrinting Library and XtraReports Suite means that charts can be embedded within any banded report, printed or exported to numerous file formats with absolute ease.

  • Printing, Exporting, Drill-Through, Crosshairs and Tooltips

    The Chart extension provides rich client-side API allowing end-users to change chart appearance, send it to the printer or save the chart to disk using popular file formats.

    The Chart extension allows end-users to dig deep into the information stored within a chart and directly interact with its contents using built-in tooltips and crosshair cursors.

Version: v2017 vol 1.7
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.