<!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 = [ { "y": 10, "x": 14, "value": 59, "y2": -5, "x2": -3, "value2": 44 }, { "y": 5, "x": 3, "value": 50, "y2": -15, "x2": -8, "value2": 12 }, { "y": -10, "x": -3, "value": 19, "y2": -4, "x2": 6, "value2": 35 }, { "y": -6, "x": 5, "value": 65, "y2": -5, "x2": -6, "value2": 168 }, { "y": 15, "x": -4, "value": 92, "y2": -10, "x2": -8, "value2": 102 }, { "y": 13, "x": 1, "value": 8, "y2": -2, "x2": -3, "value2": 41 }, { "y": 1, "x": 6, "value": 35, "y2": 0, "x2": -3, "value2": 16 } ]; AmCharts.ready(function () { // XY Chart chart = new AmCharts.AmXYChart(); chart.pathToImages = "../amcharts/images/"; chart.dataProvider = chartData; chart.startDuration = 1.5; // AXES // X var xAxis = new AmCharts.ValueAxis(); xAxis.position = "bottom"; xAxis.axisAlpha = 0; xAxis.minMaxMultiplayer = 1.2; chart.addValueAxis(xAxis); // Y var yAxis = new AmCharts.ValueAxis(); yAxis.position = "left"; yAxis.minMaxMultiplier = 1.2; yAxis.axisAlpha = 0; chart.addValueAxis(yAxis); // GRAPHS // first graph var graph = new AmCharts.AmGraph(); graph.valueField = "value"; graph.lineColor = "#b0de09"; graph.xField = "x"; graph.yField = "y"; graph.lineAlpha = 0; graph.bullet = "bubble"; graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>"; chart.addGraph(graph); // second graph graph = new AmCharts.AmGraph(); graph.valueField = "value2"; graph.lineColor = "#fcd202"; graph.xField = "x2"; graph.yField = "y2"; graph.lineAlpha = 0; graph.bullet = "bubble"; graph.balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>"; chart.addGraph(graph); // 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>