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 Candlestick 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.Candlestick().Title("Price Index")
.XValues(el => el.Date)
.HighValues(el => el.High)
.LowValues(el => el.Low)
.OpenValues(el => el.Open)
.CloseValues(el => el.Close)
.PriceUpFillStyle(System.Drawing.Color.White)
.PriceDownFillStyle(System.Drawing.Color.Black)
.StrokeStyle(System.Drawing.Color.Black);
}
)
.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)
.FillStyle(System.Drawing.Color.Black);
}
)
.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.Candlestick().Title("Price Index")
.XValues(el => el.Date)
.HighValues(el => el.High)
.LowValues(el => el.Low)
.OpenValues(el => el.Open)
.CloseValues(el => el.Close)
.PriceUpFillStyle(System.Drawing.Color.White)
.PriceDownFillStyle(System.Drawing.Color.Black)
.StrokeStyle(System.Drawing.Color.Black);
}
)
.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)
.FillStyle(System.Drawing.Color.Black);
}
)
.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 CandlestickChartWithVolume()
{
return View(OhlcChartData.GetData());
}
}
}
|
Follow us on Twitter