FlexChart
FlexChart
Overview
Features
Sample
Settings
Description
This view shows basic features of the FlexChart control. It binds the chart to a Model and allows you to select the chart type, the series stacking, and the rotation.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
The simplest way to use the FlexChart is to:
- Bind the FlexChart to an IEnumerable DataSource.
- Set the BindingX property of the chart to the name of the property that contains the X values (in this example fruit names), and it will map the field of chart's ItemsSource.
- Add one or more Series objects to the chart's Series array and set their Binding property to the name of the property that contains the Y values (in this example the months of March, April, and May).
Source
IndexController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using C1.Web.Mvc.Chart;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Index()
{
var data = new ClientSettingsModel
{
Settings = CreateIndexSettings(),
DefaultValues = GetIndexDefaultValues()
};
data.LoadRequestData(Request);
ViewBag.DemoSettingsModel = data;
return View(Fruit.GetFruitsSales());
}
private static IDictionary<string, object[]> CreateIndexSettings()
{
var settings = new Dictionary<string, object[]>
{
{"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
{"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
{"Rotated", new object[]{false, true}},
{"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
{"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}
};
return settings;
}
private static IDictionary<string, object> GetIndexDefaultValues()
{
var defaultValues = new Dictionary<string, object>
{
{"GroupWidth", "70%"}
};
return defaultValues;
}
}
}
Index.cshtml
@model IEnumerable<Fruit>
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
@functions{
public C1.Web.Mvc.Chart.Stacking GetStacking(ClientSettingsModel settings)
{
return settings.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (stacking) =>
{
return string.Equals(stacking, "Stacked 100%", StringComparison.OrdinalIgnoreCase)
? "Stacked100pc"
: stacking;
});
}
}
<div id="flexChart"></div>
@(Html.C1().FlexChart().Id(demoSettingsModel.ControlId)
.ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column))
.Stacking(GetStacking(demoSettingsModel))
.Rotated(demoSettingsModel.GetBool("Rotated", false))
.Bind(Model).BindingX("Name").Series(sers =>
{
sers.Add().Binding("MarPrice").Name("March");
sers.Add().Binding("AprPrice").Name("April");
sers.Add().Binding("MayPrice").Name("May");
})
)
@section Scripts{
<script type="text/javascript">
convertStacking = function (value) {
return value === "Stacked 100%" ? "Stacked100pc" : value;
};
convertPalette = function (value) {
return wijmo.chart.Palettes[value];
};
updateGroupWidth = function (control, value) {
control.options = { groupWidth: value === "50 pixels" ? 50 : value };
};
</script>
}
@section Description{
<p>@Html.Raw(Resources.FlexChart.Index_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Index_Text1)</p>
<p>@Html.Raw(Resources.FlexChart.Index_Text2)</p>
<ol>
<li>@Html.Raw(Resources.FlexChart.Index_Li1)</li>
<li>@Html.Raw(Resources.FlexChart.Index_Li2)</li>
<li>@Html.Raw(Resources.FlexChart.Index_Li3)</li>
</ol>
}
Documentation