communityhallv22/target/classes/static/assets/node_modules/amcharts3/samples/fillBetweenTwoLines.html

<!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>
            // 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.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>