V3: Line with weekends marked
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: 342px;"></div>
JavaScript
var chart;
var chartData = [];
var chartCursor;
AmCharts.ready(function () {
// generate some data first
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.balloon.bulletSize = 5;
// listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// 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.axisColor = "#DADADA";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "red line";
graph.valueField = "visits";
graph.bullet = "round";
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.bulletBorderAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = "red";
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);
// value axis used for fills
var valueAxisColumn = new AmCharts.ValueAxis();
valueAxisColumn.axisAlpha = 0;
valueAxisColumn.stackType = "100%";
valueAxisColumn.labelsEnabled = false;
valueAxisColumn.gridAlpha = 0;
valueAxisColumn.axisAlpha = 0;
chart.addValueAxis(valueAxisColumn);
// Collumns
var weekendsGraph = new AmCharts.AmGraph();
weekendsGraph.valueAxis = valueAxisColumn;
weekendsGraph.valueField = "visits";
weekendsGraph.alphaField = "alpha";
...