|
|
<!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>
|
