<!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"> // since v3, chart can accept data in JSON format // if your category axis parses dates, you should only // set date format of your data (dataDateFormat property of AmSerialChart) var lineChartData = [ { "date": "2009-10-02", "value": 5 }, { "date": "2009-10-03", "value": 15 }, { "date": "2009-10-04", "value": 13 }, { "date": "2009-10-05", "value": 17 }, { "date": "2009-10-06", "value": 15 }, { "date": "2009-10-09", "value": 19 }, { "date": "2009-10-10", "value": 21 }, { "date": "2009-10-11", "value": 20 }, { "date": "2009-10-12", "value": 20 }, { "date": "2009-10-13", "value": 19 }, { "date": "2009-10-16", "value": 25 }, { "date": "2009-10-17", "value": 24 }, { "date": "2009-10-18", "value": 26 }, { "date": "2009-10-19", "value": 27 }, { "date": "2009-10-20", "value": 25 }, { "date": "2009-10-23", "value": 29 }, { "date": "2009-10-24", "value": 28 }, { "date": "2009-10-25", "value": 30 }, { "date": "2009-10-26", "value": 72, "customBullet": "images/redstar.png" }, { "date": "2009-10-27", "value": 43 }, { "date": "2009-10-30", "value": 31 }, { "date": "2009-11-01", "value": 30 }, { "date": "2009-11-02", "value": 29 }, { "date": "2009-11-03", "value": 27 }, { "date": "2009-11-04", "value": 26 } ]; AmCharts.ready(function () { var chart = new AmCharts.AmSerialChart(); chart.dataProvider = lineChartData; chart.pathToImages = "../amcharts/images/"; chart.categoryField = "date"; chart.dataDateFormat = "YYYY-MM-DD"; // sometimes we need to set margins manually // autoMargins should be set to false in order chart to use custom margin values chart.autoMargins = false; chart.marginRight = 0; chart.marginLeft = 0; chart.marginBottom = 0; chart.marginTop = 0; // AXES // category var categoryAxis = chart.categoryAxis; categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD categoryAxis.inside = true; categoryAxis.gridAlpha = 0; categoryAxis.tickLength = 0; categoryAxis.axisAlpha = 0; // value var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; chart.addValueAxis(valueAxis); // GRAPH var graph = new AmCharts.AmGraph(); graph.type = "line"; graph.valueField = "value"; graph.lineColor = "#D8E63C"; graph.customBullet = "images/star.png"; // bullet for all data points graph.bulletSize = 14; // bullet image should be a rectangle (width = height) graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star) chart.addGraph(graph); // CURSOR var chartCursor = new AmCharts.ChartCursor(); chart.addChartCursor(chartCursor); // WRITE chart.write("chartdiv"); }); </script> </head> <body> <div id="chartdiv" style="width:100%; height:400px;"></div> </body> </html>