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