|
|
Price Index
Open:
High:
Low: Close:Volume:
This sample demonstrates the Stock chart type.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!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="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<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>
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetData"
TypeName="SamplesBrowser.Models.OhlcChartData"></asp:ObjectDataSource>
<div>
<div>
<jqChart:Chart ID="Chart1" Width="600px" Height="250px" runat="server" DataSourceID="ObjectDataSource1">
<Legend Visible="false"></Legend>
<Tooltips Disabled="true" TooltipsType="Shared"></Tooltips>
<Border LineWidth="0" Padding="0" />
<Crosshairs Enabled="true" HorizontalLine-Visible="false"></Crosshairs>
<Animation Enabled="True" Duration="00:00:01" />
<Axes>
<jqChart:LinearAxis Location="Left" Width="30"></jqChart:LinearAxis>
</Axes>
<Series>
<jqChart:StockSeries Title="Price Index"
XValuesField="Date"
OpenValuesField="Open"
HighValuesField="High"
LowValuesField="Low"
CloseValuesField="Close">
</jqChart:StockSeries>
</Series>
</jqChart:Chart>
</div>
<div>
<jqChart:Chart ID="ChartVolume" Width="600px" Height="130px" runat="server" DataSourceID="ObjectDataSource1">
<Legend Visible="false"></Legend>
<Tooltips Disabled="true" TooltipsType="Shared"></Tooltips>
<Border LineWidth="0" Padding="0" />
<Crosshairs Enabled="true" HorizontalLine-Visible="false"></Crosshairs>
<Animation Enabled="True" Duration="00:00:01" />
<Axes>
<jqChart:LinearAxis Location="Left" Width="30"></jqChart:LinearAxis>
</Axes>
<Series>
<jqChart:ColumnSeries XValuesField="Date" YValuesField="Volume">
</jqChart:ColumnSeries>
</Series>
</jqChart:Chart>
</div>
</div>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var chartName = '#<%= Chart1.ClientID %>';
var chartVolumeName = '#<%= ChartVolume.ClientID %>';
var series = $(chartName).jqChart('option', 'series');
var volumeSeries = $(chartVolumeName).jqChart('option', 'series');
var ohlcData = series[0].data;
var volumeData = volumeSeries[0].data;
var isHighlighting = false;
$(chartName).bind('dataHighlighting', function (event, data) {
if (!data) {
$(chartVolumeName).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);
$(chartVolumeName).jqChart('highlightData', [volumeData[index]]);
}
isHighlighting = false;
});
$(chartVolumeName).bind('dataHighlighting', function (event, data) {
if (!data) {
$(chartName).jqChart('highlightData', null);
return;
}
$('#volume').html(data.y);
if (!isHighlighting) {
isHighlighting = true;
var index = $.inArray(data.dataItem, volumeData);
$(chartName).jqChart('highlightData', [ohlcData[index]]);
}
isHighlighting = false;
});
$(chartName).jqChart('highlightData', [ohlcData[0]]);
$(chartVolumeName).jqChart('highlightData', [volumeData[0]]);
});
</script>
</form>
</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; }
}
}
|