Available in the Full Version

Data Chart - Using ASP.NET MVC

This is a basic example showing the data chart created with the ASP.NET MVC helper.

Price Series

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard

@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models

@model IgniteUI.SamplesBrowser.Models.Financial.StockMarketDataCollection

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>
</head>
<body>

    <style type="text/css">
        #chart {
            position: relative;
            float: left;
            margin-right: 2%;
            margin-bottom: 2%;
            min-width: 210px;
        }

        #legend {
            position: relative;
            float: left;
        }
    </style>

    <div style="height: 400px">
        @(Html.Infragistics().DataChart(Model.AsQueryable())
        .ID("chart")
        .Width("800px")
        .Height("400px")
        .VerticalZoomable(true)
        .HorizontalZoomable(true)
        .Title("Energy Production Per Country")
        .Legend(legend => legend.ID("legend"))
        .Axes(axes =>
            {
                axes.CategoryX("xAxis")
                    .Label(item => item.FormattedDate);
                axes.NumericY("yAxis")
                    .Title("Quadrillion Btu");
            })
        .Series(series => series
                            .Financial("series1")
                            .Title("Price Series")
                            .XAxis("xAxis").YAxis("yAxis")
                            .OpenMemberPath(item => item.Open)
                            .HighMemberPath(item => item.High)
                            .LowMemberPath(item => item.Low)
                            .CloseMemberPath(item => item.Close)
                            .VolumeMemberPath(item => item.Volume)
                            .ShowTooltip(true))
        .DataBind()
        .Render()
    )
    </div>
</body>
</html>

using IgniteUI.SamplesBrowser.Models.Financial;
using System.Web.Mvc;
using System.Linq;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class DataChartController : Controller
    {
        //
        // GET: /DataChart/

        [ActionName("aspnet-mvc-helper")]
        public ActionResult AspNetMvcHelper()
        {
            StockMarketDataCollection model = new StockMarketDataCollection();
            return View("aspnet-mvc-helper", model);
        }

    }
}

using System;
using System.Collections.Generic;

namespace IgniteUI.SamplesBrowser.Models.Financial
{
    public class StockMarketDataCollection : List<StockMarketDataPoint>
    {
        public StockMarketDataCollection()
        {
            _stockSettings = new StockMarketSettings();
            this.Generate();
        }
        public void Generate()
        {
            this.Clear();
            StockMarketGenerator.Settings = this.Settings;
            StockMarketGenerator.Generate();
            foreach (StockMarketDataPoint dp in StockMarketGenerator.Data)
            {
                this.Add(dp);
            }
        }
        private StockMarketSettings _stockSettings;

        /// <summary>
        /// Settings used to generate StockMarketDataPoint objects
        /// </summary>
        public StockMarketSettings Settings
        {
            get { return _stockSettings; }
            set
            {
                _stockSettings = value;
                this.Generate();
            }
        }
    }

    public class StockMarketDataPoint
    {
        #region Constructors
        public StockMarketDataPoint()
            : this(new DateTime(2010, 1, 1), 100, 120, 90, 110, 1000)
        { }

        public StockMarketDataPoint(DateTime date, double open, double high, double low, double close, double volume)
        {
            _date = date;
            _open = open;
            _high = high;
            _low = low;
            _close = close;
            _volume = volume;
        }
        public StockMarketDataPoint(string date, double open, double high, double low, double close, double volume)
            : this(DateTime.Parse(date, new System.Globalization.CultureInfo(1041)), open, high, low, close, volume)
        { }

        public StockMarketDataPoint(StockMarketDataPoint dataPoint)
        {
            _date = dataPoint.Date;
            _open = dataPoint.Open;
            _high = dataPoint.High;
            _low = dataPoint.Low;
            _close = dataPoint.Close;
            _volume = dataPoint.Volume;
            _index = dataPoint.Index;
        }
        #endregion

        #region Properties
        private double _open;
        private double _high;
        private double _low;
        private double _close;
        private double _volume;
        private DateTime _date;
        private int _index;
        private string _label;

        public int Index { get { return _index; } set { if (_index == value) return; _index = value;} }
        public double Open { get { return _open; } set { if (_open == value) return; _open = value; } }
        public double High { get { return _high; } set { if (_high == value) return; _high = value; } }
        public double Low { get { return _low; } set { if (_low == value) return; _low = value; } }
        public double Close { get { return _close; } set { if (_close == value) return; _close = value; } }
        public double Volume { get { return _volume; } set { if (_volume == value) return; _volume = value;  } }
        public DateTime Date { get { return _date; } set { if (_date == value) return; _date = value; } }
        public string FormattedDate { get { return string.Format("{0:d}", _date); }}

        public string Category { get { return _label; } set { if (_label == value) return; _label = value; } }

        /// <summary>
        /// returns the difference between Close and Open values
        /// </summary>
        public double Change
        {
            get { return Close - Open; }
        }
        public double ChangePerCent
        {
            get { return (Change / Open) * 100; }
        }
        #endregion

    }

    public static class StockMarketGenerator
    {
        static StockMarketGenerator()
        {
            Generator = new Random();
            Settings = new StockMarketSettings();
            Data = GenerateData();
        }
        #region Properties
        public static StockMarketSettings Settings { get; set; }
        public static List<StockMarketDataPoint> Data { get; set; }
        public static StockMarketDataPoint LastDataPoint { get; set; }

        #endregion
        #region Fields
        private static readonly Random Generator;
        #endregion
        #region Methods
        public static void Generate()
        {
            Data = GenerateData();
        }
        public static DateTime GenerateStockDate(DateTime lastDate)
        {
            return lastDate.Add(Settings.DateInterval);
        }

        #region Methods for Random GeneratorMode


        public static double GenerateStockVolume(double preVolume)
        {
            double sum = 0;
            int min = (int)preVolume - Settings.VolumeRange;
            int max = (int)preVolume + Settings.VolumeRange;
            for (int i = 0; i < Settings.VolumeSample; i++)
            {
                sum += (double)Generator.Next(min, max);
            }
            double volume = sum / Settings.VolumeSample;
            return System.Math.Abs(volume);
        }

        public static double CurrentRandomValue;
        public static double GenerateStockRandom()
        {
            double nextRandomValue = Generator.NextDouble();
            if (nextRandomValue > .5)
                CurrentRandomValue += nextRandomValue * Settings.PriceRange;
            else
                CurrentRandomValue -= nextRandomValue * Settings.PriceRange;
            return CurrentRandomValue;
        }
        public static double GenerateStockOpen(double preClose)
        {
            //open value always equals to previous close value
            return preClose;
        }
        public static double GenerateStockOpen(double low, double high)
        {
            int min = (int)System.Math.Floor(System.Math.Min(low, high));
            int max = (int)System.Math.Ceiling(System.Math.Max(low, high));
            return System.Math.Abs((double)Generator.Next(min, max));
            // or return (low + high) / 2.0;
        }
        public static double GenerateStockHigh(double open)
        {
            double sum = 0;
            int min = (int)open;
            int max = (int)open + Settings.PriceRange;
            for (int i = 0; i < Settings.PriceSample; i++)
            {
                sum += (double)Generator.Next(min, max);
            }
            return System.Math.Abs(sum / Settings.PriceSample);
        }
        public static double GenerateStockLow(double open)
        {
            double sum = 0;
            int min = (int)open - Settings.PriceRange;
            int max = (int)open;
            for (int i = 0; i < Settings.PriceSample; i++)
            {
                sum += (double)Generator.Next(min, max);
            }
            return System.Math.Abs(sum / Settings.PriceSample);
        }
        public static double GenerateStockClose(double low, double high)
        {
            int min = (int)System.Math.Floor(System.Math.Min(low, high));
            int max = (int)System.Math.Ceiling(System.Math.Max(low, high));
            return System.Math.Abs((double)Generator.Next(min, max));
            // or return (low + high) / 2.0;
        }


        #endregion

        /// <summary>
        /// Generate new StockMarketDataPoint based on the passed StockMarketDataPoint
        /// </summary>
        /// <param name="dataPoint"></param>
        /// <returns></returns>
        public static StockMarketDataPoint GenerateDataPoint(StockMarketDataPoint dataPoint)
        {
            double open = GenerateStockOpen(dataPoint.Close);
            //double open = GenerateStockOpen(dataPoint.Low, dataPoint.High);
            //double open = GenerateStockRandom();
            double high = GenerateStockHigh(open);
            double low = GenerateStockLow(open);
            double close = GenerateStockClose(low, high);

            double volume = GenerateStockVolume(dataPoint.Volume);
            DateTime date = dataPoint.Date.Add(Settings.DateInterval);
            int index = dataPoint.Index + 1;

            LastDataPoint = new StockMarketDataPoint
            {
                Index = index,
                Date = date,
                Open = open,
                Close = close,
                High = high,
                Low = low,
                Volume = volume
            };
            return LastDataPoint;
        }

        /// <summary>
        /// Generate new StockMarketDataPoint based on the last StockMarketDataPoint in List of StockMarketDataPoint 
        /// </summary>
        /// <returns></returns>
        public static StockMarketDataPoint GenerateDataPoint()
        {
            StockMarketDataPoint newDataPoint = GenerateDataPoint(LastDataPoint);
            return newDataPoint;
        }

        /// <summary>
        /// Generate List of StockMarketDataPoint based on the Settings
        /// </summary>
        /// <returns></returns>
        public static List<StockMarketDataPoint> GenerateData()
        {
            List<StockMarketDataPoint> data = new List<StockMarketDataPoint>();

            StockMarketDataPoint dataPoint = new StockMarketDataPoint
            {
                Index = -1,
                Close = Settings.PriceStart,
                Volume = Settings.VolumeStart,
                Date = Settings.DateStart
            };
            CurrentRandomValue = Settings.PriceStart;

            for (int i = 0; i < Settings.DataPoints; i++)
            {
                dataPoint = GenerateDataPoint(dataPoint);
                data.Add(dataPoint);
            }
            return data;
        }

        /// <summary>
        /// Append new StockMarketDataPoint to existing StockMarketData
        /// </summary>
        public static void AppendDataPoint()
        {
            Data.Add(GenerateDataPoint());
        }

        #endregion

    }

    public class StockMarketSettings
    {
        public StockMarketSettings()
        {
            DataPoints = 50;

            VolumeStart = 2000;
            VolumeRange = 50;
            VolumeSample = 4;

            PriceStart = 1000;
            PriceRange = 50;
            PriceSample = 4;

            DateStart = new DateTime(2010, 1, 1);
            DateInterval = TimeSpan.FromDays(1);
        }

        #region Properties
        /// <summary>
        /// Determines range for used to generate random Volume value 
        /// </summary>
        public int VolumeRange { get; set; }
        /// <summary>
        /// Determines number of samples used to generate random Volume values
        /// </summary>
        public int VolumeSample { get; set; }
        /// <summary>
        /// Determines starting Volume value for the first StockMarketDataPoint object
        /// </summary>
        public double VolumeStart { get; set; }

        /// <summary>
        /// Determines range used to generate random Open, High, Low, and Close values
        /// </summary>
        public int PriceRange { get; set; }
        /// <summary>
        /// Determines number of samples used value used to generate random Price values
        /// </summary>
        public int PriceSample { get; set; }
        /// <summary>
        /// Determines starting Price value for the first StockMarketDataPoint object
        /// </summary>
        public double PriceStart { get; set; }

        /// <summary>
        /// Determines time intervals between StockMarketDataPoint objects
        /// </summary>
        public TimeSpan DateInterval { get; set; }
        /// <summary>
        /// Determines starting date value for the first StockMarketDataPoint object
        /// </summary>
        public DateTime DateStart { get; set; }
        
        /// <summary>
        /// Determines the amount of data points to generate
        /// </summary>
        public int DataPoints { get; set; }
        #endregion
    }

}

Ignite UI for jQuery | Samples

Search Results

Data Chart - Using ASP.NET MVC

Code View