FlexChart
FlexChart
Series Binding
Features
Sample
Description
Chart series binding
This view shows how you can use the FlexChart to show data from multiple data sources, one per series.
The sample does the following:
- Set the chart's BindingX and Binding properties to "X" and "Y".
- Add a Series object to the chart's Series array and bind it with an array of objects that have "X" and "Y" properties.
- Add a second Series object to the chart's Series array and bind it with a different array of objects that have "X" and "Y" properties.
Alternatively, we could have set the BindingX and Binding properties on the Series objects instead of setting then on the chart.
Source
SeriesBindingController.cs
using System;
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult SeriesBinding()
{
return View();
}
}
}
SeriesBinding.cshtml
@{
ViewBag.Title = "SeriesBinding";
List<Dot> function1 = new List<Dot>();
List<Dot> function2 = new List<Dot>();
for (int i = 0; i < 300; i++)
{
function1.Add(new Dot { X = 2 * Math.Sin(0.16 * i), Y = 2 * Math.Cos(0.12 * i) });
function2.Add(new Dot { X = Math.Sin(0.1 * i), Y = Math.Cos(0.15 * i) });
}
}
<div id="FlexChartTestSample1"></div>
<c1-flex-chart id="FlexChartTestSample1" chart-type="Spline">
<c1-flex-chart-series binding-x="X" binding="Y" name="function 1">
<c1-items-source source-collection="function1"></c1-items-source>
</c1-flex-chart-series>
<c1-flex-chart-series binding-x="X" binding="Y" name="function 2">
<c1-items-source source-collection="function2"></c1-items-source>
</c1-flex-chart-series>
<c1-flex-chart-axis c1-property="AxisX" origin="0" minor-grid="true" major-grid="true"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" origin="0" minor-grid="true"></c1-flex-chart-axis>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.SeriesBinding_ChartSeriesBinding)
</h3>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text0)</p>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text1)</p>
<ol>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li1)</li>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li2)</li>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li3)</li>
</ol>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text2)</p>
}
Documentation