V3: Line with filled value ranges
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [];
AmCharts.ready(function () {
// generate some random data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.marginLeft = 0;
chart.marginRight = 0;
chart.marginTop = 0;
chart.dataProvider = chartData;
chart.categoryField = "date";
// 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
// value axis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.inside = true;
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.minimum = -40;
valueAxis.maximum = 60;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = "#7717D7";
graph.valueField = "visits";
graph.dashLength = 3;
graph.bullet = "round";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chart.addChartCursor(chartCursor);
// GUIDES are used to create horizontal range fills
var guide = new AmCharts.Guide();
guide.value = 0;
guide.toValue = 105;
guide.fillColor = "#CC0000";
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var guide = new AmCharts.Guide();
guide.value = 105;
guide.toValue = 110;
guide.fillColor = "#CC0000";
guide.fillAlpha = 0.15;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var guide = new AmCharts.Guide();
guide.value = 110;
guide.toValue = 115;
guide.fillColor = "#CC0000";
guide.fillAlpha = 0.1;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
var guide = new AmCharts.Guide();
guide.value =...