communityhallv22/target/classes/static/assets/node_modules/amcharts3/samples/xyScatter.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/xy.js" type="text/javascript"></script>

        <script>
            var chart;

            var chartData = [
                {
                    "ax": 1,
                    "ay": 0.5,
                    "bx": 1,
                    "by": 2.2
                },
                {
                    "ax": 2,
                    "ay": 1.3,
                    "bx": 2,
                    "by": 4.9
                },
                {
                    "ax": 3,
                    "ay": 2.3,
                    "bx": 3,
                    "by": 5.1
                },
                {
                    "ax": 4,
                    "ay": 2.8,
                    "bx": 4,
                    "by": 5.3
                },
                {
                    "ax": 5,
                    "ay": 3.5,
                    "bx": 5,
                    "by": 6.1
                },
                {
                    "ax": 6,
                    "ay": 5.1,
                    "bx": 6,
                    "by": 8.3
                },
                {
                    "ax": 7,
                    "ay": 6.7,
                    "bx": 7,
                    "by": 10.5
                },
                {
                    "ax": 8,
                    "ay": 8,
                    "bx": 8,
                    "by": 12.3
                },
                {
                    "ax": 9,
                    "ay": 8.9,
                    "bx": 9,
                    "by": 14.5
                },
                {
                    "ax": 10,
                    "ay": 9.7,
                    "bx": 10,
                    "by": 15
                },
                {
                    "ax": 11,
                    "ay": 10.4,
                    "bx": 11,
                    "by": 18.8
                },
                {
                    "ax": 12,
                    "ay": 11.7,
                    "bx": 12,
                    "by": 19
                }
            ];

            AmCharts.ready(function () {
                // XY CHART
                chart = new AmCharts.AmXYChart();

                chart.dataProvider = chartData;
                chart.startDuration = 1;

                // AXES
                // X
                var xAxis = new AmCharts.ValueAxis();
                xAxis.title = "X Axis";
                xAxis.position = "bottom";
                xAxis.dashLength = 1;
                xAxis.axisAlpha = 0;
                xAxis.autoGridCount = true;
                chart.addValueAxis(xAxis);

                // Y
                var yAxis = new AmCharts.ValueAxis();
                yAxis.position = "left";
                yAxis.title = "Y Axis";
                yAxis.dashLength = 1;
                yAxis.axisAlpha = 0;
                yAxis.autoGridCount = true;
                chart.addValueAxis(yAxis);

                // GRAPHS
                // triangles up
                var graph1 = new AmCharts.AmGraph();
                graph1.lineColor = "#FF6600";
                graph1.balloonText = "x:[[x]] y:[[y]]";
                graph1.xField = "ax";
                graph1.yField = "ay";
                graph1.lineAlpha = 0;
                graph1.bullet = "triangleUp";
                chart.addGraph(graph1);

                // triangles down
                var graph2 = new AmCharts.AmGraph();
                graph2.lineColor = "#FCD202";
                graph2.balloonText = "x:[[x]] y:[[y]]";
                graph2.xField = "bx";
                graph2.yField = "by";
                graph2.lineAlpha = 0;
                graph2.bullet = "triangleDown";
                chart.addGraph(graph2);

                // first trend line
                var trendLine = new AmCharts.TrendLine();
                trendLine.lineColor = "#FF6600";
                trendLine.initialXValue = 1;
                trendLine.initialValue = 2;
                trendLine.finalXValue = 12;
                trendLine.finalValue = 11;
                chart.addTrendLine(trendLine);

                // second trend line
                trendLine = new AmCharts.TrendLine();
                trendLine.lineColor = "#FCD202";
                trendLine.initialXValue = 1;
                trendLine.initialValue = 1;
                trendLine.finalXValue = 12;
                trendLine.finalValue = 19;
                chart.addTrendLine(trendLine);

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

                // SCROLLBAR

                var chartScrollbar = new AmCharts.ChartScrollbar();
                chartScrollbar.scrollbarHeight = 5;
                chartScrollbar.offset = 15
                chart.addChartScrollbar(chartScrollbar);

                // WRITE
                chart.write("chartdiv");
            });
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>

</html>