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 |
Price Index
Open:
High:
Low: Close:Volume:
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> <h3> Price Index</h3> <div style="margin-left: 10px"> <b>Open:</b><span id="open" style="display: inline-block; width: 45px;"> </span> <b>High:</b><span id="high" style="display: inline-block; width: 45px;"> </span> <b>Low:</b><span id="low" style="display: inline-block; width: 45px;"> </span><b>Close:</b><span id="close" style="display: inline-block; width: 45px;"></span><b>Volume: </b> <span id="volume" style="display: inline-block; width: 45px;"></span><span style="float: right; font-weight: bolder; width: 150px" id="date"></span> </div> <div> <div> <%= Html.JQChart() .Chart(Model) .ID("jqChart") .Width(600) .Height(250) .Legend(legend => legend.Visible(false)) .Border(border => border.LineWidth(0).Padding(0)) .Tooltips(tooltip => tooltip.Disabled(true).TooltipsType(TooltipsType.Shared)) .Crosshairs(el => el.Enabled(true).HorizontalLine(false)) .Animation(TimeSpan.FromSeconds(1)) .Axes(axis => { axis.LinearAxis(Location.Left).Width(30); } ) .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> <div> <%= Html.JQChart() .Chart(Model) .ID("jqChartVolume") .Width(600) .Height(130) .Legend(legend => legend.Visible(false)) .Border(border => border.LineWidth(0).Padding(0)) .Tooltips(tooltip => tooltip.Disabled(true).TooltipsType(TooltipsType.Shared)) .Crosshairs(el => el.Enabled(true).HorizontalLine(false)) .Animation(TimeSpan.FromSeconds(1)) .Axes(axis => { axis.LinearAxis(Location.Left).Width(30); } ) .Series(series => { series.Column().XValues(el => el.Date) .YValues(el => el.Volume); } ) .Render()%> </div> </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var series = $('#jqChart').jqChart('option', 'series'); var volumeSeries = $('#jqChartVolume').jqChart('option', 'series'); var ohlcData = series[0].data; var volumeData = volumeSeries[0].data; var isHighlighting = false; $('#jqChart').bind('dataHighlighting', function (event, data) { if (!data) { $('#jqChartVolume').jqChart('highlightData', null); return; } $('#open').html(data.open); $('#high').html(data.high); $('#low').html(data.low); $('#close').html(data.close); var date = data.chart.stringFormat(data.x, "mmmm d, yyyy"); $('#date').html(date); if (!isHighlighting) { isHighlighting = true; var index = $.inArray(data.dataItem, ohlcData); $('#jqChartVolume').jqChart('highlightData', [volumeData[index]]); } isHighlighting = false; }); $('#jqChartVolume').bind('dataHighlighting', function (event, data) { if (!data) { $('#jqChart').jqChart('highlightData', null); return; } $('#volume').html(data.y); if (!isHighlighting) { isHighlighting = true; var index = $.inArray(data.dataItem, volumeData); $('#jqChart').jqChart('highlightData', [ohlcData[index]]); } isHighlighting = false; }); $('#jqChart').jqChart('highlightData', [ohlcData[0]]); $('#jqChartVolume').jqChart('highlightData', [volumeData[0]]); }); </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> <h3> Price Index</h3> <div style="margin-left: 10px"> <b>Open:</b><span id="open" style="display: inline-block; width: 45px;"> </span> <b>High:</b><span id="high" style="display: inline-block; width: 45px;"> </span> <b>Low:</b><span id="low" style="display: inline-block; width: 45px;"> </span><b>Close:</b><span id="close" style="display: inline-block; width: 45px;"></span><b>Volume: </b> <span id="volume" style="display: inline-block; width: 45px;"></span><span style="float: right; font-weight: bolder; width: 150px" id="date"></span> </div> <div> <div> @(Html.JQChart() .Chart(Model) .ID("jqChart") .Width(600) .Height(250) .Legend(legend => legend.Visible(false)) .Border(border => border.LineWidth(0).Padding(0)) .Tooltips(tooltip => tooltip.Disabled(true).TooltipsType(TooltipsType.Shared)) .Crosshairs(el => el.Enabled(true).HorizontalLine(false)) .Animation(TimeSpan.FromSeconds(1)) .Axes(axis => { axis.LinearAxis(Location.Left).Width(30); } ) .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> <div> @(Html.JQChart() .Chart(Model) .ID("jqChartVolume") .Width(600) .Height(130) .Legend(legend => legend.Visible(false)) .Border(border => border.LineWidth(0).Padding(0)) .Tooltips(tooltip => tooltip.Disabled(true).TooltipsType(TooltipsType.Shared)) .Crosshairs(el => el.Enabled(true).HorizontalLine(false)) .Animation(TimeSpan.FromSeconds(1)) .Axes(axis => { axis.LinearAxis(Location.Left).Width(30); } ) .Series(series => { series.Column().XValues(el => el.Date) .YValues(el => el.Volume); } ) .Render() ) </div> </div> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var series = $('#jqChart').jqChart('option', 'series'); var volumeSeries = $('#jqChartVolume').jqChart('option', 'series'); var ohlcData = series[0].data; var volumeData = volumeSeries[0].data; var isHighlighting = false; $('#jqChart').bind('dataHighlighting', function (event, data) { if (!data) { $('#jqChartVolume').jqChart('highlightData', null); return; } $('#open').html(data.open); $('#high').html(data.high); $('#low').html(data.low); $('#close').html(data.close); var date = data.chart.stringFormat(data.x, "mmmm d, yyyy"); $('#date').html(date); if (!isHighlighting) { isHighlighting = true; var index = $.inArray(data.dataItem, ohlcData); $('#jqChartVolume').jqChart('highlightData', [volumeData[index]]); } isHighlighting = false; }); $('#jqChartVolume').bind('dataHighlighting', function (event, data) { if (!data) { $('#jqChart').jqChart('highlightData', null); return; } $('#volume').html(data.y); if (!isHighlighting) { isHighlighting = true; var index = $.inArray(data.dataItem, volumeData); $('#jqChart').jqChart('highlightData', [ohlcData[index]]); } isHighlighting = false; }); $('#jqChart').jqChart('highlightData', [ohlcData[0]]); $('#jqChartVolume').jqChart('highlightData', [volumeData[0]]); }); </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 StockChartWithVolume() { return View(OhlcChartData.GetData()); } } } |