<!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 type="text/javascript">
var chart;
var graph;
// note, some of tada points don't have value field
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"
},
{
"year": "1968"
},
{
"year": "1969"
},
{
"year": "1970"
},
{
"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"
},
{
"year": "1985"
},
{
"year": "1986"
},
{
"year": "1987"
},
{
"year": "1988"
},
{
"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.pathToImages = "../amcharts/images/";
chart.marginTop = 0;
chart.marginRight = 0;
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.dataDateFormat = "YYYY";
chart.balloon.cornerRadius = 6;
// 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 = 1;
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.dashLength = 1;
valueAxis.inside = true;
chart.addValueAxis(valueAxis);
// GRAPH
graph = new AmCharts.AmGraph();
graph.lineColor = "#b6d278";
graph.negativeLineColor = "#487dac"; // this line makes the graph to change color when it drops below 0
graph.bullet = "round";
graph.bulletSize = 8;
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.bulletBorderAlpha = 1;
graph.connect = false; // this makes the graph not to connect data points if data is missing
graph.lineThickness = 2;
graph.valueField = "value";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "YYYY";
chartCursor.graphBulletSize = 2;
chart.addChartCursor(chartCursor);
chart.creditsPosition = "bottom-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>