FlexChart
FlexChart
Series Binding
Chart series binding
This view shows how you can use the FlexChart to show data from
multiple data sources, one per series.
Features
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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;namespace MvcExplorer.Controllers{ public partial class FlexChartController : Controller { public ActionResult SeriesBinding() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | @{ 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>@(Html.C1().FlexChart("#FlexChartTestSample1").ChartType(C1.Web.Mvc.Chart.ChartType.Spline).Series(sers => { sers.Add().Bind(function1).BindingX("X").Binding("Y").Name("function 1"); sers.Add().Bind(function2).BindingX("X").Binding("Y").Name("function 2"); }).AxisX(x => { x.Origin(0).MinorGrid(true).MajorGrid(true); }).AxisY(y => { y.Origin(0).MinorGrid(true); }))@section Description{ <h3> @Html.Raw(Resources.FlexChart.SeriesBinding_ChartSeriesBinding) </h3> <p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text0)</p> <p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text1)</p> <ol> <li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li1)</li> <li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li2)</li> <li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li3)</li> </ol> <p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text2)</p>} |