Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates the Stock chart type.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.OhlcChartData>>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script> <body> <div> <%= Html.JQChart() .Chart(Model) .ID("jqChart") .Width(600) .Height(300) .Title("Stock Chart") .Legend(legend => legend.Visible(false)) .Tooltips(tooltip => tooltip.TooltipsType(TooltipsType.Shared)) .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Series(series => { series.Stock().Title("Price Index") .XValues(el => el.Date) .HighValues(el => el.High) .LowValues(el => el.Low) .OpenValues(el => el.Open) .CloseValues(el => el.Close); } ) .Render()%> </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#jqChart').bind('tooltipFormat', function (e, data) { var tooltip = '<div style="color:' + data.series.fillStyle + '">' + data.series.title + '</div>'; var date = data.chart.stringFormat(data.x, "mmm d, yyyy"); tooltip += "Date: <b>" + date + "</b><br />" + "Open: <b>" + data.open + "</b><br />" + "High: <b>" + data.high + "</b><br />" + "Low: <b>" + data.low + "</b><br />" + "Close: <b>" + data.close + "</b>"; return tooltip; }); }); </script> </body> </html> @model IEnumerable<SamplesBrowser.Models.OhlcChartData> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQChart() .Chart(Model) .ID("jqChart") .Width(600) .Height(300) .Title("Stock Chart") .Legend(legend => legend.Visible(false)) .Tooltips(tooltip => tooltip.TooltipsType(TooltipsType.Shared)) .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Series(series => { series.Stock().Title("Price Index") .XValues(el => el.Date) .HighValues(el => el.High) .LowValues(el => el.Low) .OpenValues(el => el.Open) .CloseValues(el => el.Close); } ) .Render() ) </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { $('#jqChart').bind('tooltipFormat', function (e, data) { var tooltip = '<div style="color:' + data.series.fillStyle + '">' + data.series.title + '</div>'; var date = data.chart.stringFormat(data.x, "mmm d, yyyy"); tooltip += "Date: <b>" + date + "</b><br />" + "Open: <b>" + data.open + "</b><br />" + "High: <b>" + data.high + "</b><br />" + "Low: <b>" + data.low + "</b><br />" + "Close: <b>" + data.close + "</b>"; return tooltip; }); }); </script> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; namespace SamplesBrowser.Models { public class OhlcChartData { public static List<OhlcChartData> GetData() { Random rnd = new Random(); var data = new List<OhlcChartData>(); var date = new DateTime(2010, 1, 1); var high = rnd.NextDouble() * 40; var close = high - rnd.NextDouble(); var low = close - rnd.NextDouble(); var open = (high - low) * rnd.NextDouble() + low; var volume = 100 + 15 * rnd.NextDouble(); OhlcChartData item = new OhlcChartData() { Date = date, High = Math.Round(high, 2), Low = Math.Round(low, 2), Open = Math.Round(open, 2), Close = Math.Round(close, 2), Volume = Math.Round(volume, 2) }; data.Add(item); for (var day = 2; day <= 60; day++) { date = date.AddDays(1); high = open + rnd.NextDouble(); close = high - rnd.NextDouble(); low = close - rnd.NextDouble(); var oldOpen = open; open = (high - low) * rnd.NextDouble() + low; if (low > oldOpen) { low = oldOpen; } volume = volume + 10 * rnd.NextDouble() - 5; item = new OhlcChartData() { Date = date, High = Math.Round(high, 2), Low = Math.Round(low, 2), Open = Math.Round(open, 2), Close = Math.Round(close, 2), Volume = Math.Round(volume, 2) }; data.Add(item); } return data; } public static List<OhlcChartData> GetVodafoneGroupData() { var data = new List<OhlcChartData>(); var path = System.Web.HttpContext.Current.Request.MapPath("~\\ChartData.csv"); using (StreamReader reader = File.OpenText(path)) { string text = reader.ReadToEnd(); var lines = text.Split(new char[] { '/', '\r', '\n', '/' }); for (var i = 1; i < lines.Count(); i++) { var line = lines[i]; if (string.IsNullOrWhiteSpace(line)) { continue; } var columns = line.Split(','); var date = DateTime.Parse(columns[0]); var open = double.Parse(columns[1]); var high = double.Parse(columns[2]); var low = double.Parse(columns[3]); var close = double.Parse(columns[4]); var volume = double.Parse(columns[5]) / 1000000d; OhlcChartData item = new OhlcChartData() { Date = date, High = Math.Round(high, 2), Low = Math.Round(low, 2), Open = Math.Round(open, 2), Close = Math.Round(close, 2), Volume = Math.Round(volume, 2) }; data.Add(item); } } return data; } public DateTime Date { get; set; } public double High { get; set; } public double Low { get; set; } public double Open { get; set; } public double Close { get; set; } public double Volume { get; set; } } } using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace SamplesBrowser.Controllers { public class ChartController : Controller { public ActionResult StockChart() { return View(OhlcChartData.GetData()); } } } |