<!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;
var chartData = [
{
"year": "1950",
"value": 0.22
},
{
"year": "1951",
"value": 0.168
},
{
"year": "1952",
"value": 0.103
},
{
"year": "1953",
"value": 0.067
},
{
"year": "1954",
"value": 0.151
},
{
"year": "1955",
"value": 0.281
},
{
"year": "1956",
"value": 0.348
},
{
"year": "1957",
"value": 0.274
},
{
"year": "1958",
"value": 0.211
},
{
"year": "1959",
"value": 0.174
},
{
"year": "1960",
"value": 0.124
},
{
"year": "1961",
"value": 0.064
},
{
"year": "1962",
"value": 0.032
},
{
"year": "1963",
"value": 0.05
},
{
"year": "1964",
"value": 0.106
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.marginRight = 0;
chart.marginTop = 0;
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.dataDateFormat = "YYYY";
chart.color = "#FFFFFF";
chart.backgroundImage = "images/bgSky.jpg";
// 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.gridCount = 20;
categoryAxis.autoGridCount = false;
categoryAxis.axisAlpha = 0.3;
categoryAxis.axisColor = "#FFFFFF";
categoryAxis.gridAlpha = 0.05;
// VALUE
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0.3;
valueAxis.axisColor = "#FFFFFF";
valueAxis.showLastLabel = false;
chart.addValueAxis(valueAxis);
// GRAPH
graph = new AmCharts.AmGraph();
graph.type = "step"; // this line makes step graph
graph.noStepRisers = true;
graph.valueField = "value";
graph.lineColor = "#FFFFFF";
graph.lineThickness = 1;
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);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 800px; height: 500px;"></div>
</body>
</html>