<!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">
// since v3, chart can accept data in JSON format
// if your category axis parses dates, you should only
// set date format of your data (dataDateFormat property of AmSerialChart)
var chartData = [
{
"date": "2009-10-02",
"value": 5
},
{
"date": "2009-10-03",
"value": 15
},
{
"date": "2009-10-04",
"value": 13
},
{
"date": "2009-10-05",
"value": 17
},
{
"date": "2009-10-06",
"value": 15
},
{
"date": "2009-10-09",
"value": 19
},
{
"date": "2009-10-10",
"value": 21
},
{
"date": "2009-10-11",
"value": 20
},
{
"date": "2009-10-12",
"value": 20
},
{
"date": "2009-10-13",
"value": 19
},
{
"date": "2009-10-16",
"value": 25
},
{
"date": "2009-10-17",
"value": 24
},
{
"date": "2009-10-18",
"value": 26
},
{
"date": "2009-10-19",
"value": 27
},
{
"date": "2009-10-20",
"value": 25
},
{
"date": "2009-10-23",
"value": 29
},
{
"date": "2009-10-24",
"value": 28
},
{
"date": "2009-10-25",
"value": 30
},
{
"date": "2009-10-26",
"value": 72
},
{
"date": "2009-10-27",
"value": 43
},
{
"date": "2009-10-30",
"value": 31
},
{
"date": "2009-11-01",
"value": 30
},
{
"date": "2009-11-02",
"value": 29
},
{
"date": "2009-11-03",
"value": 27
},
{
"date": "2009-11-04",
"value": 26
}
];
createFromToFields();
// create from/to field values programatically
function createFromToFields(){
for(var i = 0; i < chartData.length; i++){
var value = chartData[i].value;
chartData[i].fromValue = value - value * 0.2;
chartData[i].toValue = value + value * 0.2;
}
}
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.pathToImages = "../amcharts/images/";
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
// 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
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 4;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// FROM GRAPH
var fromGraph = new AmCharts.AmGraph();
fromGraph.type = "line";
fromGraph.valueField = "fromValue";
fromGraph.lineAlpha = 0;
fromGraph.showBalloon = false;
chart.addGraph(fromGraph);
// TO GRAPH
var toGraph = new AmCharts.AmGraph();
toGraph.type = "line";
toGraph.valueField = "toValue";
toGraph.lineAlpha = 0;
toGraph.fillAlphas = 0.2;
toGraph.fillToGraph = fromGraph;
toGraph.showBalloon = false;
chart.addGraph(toGraph);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.valueField = "value";
graph.lineColor = "#000000";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:100%; height:400px;"></div>
</body>
</html>