Getting Started

Performance !!!

Chart Data

Bar and Column Charts

Line and Area Charts

Pie and Funnel Charts

Scatter and Bubble Charts

Radar and Polar Charts

Financial Charts

Gantt Charts

Combinational Charts

Dynamic Charts

Working with Chart Axes

Chart Features

Customizing Chart

Client-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 HTML code tab.
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Stock Chart with Volume Example - JavaScript Chart by DataViz Charts
</title>
	<link rel="stylesheet" type="text/css" href="../../css/dataviz.chart.css" />
	<link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" />
	<script src="../../js/dataviz.chart.min.js" type="text/javascript"></script>
	
	<script lang="javascript" type="text/javascript">

		function round(d) {
			return Math.round(100 * d) / 100;
		}

		var ohlcData = [];
		var volumeData = [];

		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;

		ohlcData.push([date, round(high), round(low), round(open), round(close)]);

		var volume = 100 + 15 * Math.random();
		volumeData.push([date, round(volume)]);

		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;
			}

			ohlcData.push([date, round(high), round(low), round(open), round(close)]);

			volume = volume + 10 * Math.random() - 5;

			volumeData.push([date, round(volume)]);
		}

		var chart = new DataViz.Chart({
			legend: { visible: false },
			border: { lineWidth: 0, padding: 0 },
			tooltips: {
				type: 'shared',
				disabled: true
			},
			crosshairs: {
				enabled: true,
				hLine: false
			},
			animation: { duration: 1 },
			axes: [
				{
					type: 'linear',
					location: 'left',
					width: 30
				}
			],
			series: [
				{
					title: 'Price Index',
					type: 'stock',
					data: ohlcData,
					pointWidth: 0.9
				}
			]
		});
		chart.write('chart');

		var volumeChart = new DataViz.Chart({
			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'
				},
				{
					type: 'linear',
					location: 'left',
					width: 30
				}
			],
			series: [
				{
					type: 'column',
					data: volumeData
				}
			]
		});
		volumeChart.write('chartVolume');

		var isHighlighting = false;

		chart.addEventListener('dataHighlighting', function (event, data) {
			if (!data) {
				volumeChart.highlightData();
				return;
			}

			document.getElementById('open').innerHTML = data.open;
			document.getElementById('high').innerHTML = data.high;
			document.getElementById('low').innerHTML = data.low;
			document.getElementById('close').innerHTML = data.close;

			var date = data.chart.stringFormat(data.x, "mmmm d, yyyy");

			document.getElementById('date').innerHTML = date;

			if (!isHighlighting) {

				isHighlighting = true;

				var index = ohlcData.indexOf(data.dataItem);
				volumeChart.highlightData([volumeData[index]]);
			}

			isHighlighting = false;
		});

		volumeChart.addEventListener('dataHighlighting', function (event, data) {
			if (!data) {
				chart.highlightData();
				return;
			}

			document.getElementById('volume').innerHTML = data.y;

			if (!isHighlighting) {

				isHighlighting = true;

				var index = volumeData.indexOf(data.dataItem);
				chart.highlightData([ohlcData[index]]);
			}

			isHighlighting = false;
		});
	</script>

</head>
<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>
			<div id="chart" style="width: 600px; height: 250px;">
			</div>
		</div>
		<div>
			<div id="chartVolume" style="width: 600px; height: 130px;">
			</div>
		</div>
	</div>
</body>
</html>