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.
315 lines
9.4 KiB
315 lines
9.4 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 chartData = [
|
||
|
|
{
|
||
|
|
"year": "1950",
|
||
|
|
"value": -0.307
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1951",
|
||
|
|
"value": -0.168
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1952",
|
||
|
|
"value": -0.073
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1953",
|
||
|
|
"value": -0.027
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1954",
|
||
|
|
"value": -0.251
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1955",
|
||
|
|
"value": -0.281
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1956",
|
||
|
|
"value": -0.348
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1957",
|
||
|
|
"value": -0.074
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1958",
|
||
|
|
"value": -0.011
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1959",
|
||
|
|
"value": -0.074
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1960",
|
||
|
|
"value": -0.124
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1961",
|
||
|
|
"value": -0.024
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1962",
|
||
|
|
"value": -0.022
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1963",
|
||
|
|
"value": 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1964",
|
||
|
|
"value": -0.296
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1965",
|
||
|
|
"value": -0.217
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1966",
|
||
|
|
"value": -0.147
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1967",
|
||
|
|
"value": -0.15
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1968",
|
||
|
|
"value": -0.16
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1969",
|
||
|
|
"value": -0.011
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1970",
|
||
|
|
"value": -0.068
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1971",
|
||
|
|
"value": -0.19
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1972",
|
||
|
|
"value": -0.056
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1973",
|
||
|
|
"value": 0.077
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1974",
|
||
|
|
"value": -0.213
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1975",
|
||
|
|
"value": -0.17
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1976",
|
||
|
|
"value": -0.254
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1977",
|
||
|
|
"value": 0.019
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1978",
|
||
|
|
"value": -0.063
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1979",
|
||
|
|
"value": 0.05
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1980",
|
||
|
|
"value": 0.077
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1981",
|
||
|
|
"value": 0.12
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1982",
|
||
|
|
"value": 0.011
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1983",
|
||
|
|
"value": 0.177
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1984",
|
||
|
|
"value": -0.021
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1985",
|
||
|
|
"value": -0.037
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1986",
|
||
|
|
"value": 0.03
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1987",
|
||
|
|
"value": 0.179
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1988",
|
||
|
|
"value": 0.18
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1989",
|
||
|
|
"value": 0.104
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1990",
|
||
|
|
"value": 0.255
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1991",
|
||
|
|
"value": 0.21
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1992",
|
||
|
|
"value": 0.065
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1993",
|
||
|
|
"value": 0.11
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1994",
|
||
|
|
"value": 0.172
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1995",
|
||
|
|
"value": 0.269
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1996",
|
||
|
|
"value": 0.141
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1997",
|
||
|
|
"value": 0.353
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1998",
|
||
|
|
"value": 0.548
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "1999",
|
||
|
|
"value": 0.298
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2000",
|
||
|
|
"value": 0.267
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2001",
|
||
|
|
"value": 0.411
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2002",
|
||
|
|
"value": 0.462
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2003",
|
||
|
|
"value": 0.47
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2004",
|
||
|
|
"value": 0.445
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"year": "2005",
|
||
|
|
"value": 0.47
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
AmCharts.ready(function () {
|
||
|
|
// SERIAL CHART
|
||
|
|
chart = new AmCharts.AmSerialChart();
|
||
|
|
|
||
|
|
chart.dataProvider = chartData;
|
||
|
|
chart.marginLeft = 10;
|
||
|
|
chart.categoryField = "year";
|
||
|
|
chart.dataDateFormat = "YYYY";
|
||
|
|
|
||
|
|
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
|
||
|
|
chart.addListener("dataUpdated", zoomChart);
|
||
|
|
|
||
|
|
// AXES
|
||
|
|
// category
|
||
|
|
var categoryAxis = chart.categoryAxis;
|
||
|
|
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
|
||
|
|
categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
|
||
|
|
categoryAxis.dashLength = 3;
|
||
|
|
categoryAxis.minorGridEnabled = true;
|
||
|
|
categoryAxis.minorGridAlpha = 0.1;
|
||
|
|
|
||
|
|
// value
|
||
|
|
var valueAxis = new AmCharts.ValueAxis();
|
||
|
|
valueAxis.axisAlpha = 0;
|
||
|
|
valueAxis.inside = true;
|
||
|
|
valueAxis.dashLength = 3;
|
||
|
|
chart.addValueAxis(valueAxis);
|
||
|
|
|
||
|
|
// GRAPH
|
||
|
|
graph = new AmCharts.AmGraph();
|
||
|
|
graph.type = "smoothedLine"; // this line makes the graph smoothed line.
|
||
|
|
graph.lineColor = "#d1655d";
|
||
|
|
graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
|
||
|
|
graph.bullet = "round";
|
||
|
|
graph.bulletSize = 8;
|
||
|
|
graph.bulletBorderColor = "#FFFFFF";
|
||
|
|
graph.bulletBorderAlpha = 1;
|
||
|
|
graph.bulletBorderThickness = 2;
|
||
|
|
graph.lineThickness = 2;
|
||
|
|
graph.valueField = "value";
|
||
|
|
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
|
||
|
|
chart.addGraph(graph);
|
||
|
|
|
||
|
|
// CURSOR
|
||
|
|
var chartCursor = new AmCharts.ChartCursor();
|
||
|
|
chartCursor.cursorAlpha = 0;
|
||
|
|
chartCursor.cursorPosition = "mouse";
|
||
|
|
chartCursor.categoryBalloonDateFormat = "YYYY";
|
||
|
|
chart.addChartCursor(chartCursor);
|
||
|
|
|
||
|
|
// SCROLLBAR
|
||
|
|
var chartScrollbar = new AmCharts.ChartScrollbar();
|
||
|
|
chart.addChartScrollbar(chartScrollbar);
|
||
|
|
|
||
|
|
chart.creditsPosition = "bottom-right";
|
||
|
|
|
||
|
|
// 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.zoomToDates(new Date(1972, 0), new Date(1984, 0));
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="chartdiv" style="width:100%; height:400px;"></div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|