<!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/xy.js" type="text/javascript"></script> <script type="text/javascript"> var chart; var chartData = [ { "ax": 1, "ay": 0.5, "bx": 1, "by": 2.2 }, { "ax": 2, "ay": 1.3, "bx": 2, "by": 4.9 }, { "ax": 3, "ay": 2.3, "bx": 3, "by": 5.1 }, { "ax": 4, "ay": 2.8, "bx": 4, "by": 5.3 }, { "ax": 5, "ay": 3.5, "bx": 5, "by": 6.1 }, { "ax": 6, "ay": 5.1, "bx": 6, "by": 8.3 }, { "ax": 7, "ay": 6.7, "bx": 7, "by": 10.5 }, { "ax": 8, "ay": 8, "bx": 8, "by": 12.3 }, { "ax": 9, "ay": 8.9, "bx": 9, "by": 14.5 }, { "ax": 10, "ay": 9.7, "bx": 10, "by": 15 }, { "ax": 11, "ay": 10.4, "bx": 11, "by": 18.8 }, { "ax": 12, "ay": 11.7, "bx": 12, "by": 19 } ]; AmCharts.ready(function () { // XY CHART chart = new AmCharts.AmXYChart(); chart.pathToImages = "../amcharts/images/"; chart.dataProvider = chartData; chart.startDuration = 1; // AXES // X var xAxis = new AmCharts.ValueAxis(); xAxis.title = "X Axis"; xAxis.position = "bottom"; xAxis.dashLength = 1; xAxis.axisAlpha = 0; xAxis.autoGridCount = true; chart.addValueAxis(xAxis); // Y var yAxis = new AmCharts.ValueAxis(); yAxis.position = "left"; yAxis.title = "Y Axis"; yAxis.dashLength = 1; yAxis.axisAlpha = 0; yAxis.autoGridCount = true; chart.addValueAxis(yAxis); // GRAPHS // triangles up var graph1 = new AmCharts.AmGraph(); graph1.lineColor = "#FF6600"; graph1.balloonText = "x:[[x]] y:[[y]]"; graph1.xField = "ax"; graph1.yField = "ay"; graph1.lineAlpha = 0; graph1.bullet = "triangleUp"; chart.addGraph(graph1); // triangles down var graph2 = new AmCharts.AmGraph(); graph2.lineColor = "#FCD202"; graph2.balloonText = "x:[[x]] y:[[y]]"; graph2.xField = "bx"; graph2.yField = "by"; graph2.lineAlpha = 0; graph2.bullet = "triangleDown"; chart.addGraph(graph2); // first trend line var trendLine = new AmCharts.TrendLine(); trendLine.lineColor = "#FF6600"; trendLine.initialXValue = 1; trendLine.initialValue = 2; trendLine.finalXValue = 12; trendLine.finalValue = 11; chart.addTrendLine(trendLine); // second trend line trendLine = new AmCharts.TrendLine(); trendLine.lineColor = "#FCD202"; trendLine.initialXValue = 1; trendLine.initialValue = 1; trendLine.finalXValue = 12; trendLine.finalValue = 19; chart.addTrendLine(trendLine); // CURSOR var chartCursor = new AmCharts.ChartCursor(); chart.addChartCursor(chartCursor); // SCROLLBAR var chartScrollbar = new AmCharts.ChartScrollbar(); chart.addChartScrollbar(chartScrollbar); // WRITE chart.write("chartdiv"); }); </script> </head> <body> <div id="chartdiv" style="width: 600px; height: 400px;"></div> </body> </html>