You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
15 KiB
179 lines
15 KiB
1 year ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>amCharts examples</title>
|
||
|
|
<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>
|
||
|
|
var chart;
|
||
|
|
var graph;
|
||
|
|
var graphType = "candlestick";
|
||
|
|
var maxCandlesticks = 100;
|
||
|
|
|
||
|
|
var dataString = "2008-05-02,180.19,181.92,178.55,180.94\n2008-05-01,174.96,180.00,174.86,180.00\n2008-04-30,176.19,180.00,172.92,173.95\n2008-04-29,171.11,175.66,170.25,175.05\n2008-04-28,169.75,173.75,169.13,172.24\n2008-04-25,170.70,171.10,166.42,169.73\n2008-04-24,165.34,169.98,159.19,168.94\n2008-04-23,164.05,164.84,161.08,162.89\n2008-04-22,167.40,168.00,158.09,160.20\n2008-04-21,162.21,168.50,161.76,168.16\n2008-04-18,159.12,162.26,158.38,161.04\n2008-04-17,154.17,156.00,153.35,154.49\n2008-04-16,151.72,154.10,150.62,153.70\n2008-04-15,149.40,149.72,145.72,148.38\n2008-04-14,146.77,149.25,144.54,147.78\n2008-04-11,152.72,153.30,146.40,147.14\n2008-04-10,151.13,155.42,150.60,154.55\n2008-04-09,153.31,153.89,150.46,151.44\n2008-04-08,153.55,156.45,152.32,152.84\n2008-04-07,156.13,159.69,155.11,155.89\n2008-04-04,152.19,154.71,150.75,153.08\n2008-04-03,147.06,153.63,147.00,151.61\n2008-04-02,148.78,151.20,145.85,147.49\n2008-04-01,146.30,149.66,143.61,149.53\n2008-03-31,143.27,145.71,142.52,143.50\n2008-03-28,141.80,144.65,141.60,143.01\n2008-03-27,144.95,145.31,139.99,140.25\n2008-03-26,140.87,145.74,140.64,145.06\n2008-03-25,139.96,143.10,137.33,140.98\n2008-03-24,134.01,140.85,133.64,139.53\n2008-03-20,131.12,133.29,129.18,133.27\n2008-03-19,133.12,134.29,129.67,129.67\n2008-03-18,129.18,133.00,128.67,132.82\n2008-03-17,122.55,128.59,122.55,126.73\n2008-03-14,129.88,130.30,124.20,126.61\n2008-03-13,124.10,129.50,123.00,127.94\n2008-03-12,127.04,128.68,125.17,126.03\n2008-03-11,124.10,127.48,122.00,127.35\n2008-03-10,121.98,123.46,119.37,119.69\n2008-03-07,120.41,122.98,119.05,122.25\n2008-03-06,124.61,127.50,120.81,120.93\n2008-03-05,123.58,125.14,122.25,124.49\n2008-03-04,121.99,124.88,120.40,124.62\n2008-03-03,124.44,125.98,118.00,121.73\n2008-02-29,129.29,130.21,124.80,125.02\n2008-02-28,127.20,132.20,125.77,129.91\n2008-02-27,118.23,123.05,118.09,122.96\n2008-02-26,117.64,121.09,115.44,119.15\n2008-02-25,118.59,120.17,116.66,119.74\n2008-02-22,122.48,122.51,115.87,119.46\n2008-02-21,126.05,126.47,120.86,121.54\n2008-02-20,122.20,124.60,121.68,123.82\n2008-02-19,125.99,126.75,121.44,122.18\n2008-02-15,126.27,127.08,124.06,124.63\n2008-02-14,129.40,130.80,127.01,127.46\n2008-02-13,126.68,129.78,125.63,129.40\n2008-02-12,130.70,131.00,123.62,124.86\n2008-02-11,128.01,129.98,127.20,129.45\n2008-02-08,122.08,125.70,121.60,125.48\n2008-02-07,119.97,124.78,117.27,121.24\n2008-02-06,130.83,131.92,121.77,122.00\n2008-02-05,130.43,134.00,128.90,129.36\n2008-02-04,134.21,135.90,131.42,131.65\n2008-02-01,136.24,136.59,132.18,133.75\n2008-01-31,129.45,136.65,129.40,135.36\n2008-01-30,131.37,135.45,130.00,132.18\n2008-01-29,131.15,132.79,129.05,131.54\n2008-01-28,128.16,133.20,126.45,130.01\n2008-01-25,138.99,139.09,129.61,130.01\n2008-01-24,139.99,140.70,132.01,135.60\n2008-01-23,136.19,140.00,126.14,139.07\n2008-01-22,148.06,159.98,146.00,155.64\n2008-01-18,161.71,165.75,159.61,161.36\n2008-01-17,161.51,165.36,158.42,160.89\n2008-01-16,165.23,169.01,156.70,159.64\n2008-01-15,177.72,179.22,164.66,169.04\n2008-01-14,177.52,179.42,175.17,178.78\n2008-01-11,176.00,177.85,170.00,172.69\n2008-01-10,177.58,181.00,175.41,178.02\n2008-01-09,171.30,179.50,168.30,179.40\n2008-01-08,180.14,182.46,170.80,171.25\n2008-01-07,181.25,183.60,170.23,177.64\n2008-01-04,191.45,193.00,178.89,180.05\n2008-01-03,195.41,197.39,192.69,194.93\n2008-01-02,199.27,200.26,192.55,194.84\n2007-12-31,199.50,200.50,197.75,198.08\n2007-12-28,200.59,201.56,196.88,199.83\n2007-12-27,198.95,202.96,197.80,198.57\n2007-12-26,199.01,200.96,196.82,198.95\n2007-12-24,195.03,199.33,194.79,198.80\n2007-12-21,190.12,193.91,189.89,193.91\n2007-12-20,185.43,187.83,183.33,187.21\n2007-12-19,182.98,184.64,180.90,183.12\n2007-12-18,186.52,187.33,178.60,182.98\n2007-12-17,190.72,192.65,182.98,184.40\n2007-12-14,190.37,193.20,189.54,190.39\n2007-12-13,190.19,192.12,187.82,191.83\n2007-12-12,193.44,194.48,185.76,190.86\n2007-12-11,194.75,196.83,187.39,188.54\n2007-12-10,193.59,195.66,192.69,194.21\n2007-12-07,190.54,194.99,188.04,194.30\n2007-12-06,186.19,190.10,
|
||
|
|
var chartData = [];
|
||
|
|
|
||
|
|
AmCharts.ready(function () {
|
||
|
|
// first parse data string
|
||
|
|
parseData();
|
||
|
|
|
||
|
|
// SERIAL CHART
|
||
|
|
chart = new AmCharts.AmSerialChart();
|
||
|
|
|
||
|
|
chart.dataProvider = chartData;
|
||
|
|
chart.categoryField = "date";
|
||
|
|
// listen for dataUpdated event ad call "zoom" method then it happens
|
||
|
|
chart.addListener('dataUpdated', zoomChart);
|
||
|
|
// listen for zoomed event andcall "handleZoom" method then it happens
|
||
|
|
chart.addListener('zoomed', handleZoom);
|
||
|
|
|
||
|
|
// AXES
|
||
|
|
// category
|
||
|
|
var categoryAxis = chart.categoryAxis;
|
||
|
|
categoryAxis.parseDates = true; // as our data is date-based, we set this to true
|
||
|
|
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to "DD"
|
||
|
|
categoryAxis.dashLength = 1;
|
||
|
|
categoryAxis.inside = true;
|
||
|
|
|
||
|
|
// value
|
||
|
|
var valueAxis = new AmCharts.ValueAxis();
|
||
|
|
valueAxis.dashLength = 1;
|
||
|
|
valueAxis.axisAlpha = 0;
|
||
|
|
chart.addValueAxis(valueAxis);
|
||
|
|
|
||
|
|
// GRAPH
|
||
|
|
graph = new AmCharts.AmGraph();
|
||
|
|
graph.title = "Price:";
|
||
|
|
// as candlestick graph looks bad when there are a lot of candlesticks, we set initial type to "line"
|
||
|
|
graph.type = "line";
|
||
|
|
// graph colors
|
||
|
|
graph.lineColor = "#7f8da9";
|
||
|
|
graph.fillColors = "#7f8da9";
|
||
|
|
graph.negativeLineColor = "#db4c3c";
|
||
|
|
graph.negativeFillColors = "#db4c3c";
|
||
|
|
graph.fillAlphas = 1;
|
||
|
|
// candlestick graph has 4 fields - open, low, high, close
|
||
|
|
graph.openField = "open";
|
||
|
|
graph.highField = "high";
|
||
|
|
graph.lowField = "low";
|
||
|
|
graph.closeField = "close";
|
||
|
|
graph.balloonText = "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>";
|
||
|
|
// this one is for "line" graph type
|
||
|
|
graph.valueField = "close";
|
||
|
|
|
||
|
|
chart.addGraph(graph);
|
||
|
|
|
||
|
|
// CURSOR
|
||
|
|
var chartCursor = new AmCharts.ChartCursor();
|
||
|
|
chart.addChartCursor(chartCursor);
|
||
|
|
|
||
|
|
// SCROLLBAR
|
||
|
|
var chartScrollbar = new AmCharts.ChartScrollbar();
|
||
|
|
chartScrollbar.scrollbarHeight = 30;
|
||
|
|
chartScrollbar.graph = graph; // as we want graph to be displayed in the scrollbar, we set graph here
|
||
|
|
chartScrollbar.graphType = "line"; // we don't want candlesticks to be displayed in the scrollbar
|
||
|
|
chartScrollbar.gridCount = 4;
|
||
|
|
chartScrollbar.color = "#FFFFFF";
|
||
|
|
chart.addChartScrollbar(chartScrollbar);
|
||
|
|
|
||
|
|
// WRITE
|
||
|
|
chart.write("chartdiv");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// this method is called when chart is first inited as we listen for "dataUpdated" event
|
||
|
|
function zoomChart() {
|
||
|
|
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
|
||
|
|
chart.zoomToIndexes(chartData.length - 7, chartData.length - 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// this methid is called each time the selected period of the chart is changed
|
||
|
|
function handleZoom(event) {
|
||
|
|
var startDate = event.startDate;
|
||
|
|
var endDate = event.endDate;
|
||
|
|
document.getElementById("startDate").value = AmCharts.formatDate(startDate, "DD/MM/YYYY");
|
||
|
|
document.getElementById("endDate").value = AmCharts.formatDate(endDate, "DD/MM/YYYY");
|
||
|
|
|
||
|
|
// as we also want to change graph type depending on the selected period, we call this method
|
||
|
|
changeGraphType(event);
|
||
|
|
}
|
||
|
|
|
||
|
|
// changes graph type to line/candlestick, depending on the selected range
|
||
|
|
function changeGraphType(event) {
|
||
|
|
var startIndex = event.startIndex;
|
||
|
|
var endIndex = event.endIndex;
|
||
|
|
|
||
|
|
if (endIndex - startIndex > maxCandlesticks) {
|
||
|
|
// change graph type
|
||
|
|
if (graph.type != "line") {
|
||
|
|
graph.type = "line";
|
||
|
|
graph.fillAlphas = 0;
|
||
|
|
chart.validateNow();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// change graph type
|
||
|
|
if (graph.type != graphType) {
|
||
|
|
graph.type = graphType;
|
||
|
|
graph.fillAlphas = 1;
|
||
|
|
chart.validateNow();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Parse data
|
||
|
|
function parseData() {
|
||
|
|
// split data string into array
|
||
|
|
var rowArray = dataString.split("\n");
|
||
|
|
// loop through this array and create data items
|
||
|
|
for (var i = rowArray.length - 1; i > -1; i--) {
|
||
|
|
var row = rowArray[i].split(",");
|
||
|
|
var dateArray = row[0].split("-");
|
||
|
|
// we have to subtract 1 from month, as months in javascript are zero-based
|
||
|
|
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]));
|
||
|
|
var open = row[1];
|
||
|
|
var high = row[2];
|
||
|
|
var low = row[3];
|
||
|
|
var close = row[4];
|
||
|
|
|
||
|
|
chartData.push({
|
||
|
|
date: date,
|
||
|
|
open: open,
|
||
|
|
high: high,
|
||
|
|
low: low,
|
||
|
|
close: close
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// this method converts string from input fields to date object
|
||
|
|
function stringToDate(str) {
|
||
|
|
var dArr = str.split("/");
|
||
|
|
var date = new Date(Number(dArr[2]), Number(dArr[1]) - 1, dArr[0]);
|
||
|
|
return date;
|
||
|
|
}
|
||
|
|
|
||
|
|
// this method is called when user changes dates in the input field
|
||
|
|
function changeZoomDates() {
|
||
|
|
var startDateString = document.getElementById("startDate").value;
|
||
|
|
var endDateString = document.getElementById("endDate").value;
|
||
|
|
var startDate = stringToDate(startDateString);
|
||
|
|
var endDate = stringToDate(endDateString);
|
||
|
|
chart.zoomToDates(startDate, endDate);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="chartdiv" style="width:100%; height:400px;"></div>
|
||
|
|
<div style="float:right;margin-right:20px;">
|
||
|
|
<input onChange="changeZoomDates()" style="width:100px; text-align:center"
|
||
|
|
type="text" id="startDate">-
|
||
|
|
<input onChange="changeZoomDates()" style="width:100px; text-align:center"
|
||
|
|
type="text" id="endDate"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|