Data Sources

The FlexChart's itemsSource and bindingX properties apply to all series in the chart by default.

Specific series may override those properties and use different data sources and bindings. This allows you to use multiple data sources on the same chart, and reduces the need to pre-process data for charting.

This demo creates several data sets and plots each one as a different series:

Set Axis Origin to Zero

// This file locates: "Scripts/Lesson/C1FlexChart/SeriesDataSources.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // toggle axis origin
    document.getElementById('axisOrigin').addEventListener('click', function (e) {
        var origin = e.target.checked ? 0 : null;
        theChart.axisX.origin = origin;
        theChart.axisY.origin = origin;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: SeriesDataSources
        public ActionResult SeriesDataSources()
        {
            ViewBag.Points1 = Models.FlexChartData.GetPoints(50, 0, 3);
            ViewBag.Points2 = Models.FlexChartData.GetPoints(40, 100, 12);
            ViewBag.Points3 = Models.FlexChartData.GetPoints(30, -100, 24);
            return View();
        }
    }
}

@using LearnMvcClient.Models
 
@{ 
    IEnumerable<FlexChartData.Point> points1 = ViewBag.Points1;
    IEnumerable<FlexChartData.Point> points2 = ViewBag.Points2;
    IEnumerable<FlexChartData.Point> points3 = ViewBag.Points3;
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.SeriesDataSources_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesDataSources_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesDataSources_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SeriesDataSources_Text3)
</p>
 
<div class="demo-settings">
    <label for="axisOrigin">@Html.Raw(Resources.C1FlexChart.SeriesDataSources_Text4)</label>
    <input id="axisOrigin" type="checkbox">
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Scatter)
    .AxisY(a=>a.AxisLine(true))
    .Series(sb=>
    {
        sb.Add().Bind("X", "Y", points1).Name("Experiment 1");
        sb.Add().Bind("X", "Y", points2).Name("Experiment 2");
        sb.Add().Bind("X", "Y", points3).Name("Experiment 3");
    })
)