AnyStock AnyStock and Financial Charts is a JavaScript based financial web charting solution.

                     		anychart.onDocumentReady(function () {
			var dataTable = anychart.data.table();
			dataTable.addData(get_csco_daily_data());

			var mapping = dataTable.mapAs({
				'open': 1,
				'high': 2,
				'low': 3,
				'close': 4,
				'value': 4
			});

			// create stock chart
			var chart = anychart.stock();
			chart.padding(10, 50, 20, 50);
			chart.title({
				text: 'Plot title demo',
				fontColor: '#333',
				fontSize: 20
			});

			// create plot for the candlestick series
			var candlestickPlot = chart.plot(0);
			// adding extra Y axis to the right side
			candlestickPlot.yAxis(1).orientation('right');

			// create candlestick series
			candlestickPlot.candlestick()
				.data(mapping)
				.name('CSCO');

			// set candlestick plot title
			candlestickPlot.title({
				text: 'Cisco Systems, Inc. Stock prices',
				fontSize: 16
			});

			// create plot for MACD indicator
			var macdPlot = chart.plot(1);
			macdPlot.height('35%');
			macdPlot.yAxis(1).orientation('right');

			// create MACD Indicator
			macdPlot.macd(mapping);

			// set MACD plot title
			macdPlot.title('Moving Average Convergence/Divergence');
			macdPlot.title()
				.fontSize(16)
				.margin().top(20);

			// create plot for aroon indicator
			var aroonPlot = chart.plot(2);
			aroonPlot.height('35%');
			aroonPlot.yAxis(1).orientation('right');

			// set Aroon Indicator plot title
			aroonPlot.title({
				text: 'Aroon Indicator',
				fontSize: 16,
				margin: {
					top: 20
				}
			});

			// create Aroon indicator
			var aroonIndicator = aroonPlot.aroon(mapping);

			// set high and low stroke settings for indicator's range series
			aroonIndicator.rangeSeries().normal().highStroke('#64b5f6', 2);
			aroonIndicator.rangeSeries().normal().lowStroke('#ff6d00', 2);

			// set high and low fill settings for indicator's range series
			aroonIndicator.rangeSeries().normal().highFill('#64b5f6', .4);
			aroonIndicator.rangeSeries().normal().lowFill('#ff6d00', .4);

			// create scroller series with mapped data
			chart.scroller().splineArea(mapping);

			// set chart selected date/time range
			chart.selectRange('1999-06-24', '2001-05-29');
			// set container id for the chart
			chart.container('container');
			// initiate chart drawing
			chart.draw();

			// create range picker
			var rangePicker = anychart.ui.rangePicker();
			// init range picker
			rangePicker.render(chart);

			// create range selector
			var rangeSelector = anychart.ui.rangeSelector();
			// init range selector
			rangeSelector.render(chart);
		});