Dynamic Chart

The FlexChart receives notifications when the data changes and updates the chart automatically.

The chart below is bound to an itemsSource that receives new items at a given interval. When new items are added to the data source, old items are removed to keep the total item count constant. The result is a dynamic scrolling chart.

Update Interval: ms

// This file locates: "Scripts/Lesson/C1FlexChart/InteractiveAnimations.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theInterval = wijmo.Control.getControl('#theInterval');
 
    theChart.itemsSource = getData(200);
 
    // start changing the data
    function addPoints() {
 
        // append new points, remove old points
        var arr = theChart.collectionView.sourceCollection;
        var pt = arr[arr.length - 1];
        var y = pt.y;
        for (var i = 0; i < 10; i++) {
            y += Math.random() - .5;
            arr.push({ x: pt.x + i + 1, y: y });
            arr.splice(0, 1);
        }
 
        // update chart
        theChart.collectionView.refresh();
        if (theInterval.selectedItem < 50) {
            theChart.refresh(); // force a refresh if the interval is small
        }
 
        // and keep updating
        setTimeout(function () {
            addPoints();
        }, theInterval.selectedItem)
    }
    addPoints();
 
    // get some random data
    function getData(cnt) {
        var arr = [],
        y = 0;
        for (var i = 0; i < cnt; i++) {
            arr.push({ x: i, y: y });
            y += Math.random() - .5;
        }
        return arr;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: InteractiveAnimations
        public ActionResult InteractiveAnimations()
        {
            return View();
        }
    }
}

@{ 
    var intervals = new[] { 0, 50, 100, 300, 600, 1200 };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.InteractiveAnimations_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.InteractiveAnimations_Text1)
<p>
<p>
    @Html.Raw(Resources.C1FlexChart.InteractiveAnimations_Text2)
</p>
 
<div class="demo-settings">
    <label for="theInterval">@Html.Raw(Resources.C1FlexChart.InteractiveAnimations_Text3) </label>
    @(Html.C1().ComboBox<int>().Id("theInterval").Bind(intervals).SelectedValue(300))
    @Resources.C1FlexChart.InteractiveAnimations_Text4
</div>
 
@(Html.C1().FlexChart().Id("theChart")
    .BindingX("x")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Line)
    .Series(sb => sb.Add().Binding("y"))
)