<!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 chartData = []; AmCharts.ready(function () { // generate some random data first generateChartData(); // SERIAL CHART chart = new AmCharts.AmSerialChart(); chart.pathToImages = "../amcharts/images/"; chart.marginLeft = 0; chart.marginRight = 0; chart.marginTop = 0; chart.dataProvider = chartData; chart.categoryField = "date"; // 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 // value axis var valueAxis = new AmCharts.ValueAxis(); valueAxis.inside = true; valueAxis.tickLength = 0; valueAxis.axisAlpha = 0; valueAxis.minimum = 100; valueAxis.maximum = 140; chart.addValueAxis(valueAxis); // GRAPH var graph = new AmCharts.AmGraph(); graph.dashLength = 3; graph.lineColor = "#7717D7"; graph.valueField = "visits"; graph.dashLength = 3; graph.bullet = "round"; chart.addGraph(graph); // CURSOR var chartCursor = new AmCharts.ChartCursor(); chartCursor.cursorAlpha = 0; chart.addChartCursor(chartCursor); // GUIDES are used to create horizontal range fills var guide = new AmCharts.Guide(); guide.value = 0; guide.toValue = 105; guide.fillColor = "#CC0000"; guide.fillAlpha = 0.2; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 105; guide.toValue = 110; guide.fillColor = "#CC0000"; guide.fillAlpha = 0.15; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 110; guide.toValue = 115; guide.fillColor = "#CC0000"; guide.fillAlpha = 0.1; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 115; guide.toValue = 120; guide.fillColor = "#CC0000"; guide.fillAlpha = 0.05; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 120; guide.toValue = 125; guide.fillColor = "#0000cc"; guide.fillAlpha = 0.05; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 125; guide.toValue = 130; guide.fillColor = "#0000cc"; guide.fillAlpha = 0.1; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 130; guide.toValue = 135; guide.fillColor = "#0000cc"; guide.fillAlpha = 0.15; guide.lineAlpha = 0; valueAxis.addGuide(guide); var guide = new AmCharts.Guide(); guide.value = 135; guide.toValue = 140; guide.fillColor = "#0000cc"; guide.fillAlpha = 0.2; guide.lineAlpha = 0; valueAxis.addGuide(guide); // WRITE chart.write("chartdiv"); }); // generate some random data function generateChartData() { var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 10); for (var i = 0; i < 10; i++) { // we create date objects here. In your data, you can have date strings // and then set format of your dates using chart.dataDateFormat property, // however when possible, use date objects, as this will speed up chart rendering. var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i); var visits = Math.round(Math.random() * 40) + 100; chartData.push({ date: newDate, visits: visits }); } } </script> </head> <body> <div id="chartdiv" style="width: 100%; height: 400px;"></div> </body> </html>