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());
}
}
}
|
Follow us on Twitter