amstock3
Version:
JavaScript Stock Chart V3
173 lines (146 loc) • 4.24 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amStock Example</title>
<link rel="stylesheet" href="../amcharts/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/amstock.js" type="text/javascript"></script>
<!-- scripts for exporting chart as an image -->
<!-- Note, the exporting will work only if you view the file from web server -->
<!-- Exporting to image works on all modern browsers except IE9 (IE10 works fine) -->
<!--[if (!IE) | (gte IE 10)]> -->
<script type="text/javascript" src="../amcharts/plugins/export/export.js"></script>
<link type="text/css" href="../amcharts/plugins/export/export.css" rel="stylesheet">
<!-- <![endif]-->
<script>
var chartData = [];
function generateChartData() {
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 1000; i++) {
var newDate = new Date(firstDate);
newDate.setHours(0, i, 0, 0);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
var b = Math.round(Math.random() * 100000000);
chartData.push({
date: newDate,
value: a,
volume: b
});
}
}
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
categoryAxesSettings: {
minPeriod: "mm"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round",
bulletBorderColor: "#FFFFFF",
bulletBorderAlpha: 1,
bulletBorderThickness: 3
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
cornerRadiusTop: 2,
fillAlphas: 1
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}
],
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
updateOnReleaseOnly:false
},
chartCursorSettings: {
valueBalloonsEnabled: true,
valueLineEnabled: true,
valueLineBalloonEnabled: true
},
periodSelector: {
dateFormat: "YYYY-MM-DD HH:NN",
inputFieldWidth: 150,
periods: [{
period: "hh",
count: 1,
label: "1 hour"
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
usePrefixes: true,
creditsPosition: "bottom-right"
},
"export": {
"enabled": true,
// override some of the defaults (Stock Chart specific)
"periodSelector": {
"position": "left"
},
"dataSetSelector": {
"position": "left"
}
}
});
</script>
</head>
<body style="background-color:#FFFFFF">
<span style="font-size: 10; color: #CC0000;">
<p>Warning! Exporting to image works only if you view this file from web server. Exporting works with all modern browsers except IE9 (works fine with IE10).</p>
<p>Since version 3.14 chart export is done using dedicated plugin, located in amCharts/plugins/export folder. Please refer to bundled examples and README.md file for more information.</p>
</span>
<div id="chartdiv" style="width:100%; height:600px;"></div>
</body>
</html>