amstock3
Version:
JavaScript Stock Chart V3
134 lines (109 loc) • 3.79 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">
<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>
<script>
AmCharts.ready(function () {
generateChartData();
createStockChart();
});
var chartData = [];
function generateChartData() {
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var value = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: value
});
}
}
function createStockChart() {
var chart = new AmCharts.AmStockChart();
// DATASETS //////////////////////////////////////////
var dataSet = new AmCharts.DataSet();
dataSet.color = "#b0de09";
dataSet.fieldMappings = [{
fromField: "value",
toField: "value"
}];
dataSet.dataProvider = chartData;
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
// PANELS ///////////////////////////////////////////
var stockPanel = new AmCharts.StockPanel();
stockPanel.showCategoryAxis = true;
stockPanel.title = "Value";
stockPanel.eraseAll = false;
stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);
var graph = new AmCharts.StockGraph();
graph.valueField = "value";
graph.bullet = "round";
graph.bulletColor = "#FFFFFF";
graph.bulletBorderColor = "#00BBCC";
graph.bulletBorderAlpha = 1;
graph.bulletBorderThickness = 2;
graph.bulletSize = 7;
graph.lineThickness = 2;
graph.lineColor = "#00BBCC";
graph.useDataSetColors = false;
stockPanel.addStockGraph(graph);
var stockLegend = new AmCharts.StockLegend();
stockLegend.valueTextRegular = " ";
stockLegend.markerType = "none";
stockPanel.stockLegend = stockLegend;
stockPanel.drawingIconsEnabled = true;
chart.panels = [stockPanel];
// OTHER SETTINGS ////////////////////////////////////
var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
scrollbarSettings.graph = graph;
scrollbarSettings.updateOnReleaseOnly = false;
chart.chartScrollbarSettings = scrollbarSettings;
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = cursorSettings;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.creditsPosition = "bottom-right";
panelsSettings.marginRight = 16;
panelsSettings.marginLeft = 16;
chart.panelsSettings = panelsSettings;
// PERIOD SELECTOR ///////////////////////////////////
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.position = "bottom";
periodSelector.periods = [{
period: "DD",
count: 10,
label: "10 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
chart.write('chartdiv');
}
</script>
</head>
<body style="background-color:#FFFFFF">
<div id="chartdiv" style="width:100%; height:500px;"></div>
</body>
</html>