FlexChart
FlexChart
Overview
Features
Sample
Settings
Description
Introduction
This view shows the FlexChart's basic features by using c1-flex-chart tag. It binds the chart to a Model and allows you to select the chart type, series stacking, and 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 with an IEnumerable DataSource. by setting source-collection attribute of c1-items-source sub-tag to Model.
- Set binding-x attribute 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 c1-flex-chart-series sub-tags and set their binding attribute 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 MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController: Controller
{
public ActionResult Index()
{
var settings = new ClientSettingsModel
{
Settings = CreateIndexSettings(),
DefaultValues = GetIndexDefaultValues()
};
settings.LoadRequestData(Request);
ViewBag.DemoSettingsModel = settings;
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
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel;
var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column);
var stacking = demoSettingModel.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (content) =>
{
return string.Equals(content, "Stacked 100%", StringComparison.OrdinalIgnoreCase)
? "Stacked100pc"
: content;
});
var rotated = demoSettingModel.GetBool("Rotated", false);
}
<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name"
chart-type="@chartType" stacking="@stacking" rotated="@rotated">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="MarPrice">
</c1-flex-chart-series>
<c1-flex-chart-series binding="AprPrice">
</c1-flex-chart-series>
<c1-flex-chart-series binding="MayPrice">
</c1-flex-chart-series>
</c1-flex-chart>
@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{
<h3>
@Html.Raw(FlexChartRes.Index_Introduction)
</h3>
<p>@Html.Raw(FlexChartRes.Index_Text0)</p>
<p>@Html.Raw(FlexChartRes.Index_Text1)</p>
<p>@Html.Raw(FlexChartRes.Index_Text2)</p>
<ol>
<li>@Html.Raw(FlexChartRes.Index_Li1)</li>
<li>@Html.Raw(FlexChartRes.Index_Li2)</li>
<li>@Html.Raw(FlexChartRes.Index_Li3)</li>
</ol>
}
Documentation