amcharts Line with filled value ranges

by tiagocarvalho

HTML

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 150px;"></div>

JavaScript

var chart;

var chartData = [];
var chartData2 = [];

// generate some random data
function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 10);

    for (var i = 0; i < 5; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * 40) + 100 + 0.4;
        var balls = Math.round(Math.random() * 40) + 200 + 3.2;

        chartData.push({
            date: "mairo que " + i,
            visits: visits,
            balls:  balls
        });
    }
        
}

AmCharts.ready(function() {
    // generate some random data first   
    generateChartData();
    
    
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    //chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.marginLeft = 0;
    chart.numberFormatter.decimalSeparator = ","; 
    chart.numberFormatter.thousandsSeparator = "."; 
   
    chart.marginRight = 0;
    chart.marginTop = 0;
    chart.autoMarginOffset = 5;
    chart.dataProvider = chartData;
    chart.categoryField = "date";

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    // value axis
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.inside = true;
    valueAxis.tickLength = 0;
    valueAxis.axisAlpha = 0;
    //valueAxis.minimum = 100;
    //valueAxis.maximum = 140;
    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);
    
    // GRAPH
    var graph2 = new AmCharts.AmGraph();
    graph2.dashLength = 3;
    graph2.lineColor = "#D20000";
    graph2.valueField = "balls";
    graph2.dashLength = 3;
    graph2.bullet = "round";
    chart.addGraph(graph2);
    

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
   ...