Stock chart with only period selector and scrollbar
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 75px;
}
JavaScript
var chartData = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setHours(0, 0, 0, 0);
firstDate.setDate(firstDate.getDate() - 2000);
for (var i = 0; i < 2000; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var open = Math.round(Math.random() * (30) + 100);
var close = open + Math.round(Math.random() * (15) - Math.random() * 10);
var low;
if (open < close) {
low = open - Math.round(Math.random() * 5);
} else {
low = close - Math.round(Math.random() * 5);
}
var high;
if (open < close) {
high = close + Math.round(Math.random() * 5);
} else {
high = open + Math.round(Math.random() * 5);
}
var volume = Math.round(Math.random() * (1000 + i)) + 100 + i;
var value = Math.round(Math.random() * (30) + 100);
chartData[i] = ({
date: newDate,
open: open,
close: close,
high: high,
low: low,
volume: volume,
value: value
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataSets: [{
fieldMappings: [{
fromField: "open",
toField: "open"
}, {
fromField: "close",
toField: "close"
}, {
fromField: "high",
toField: "high"
}, {
fromField: "low",
toField: "low"
}, {
fromField: "volume",
toField: "volume"
}, {
fromField: "value",
toField: "value"
}],
color: "#7f8da9",
dataProvider: chartData,
title: "West Stock",
categoryField: "date"
}, {
fieldMappings: [{
fromField: "value",
toField: "value"
}],
color: "#fac314",
dataProvider: chartData,
compared: true,
title: "East Stock",
categoryField: "date"
}],
panels: [{
title: "Value",
showCategoryAxis: false,
percentHeight: 0,
valueAxes: [{
dashLength: 5
}],
stockGraphs: [{
type: "serial",
id: "g1",
openField: "open",
closeField: "close",
highField: "high",
lowField:...