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