You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
5.3 KiB
175 lines
5.3 KiB
<!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> |
|
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.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(); |
|
chartScrollbar.scrollbarHeight = 5; |
|
chartScrollbar.offset = 15 |
|
chart.addChartScrollbar(chartScrollbar); |
|
|
|
// WRITE |
|
chart.write("chartdiv"); |
|
}); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="chartdiv" style="width: 100%; height: 400px;"></div> |
|
</body> |
|
|
|
</html> |