<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Candlestick Chart with Volume Example - HTML5 jQuery Chart Plugin by jqChart
</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
function round(d) {
return Math.round(100 * d) / 100;
}
var Data1 = [];
var Data2 = [];
var scatter = [];
var date = new Date(2010, 0, 1);
var high = Math.random() * 40;
var close = high - Math.random();
var low = close - Math.random();
var open = (high - low) * Math.random() + low;
Data1.push([date, round(high), round(low), round(open), round(close)]);
Data2.push([date, round(high+100), round(low+100), round(open+100), round(close+100)]);
scatter.push([date, round(high)]);
for (var day = 2; day <= 60; day++) {
date = new Date(2010, 0, day);
high = open + Math.random();
close = high - Math.random();
low = close - Math.random();
var oldOpen = open;
open = (high - low) * Math.random() + low;
if (low > oldOpen) {
low = oldOpen;
}
Data1.push([date, round(high), round(low), round(open), round(close)]);
Data2.push([date, round(high+100), round(low+100), round(open+100), round(close+100)]);
scatter.push([date, round(high)]);
/*
if(day%11 == 0){
scatter.push([date, round(high)]);
}else{
scatter.push([date, null]);
}
*/
}
$(document).ready(function () {
$('#jqChart').jqChart({
legend: { visible: false },
border: { lineWidth: 0, padding: 0 },
tooltips: {
type: 'shared',
disabled: true
},
crosshairs: {
enabled: true,
hLine: false
},
animation: { duration: 1 },
axes: [
{
type: 'dateTime',
location: 'bottom',
zoomEnabled: true
}
],
series: [
{
title: 'scatter try',
type: 'scatter',
data: scatter,
markers: { type: 'diamond', size: 8 }
},
{
title: 'Price Index',
type: 'candlestick',
data: Data1,
priceUpFillStyle: 'lightgreen',
priceDownFillStyle: 'red',
strokeStyle: 'black'
}
]
});
$('#jqChartVolume').jqChart({
legend: { visible: false },
border: { lineWidth: 0, padding: 0 },
tooltips: {
type: 'shared',
disabled: true
},
crosshairs: {
enabled: true,
hLine: false
},
animation: { duration: 1 },
axes: [
{
type: 'dateTime',
location: 'bottom',
zoomEnabled: true
}
],
series: [
{
title: 'Price Index',
type: 'candlestick',
data: Data2,
priceUpFillStyle: 'lightgreen',
priceDownFillStyle: 'red',
strokeStyle: 'black'
}
]
});
var isHighlighting = false;
$('#jqChart').bind('dataHighlighting', function (event, data) {
var dataArray = [];
for(var item in data){
dataArray.push(item);
}
console.log(dataArray);
if (!data) {
$('#jqChartVolume').jqChart('highlightData', null);
return;
}
$('#open1').html(data.open);
$('#high1').html(data.high);
$('#low1').html(data.low);
$('#close1').html(data.close);
var date = "";
if(data.chart == undefined){
for(var item in data){
dataArray.push(item);
}
//alert(dataArray);
}else{
date = data.chart.stringFormat(data.x, "mmmm d, yyyy");
}
$('#date1').html(date);
if (!isHighlighting) {
isHighlighting = true;
var index = $.inArray(data.dataItem, Data1);
$('#jqChartVolume').jqChart('highlightData', [Data2[index]]);
}
isHighlighting = false;
});
$('#jqChartVolume').bind('dataHighlighting', function (event, data) {
if (!data) {
$('#jqChart').jqChart('highlightData', null);
return;
}
$('#open2').html(data.open);
$('#high2').html(data.high);
$('#low2').html(data.low);
$('#close2').html(data.close);
var date = data.chart.stringFormat(data.x, "mmmm d, yyyy");
$('#date2').html(date);
if (!isHighlighting) {
isHighlighting = true;
var index = $.inArray(data.dataItem, Data2);
$('#jqChart').jqChart('highlightData', [Data1[index]]);
}
isHighlighting = false;
});
$('#jqChart').jqChart('highlightData', [Data1[0]]);
$('#jqChartVolume').jqChart('highlightData', [Data2[0]]);
});
</script>
</head>
<body>
<h3>
Price Index</h3>
<div style="margin-left: 10px">
<b>Open:</b><span id="open1" style="display: inline-block; width: 45px;"> </span>
<b>High:</b><span id="high1" style="display: inline-block; width: 45px;"> </span>
<b>Low:</b><span id="low1" style="display: inline-block; width: 45px;"> </span>
<b>Close:</b><span id="close1" style="display: inline-block; width: 45px;"></span>
<span style="float: right; font-weight: bolder; width: 150px" id="date1"></span>
</div>
<div style="margin-left: 10px">
<b>Open:</b><span id="open2" style="display: inline-block; width: 45px;"> </span>
<b>High:</b><span id="high2" style="display: inline-block; width: 45px;"> </span>
<b>Low:</b><span id="low2" style="display: inline-block; width: 45px;"> </span>
<b>Close:</b><span id="close2" style="display: inline-block; width: 45px;"></span>
<span style="float: right; font-weight: bolder; width: 150px" id="date2"></span>
</div>
<div>
<div>
<div id="jqChart" style="width: 600px; height: 250px;">
</div>
</div>
<div>
<div id="jqChartVolume" style="width: 600px; height: 250px;">
</div>
</div>
</div>
</body>
</html>