@using Trirand.Web.Mvc
@using Trirand.Web.Mvc.Chart
@using Trirand.Web.Mvc.Chart.ChartAxis;
@using Trirand.Web.Mvc.Chart.ChartFeature;
@using Trirand.Web.Mvc.Chart.Series;
@using Newtonsoft.Json.Linq;

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Chartfor ASP.NET MVC - Bar - Animation Delay Chart</title>
    <script type="text/javascript" src="~/Scripts/trirand/chart/corechart.min.js"></script>
</head>
<body>
    <div>
        <!--
        The Html.Trirand().CoreChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in
        the controller based on runtime criteria and database data and pass the model
        to the View using ViewData
        -->
        @(Html.Trirand().CoreChart(
            new CoreChart
            {
                Width = "800px",
                Height = "400px",
                Title = new List<Title>
                {
                    new Title()
                    {
                        Text = "Histrogram Animation Delay"
                    }
                },
                Legend = new Legend
                {
                    Align = HorizontalType.Left,
                    Data = new object[2] { "Bar", "Bar 2" }
                },
                Toolbox = new ToolBox
                {
                    Feature = new Feature
                    {
                        MagicType = new MagicType
                        {
                            Type = new List<object>() { "stack", "tiled" }
                        },
                        SaveAsImage = new FeatureImage { PixelRatio = 2 }
                    }
                },
                Tooltip = new ToolTip
                {
                },
                XAxis = new List<Axis>()
                {
                    new CategoryAxis()
                    {
                        Silent = false,
                        Data = ViewData["xAxisData"] as List<string>,
                        SplitLine = new SplitLine()
                        {
                            Show = false
                        }
                    }
                },
                YAxis = new List<Axis>()
                {
                    new ValueAxis
                    {
                    }
                },
                Series = new List<object>()
                {
                    new Bar()
                    {
                        Name = "Bar",
                        Data = ViewData["data1"] as List<double>,
                        AnimationDelay = new JRaw(@"function (idx) {
                                                    return idx * 10;
                                                }")
                    },
                    new Bar()
                    {
                        Name = "Bar 2",
                        Data = ViewData["data2"] as List<double>,
                        AnimationDelay = new JRaw(@"function (idx) {
                                                    return idx * 10 + 100;
                                                }")
                    }
                },
                AnimationEasing = "elasticOut",
                AnimationDelayUpdate = new JRaw(@"function (idx) {
                                            return idx * 5;
                                        }")
            }, "Chart")
        )

        <br />

        <div>
             
        </div>
    </div>
</body>
</html>

using System.Web.Mvc;
using System;
using System.Collections.Generic;

namespace CoreDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        List<double> data1 = new List<double>();
        List<double> data2 = new List<double>();
        List<string> xAxisData = new List<string>();

        public void GenerateData()
        {
            for (var i = 0; i < 100; i++)
            {
                xAxisData.Add("Category" + i);
                data1.Add((Math.Sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
                data2.Add((Math.Cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
            }
        }

        public ActionResult AnimationDelay()
        {
            GenerateData();

            ViewData["data1"] = data1;
            ViewData["data2"] = data2;
            ViewData["xAxisData"] = xAxisData;
           
            return View("");
        }
    }
}